Download as PDF, PPTX
Uploaded byJulie Cameron
PDF, PPTX11,036 views
Decoupling the Front-end with Modular CSS
The document discusses the challenges of managing CSS within codebases, highlighting issues like specificity hell and the coupling of HTML and CSS. It advocates for modular CSS practices such as Object-Oriented CSS (OOCSS), BEM, and SMACSS to create scalable, maintainable, and predictable styling. The document emphasizes best practices for naming conventions, separation of structure from skin, and the importance of documentation in CSS architecture.
Recommended
![[HEWEBAR 2012] Beyond Desktop Browsing (HTML5)](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fhewebar-2012-beyond-desktop-browsing-120729151254-phpapp01-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![[PSU Web 2011] HTML5 Design](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fhtml5-design-110613130006-phpapp01-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![[O'Reilly] HTML5 Design](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fhtml5-workshop-111215160913-phpapp01-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![[Access U 2010] HTML5 & Accessibility](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2faccessuhtml5andaccessibilityv2-100511152310-phpapp02-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
![Bootstrap [part 2]](/image.pl?url=https%3a%2f%2fcdn.slidesharecdn.com%2fss_thumbnails%2fjavanik-170208155331-thumbnail.jpg%3fwidth%3d640%26amp%3bheight%3d640%26amp%3bfit%3dbounds&f=jpg&w=240)
Decoupling the Front-end with Modular CSS
- 1.Decoupling the Front-endwithModular CSSJulie Cameron@jewlofthelotus#OSCON 2015bit.ly/decoupling-css
- 2.
- 3.
- 4.
- 5.
- 6.
- 7.
- 8.
- 9.#cascade {div.is {span.delicate{position: absolute !important;}}}@jewlofthelotus | #OSCON
- 10.
- 11.“It’s almost achallenge to find a developmentteam that’s working on a codebase that’s morethan a couple of years old where the CSS isn’tthe most frightening and hated part of thatsystem.”Andy Hume - CSS for Grownups@jewlofthelotus | #OSCON
- 12.TOP DOWN CSS=REPETITION& BLOAT@jewlofthelotus | #OSCON
- 13.
- 14.
- 15.
- 16.NONE OF THISISSCALABLE ORMAINTAINABLE.A hot mess is what it is…@jewlofthelotus | #OSCON
- 17.
- 18.WE’VE BEENCOUPLING OURHTML& CSS@jewlofthelotus | #OSCON
- 19.WE’VE BEENCOUPLING OURHTML& CSSAnd sometimes our CSS & JavaScript.@jewlofthelotus | #OSCON
- 20.WE’VE BEENCOUPLING OURHTML& CSSAnd sometimes our CSS & JavaScript. …and Feature Specs, too.@jewlofthelotus | #OSCON
- 21.
- 22.STOP USINGCSS SELECTORSFORNON-CSSData Attributes. FTW.@jewlofthelotus | #OSCON
- 23.
- 24.
- 25.
- 26.
- 27.
- 28.
- 29.
- 30.
- 31.
- 32.Modular Solutions• OOCSS•BEM• SMACSS• Atomic Design• CSS for Grownups• CCSS• DRY CSS• and many more…@jewlofthelotus | #OSCON
- 33.Object Oriented CascadingStylesheetsOOCSShttps://github.com/stubbornella/oocss/wiki@jewlofthelotus | #OSCON
- 34.A scalable, maintainable,semantic,and predictableapproach to writing CSS.@jewlofthelotus | #OSCON
- 35.OOCSS was createdby Nicole Sullivanwhile working for Facebook.She created a reusable CSS modulecalled the “media object” to savehundreds of lines of code.stubbornella.org@jewlofthelotus | #OSCON
- 36.The Media Object“acontent block containing a fixed-sizemedia element (e.g. image or video) alongwith other variable-size content (e.g. text)”https://github.com/stubbornella/oocss/wikiAKA a Facebook status.@jewlofthelotus | #OSCON
- 37.A Media ObjectMediato the left and somevariable length content tothe right.img.png@jewlofthelotus | #OSCON
- 38.The Foundation ofModular CSSOBJECTS@jewlofthelotus | #OSCON
- 39.Objects are theabstractionof repetition.@jewlofthelotus | #OSCON
- 40.Object Makeup1. HTML- one or more nodes of the DOMhttps://github.com/stubbornella/oocss/wiki/FAQ@jewlofthelotus | #OSCON
- 41.Object Makeup1. HTML- one or more nodes of the DOMhttps://github.com/stubbornella/oocss/wiki/FAQ2. CSS that styles those nodes@jewlofthelotus | #OSCON
- 42.Object Makeup1. HTML- one or more nodes of the DOMhttps://github.com/stubbornella/oocss/wiki/FAQ2. CSS that styles those nodes3. JavaScript functionality tied to those nodes@jewlofthelotus | #OSCON
- 43.
- 44.Modules with Variations.btn.btn—primary.btn-smallCSS.btn:hover@jewlofthelotus | #OSCON
- 45.Modules with Variations.btn.btn.is—disabled.btn.is-activeCSSJS.btn—primary .btn-smallCSS.btn:hover@jewlofthelotus | #OSCON
- 46.Module ComponentsObject akamodule / component / block .btn, .media@jewlofthelotus | #OSCON
- 47.Module ComponentsObject akamodule / component / block .btn, .mediaChild Objects .media__img, .media__bodyRelationships@jewlofthelotus | #OSCON
- 48.Module ComponentsObject akamodule / component / block .btn, .mediaModifiers .media—-inline, .media__img—-rightCSS Design VariationsChild Objects .media__img, .media__bodyRelationships@jewlofthelotus | #OSCON
- 49.Module ComponentsObject akamodule / component / block .btn, .mediaModifiers .media—-inline, .media__img—-rightCSS Design VariationsStates .media—-collapsed, .media.is-activeCSS / JS Design AdjustmentsChild Objects .media__img, .media__bodyRelationships@jewlofthelotus | #OSCON
- 50.
- 51.SINGLERESPONSIBILITYDo one thingwell and one thing only.@jewlofthelotus | #OSCON
- 52.
- 53.NAMINGCONVENTIONSJust breathe. Everythingis going to be okay.@jewlofthelotus | #OSCON
- 54.PICK A SYSTEMBECONSISTENT@jewlofthelotus | #OSCON
- 55.
- 56.Naming PatternsHow doyou identify children? States? Modifiers?.objectChild.object-child.object_child.object_ _child.myObject—childObj.object.is—active.objectModifier.object-modifier.object_modifier.object——modifier.myObj-modClass.object.active@jewlofthelotus | #OSCON
- 57.
- 58.
- 59..block .media.block__element .media__img@jewlofthelotus | #OSCON
- 60..block .media.block__element .media__img.block——modifier .media——inline@jewlofthelotus | #OSCON
- 61..block .media.block__element .media__img.block——modifier .media——inline.block__element——modifier .media_ _img——right@jewlofthelotus | #OSCON
- 62.
- 63.Presentational NamingDescribes howthe object looks..grid_ _col——9.btn——small.border——all.color——red.float——left.border——thick@jewlofthelotus | #OSCON
- 64.Semantic NamingDescribes whatthe object is..bookmark.article.callToAction.error.article_ _title.article——flagged@jewlofthelotus | #OSCON
- 65.Fewer Semantic ClassesDRYHTMLVSDRY CSSMany Presentational Classes@jewlofthelotus | #OSCON
- 66.NO ONE KNOWSWHATTHEY’REDOING.@jewlofthelotus | #OSCON
- 67.
- 68.
- 69.
- 70.Structure Vs. SkinDefinerepeating “invisible” patternsas reusable structures.What makes a button look like a button?@jewlofthelotus | #OSCON
- 71.Structure Vs. SkinDefinerepeating “invisible” patternsas reusable structures.What makes a button look like a button?Define repeating visual patternsas reusable skins.What makes these buttons look different?@jewlofthelotus | #OSCON
- 72.StructureRepeating “invisible” patterns.Whatmakes a button look like a button?@jewlofthelotus | #OSCON
- 73.StructureRepeating “invisible” patterns.Whatmakes a button look like a button?@jewlofthelotus | #OSCON
- 74.SkinRepeating visible patterns.Whatmakes these buttons look different?@jewlofthelotus | #OSCON
- 75.SkinRepeating visible patterns.Whatmakes these buttons look different?@jewlofthelotus | #OSCON
- 76.Structure + Skin@jewlofthelotus| #OSCON
- 77.Structure + Skin.btn.btn—primary.btn—small.btn—block.btn—inverse@jewlofthelotus | #OSCON
- 78.
- 79.Container Vs. ContentObjectsshould look the sameno matter where you put them.@jewlofthelotus | #OSCON
- 80.
- 81.
- 82.
- 83.
- 84.Separation OfContainer &ContentWhat is the container?@jewlofthelotus | #OSCON
- 85.Separation OfContainer &ContentWhat is the container?@jewlofthelotus | #OSCON
- 86.Separation OfContainer &ContentWhat is the content?@jewlofthelotus | #OSCON
- 87.Separation OfContainer &ContentAbstract reusable styles into a new object.@jewlofthelotus | #OSCON
- 88.With OOCSS, we’reencouraged to givemore forethought to what is commonamong different elements, then separatethose common features into modules, orobjects, that can be reused anywhere.Louis Lazaris — Smashing Magazine@jewlofthelotus | #OSCON
- 89.OOCSSStructure vs. SkinContainervs. Content@jewlofthelotus | #OSCON
- 90.
- 91.HTML <3 CSS@jewlofthelotus| #OSCON
- 92.
- 93.The Semantics Debate•Do classes actually have “semantic” value?@jewlofthelotus | #OSCON
- 94.The Semantics Debate•Do classes actually have “semantic” value?• To whom are classes semantic to?@jewlofthelotus | #OSCON
- 95.The Semantics Debate•Do classes actually have “semantic” value?• To whom are classes semantic to?• Should we stick with one way or the other?@jewlofthelotus | #OSCON
- 96.PresentationalArguments• Classes haveNO meaning to the browser.@jewlofthelotus | #OSCON
- 97.PresentationalArguments• Classes haveNO meaning to the browser.• Classes ARE semantic to developers.@jewlofthelotus | #OSCON
- 98.PresentationalArguments• Classes haveNO meaning to the browser.• Classes ARE semantic to developers.• Content describes itself, classes don’t need to.@jewlofthelotus | #OSCON
- 99.
- 100.SMACSSScalable & ModularArchitecture with CSShttp://smacss.comJonathan Snook@jewlofthelotus | #OSCON
- 101.
- 102.• Base• Layout•Module• State• ThemeSMACSS Categories@jewlofthelotus | #OSCON
- 103.CSS Resets+Default StylesWhatthings should generally look like.SMACSS Base Objects@jewlofthelotus | #OSCON
- 104.Containers+GridsHold the modulestogether.SMACSS Layout Objects#IDs for single use “major” components.classes for reusable “minor” components@jewlofthelotus | #OSCON
- 105.Reusable Parts+ Subclasses(Modifiers)Thegood stuff.SMACSS Modules@jewlofthelotus | #OSCON
- 106.Tacked on tolayout& module objectsIndicate a JavaScript dependency.SMACSS State Objects!important is allowed and even recommended!@jewlofthelotus | #OSCON
- 107.Tacked on tolayout& module objectsIndicate a JavaScript dependency.SMACSS State Objects!important is allowed and even recommended!Module-specificState objectsInclude module name & reside with it.pseudo & @media query states included.@jewlofthelotus | #OSCON
- 108.Themes canapply toall otherobject typesIn the case that your site has multipleholistic themes.SMACSS Themes@jewlofthelotus | #OSCON
- 109.
- 110.
- 111.Atomic Designatoms moleculesorganisms templates pages@jewlofthelotus | #OSCON
- 112.Atomic Designatoms moleculesorganisms templates pages+@jewlofthelotus | #OSCON
- 113.The basic buildingblocksof matter.Single element. Global styles.Atoms@jewlofthelotus | #OSCON
- 114.Groups of atomsbondedtogether.Simple combinations built for reuse.Molecules@jewlofthelotus | #OSCON
- 115.Groups of moleculesjoinedtogether.Complex, distinct sections of an interface.Organisms@jewlofthelotus | #OSCON
- 116.http://patternlab.ioA collection oftools to help you createatomic design systems.Pattern Lab
- 117.
- 118.
- 119.
- 120.
- 121.
- 122.
- 123.
- 124.
- 125.STOP USINGCSS SELECTORSFORNON-CSS@jewlofthelotus | #OSCON
- 126.
- 127.Questions?Decoupling the Front-endwithModular CSSJulie Cameron@jewlofthelotus#OSCON 2015bit.ly/decoupling-css