Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Decoupling the Front-end with Modular CSS

8,708 views

Published on

CSS is hard. It’s a simple language, but getting it right and avoiding specificity hell can be a challenge if you don’t have the right framework to back you up. Especially in large scaling projects, you might start adding ID selectors here and !important properties there and the next thing you know you’ve backed yourself into a corner where even the smallest of UI changes will take hours to work out. Ew.

Or how about this? Ever jump into a project and find that even the slightest markup change results in broken JavaScript AND sometimes even broken backend feature tests?! WTF. Ew.

This talk will look at how taking a modular, object-oriented approach to CSS can turn frontend woes into frontend wins. We’ll examine modern CSS approaches like OOCSS, SMACSS, and BEM and demonstrate how they will help to not only decouple your CSS styles and reduce specificity conflicts, but how they will also help to decouple your CSS and HTML from your JavaScript and feature specs.

Video from SEM.js November 2014: http://youtu.be/HoQ-QEusyS0

Published in: Internet
  • Hey guys! Who wants to chat with me? More photos with me here 👉 http://www.bit.ly/katekoxx
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

Decoupling the Front-end with Modular CSS

  1. 1. Decoupling the Front-end with Modular CSS Julie Cameron @jewlofthelotus #OSCON 2015 bit.ly/decoupling-css
  2. 2. DERP. @jewlofthelotus | #OSCON
  3. 3. @jewlofthelotus | #OSCON
  4. 4. articulate.com@jewlofthelotus | #OSCON
  5. 5. girldevelopit.com@jewlofthelotus | #OSCON
  6. 6. OOCSS @jewlofthelotus | #OSCON
  7. 7. Got CSS? @jewlofthelotus | #OSCON
  8. 8. @jewlofthelotus | #OSCON
  9. 9. #cascade { div.is { span.delicate { position: absolute !important; } } } @jewlofthelotus | #OSCON
  10. 10. @jewlofthelotus | #OSCON
  11. 11. “It’s almost a challenge to find a development team that’s working on a codebase that’s more than a couple of years old where the CSS isn’t the most frightening and hated part of that system.” Andy Hume - CSS for Grownups @jewlofthelotus | #OSCON
  12. 12. TOP DOWN CSS = REPETITION & BLOAT @jewlofthelotus | #OSCON
  13. 13. SELECTOR MISUSE = SPECIFICITY HELL @jewlofthelotus | #OSCON
  14. 14. BLOAT + BAD SELECTORS = BAD PERFORMANCE @jewlofthelotus | #OSCON
  15. 15. !IMPORTANT = THE DEVIL @jewlofthelotus | #OSCON
  16. 16. NONE OF THIS IS SCALABLE OR MAINTAINABLE. A hot mess is what it is… @jewlofthelotus | #OSCON
  17. 17. TOP DOWN OVERLY SPECIFIC CSS HTML@jewlofthelotus | #OSCON
  18. 18. WE’VE BEEN COUPLING OUR HTML & CSS @jewlofthelotus | #OSCON
  19. 19. WE’VE BEEN COUPLING OUR HTML & CSS And sometimes our CSS & JavaScript. @jewlofthelotus | #OSCON
  20. 20. WE’VE BEEN COUPLING OUR HTML & CSS And sometimes our CSS & JavaScript. …and Feature Specs, too. @jewlofthelotus | #OSCON
  21. 21. Coupled CSS Selectors @jewlofthelotus | #OSCON
  22. 22. STOP USING CSS SELECTORS FOR NON-CSS Data Attributes. FTW. @jewlofthelotus | #OSCON
  23. 23. Functionality Selectors @jewlofthelotus | #OSCON
  24. 24. START USING MODULAR CSS @jewlofthelotus | #OSCON
  25. 25. WHY? @jewlofthelotus | #OSCON
  26. 26. MODULAR @jewlofthelotus | #OSCON
  27. 27. PREDICTABLE @jewlofthelotus | #OSCON
  28. 28. MAINTAINABLE @jewlofthelotus | #OSCON
  29. 29. SCALABLE @jewlofthelotus | #OSCON
  30. 30. DRY @jewlofthelotus | #OSCON
  31. 31. ORGANIZED @jewlofthelotus | #OSCON
  32. 32. Modular Solutions • OOCSS • BEM • SMACSS • Atomic Design • CSS for Grownups • CCSS • DRY CSS • and many more… @jewlofthelotus | #OSCON
  33. 33. Object Oriented Cascading Stylesheets OOCSS https://github.com/stubbornella/oocss/wiki @jewlofthelotus | #OSCON
  34. 34. A scalable, maintainable, semantic, and predictable approach to writing CSS. @jewlofthelotus | #OSCON
  35. 35. OOCSS was created by Nicole Sullivan while working for Facebook. She created a reusable CSS module called the “media object” to save hundreds of lines of code. stubbornella.org @jewlofthelotus | #OSCON
  36. 36. The Media Object “a content block containing a fixed-size media element (e.g. image or video) along with other variable-size content (e.g. text)” https://github.com/stubbornella/oocss/wiki AKA a Facebook status. @jewlofthelotus | #OSCON
  37. 37. A Media Object Media to the left and some variable length content to the right. img.png @jewlofthelotus | #OSCON
  38. 38. The Foundation of Modular CSS OBJECTS @jewlofthelotus | #OSCON
  39. 39. Objects are the abstraction of repetition. @jewlofthelotus | #OSCON
  40. 40. Object Makeup 1. HTML - one or more nodes of the DOM https://github.com/stubbornella/oocss/wiki/FAQ @jewlofthelotus | #OSCON
  41. 41. Object Makeup 1. HTML - one or more nodes of the DOM https://github.com/stubbornella/oocss/wiki/FAQ 2. CSS that styles those nodes @jewlofthelotus | #OSCON
  42. 42. Object Makeup 1. HTML - one or more nodes of the DOM https://github.com/stubbornella/oocss/wiki/FAQ 2. CSS that styles those nodes 3. JavaScript functionality tied to those nodes @jewlofthelotus | #OSCON
  43. 43. Modules with Variations .btn @jewlofthelotus | #OSCON
  44. 44. Modules with Variations .btn .btn—primary .btn-small CSS .btn:hover @jewlofthelotus | #OSCON
  45. 45. Modules with Variations .btn .btn.is—disabled .btn.is-active CSS JS .btn—primary .btn-small CSS .btn:hover @jewlofthelotus | #OSCON
  46. 46. Module Components Object aka module / component / block .btn, .media @jewlofthelotus | #OSCON
  47. 47. Module Components Object aka module / component / block .btn, .media Child Objects .media__img, .media__body Relationships @jewlofthelotus | #OSCON
  48. 48. Module Components Object aka module / component / block .btn, .media Modifiers .media—-inline, .media__img—-right CSS Design Variations Child Objects .media__img, .media__body Relationships @jewlofthelotus | #OSCON
  49. 49. Module Components Object aka module / component / block .btn, .media Modifiers .media—-inline, .media__img—-right CSS Design Variations States .media—-collapsed, .media.is-active CSS / JS Design Adjustments Child Objects .media__img, .media__body Relationships @jewlofthelotus | #OSCON
  50. 50. BEST PRACTICES @jewlofthelotus | #OSCON
  51. 51. SINGLE RESPONSIBILITY Do one thing well and one thing only. @jewlofthelotus | #OSCON
  52. 52. .CLASSES .CLASSES .CLASSES Take that, specificity! @jewlofthelotus | #OSCON
  53. 53. NAMING CONVENTIONS Just breathe. Everything is going to be okay. @jewlofthelotus | #OSCON
  54. 54. PICK A SYSTEM BE CONSISTENT @jewlofthelotus | #OSCON
  55. 55. Naming Formats .modulename .moduleName .module-name .module_name .bem——style .bem_ _style @jewlofthelotus | #OSCON
  56. 56. Naming Patterns How do you 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. 57. BEM .block__element——modifier http://bem.info @jewlofthelotus | #OSCON
  58. 58. .block .media @jewlofthelotus | #OSCON
  59. 59. .block .media .block__element .media_ _img @jewlofthelotus | #OSCON
  60. 60. .block .media .block__element .media_ _img .block——modifier .media——inline @jewlofthelotus | #OSCON
  61. 61. .block .media .block__element .media_ _img .block——modifier .media——inline .block__element——modifier .media_ _img——right @jewlofthelotus | #OSCON
  62. 62. SEMANTIC VS PRESENTATIONAL NAMING Uh oh… @jewlofthelotus | #OSCON
  63. 63. Presentational Naming Describes how the object looks. .grid_ _col——9 .btn——small .border——all .color——red .float——left .border——thick @jewlofthelotus | #OSCON
  64. 64. Semantic Naming Describes what the object is. .bookmark .article .callToAction .error .article_ _title .article——flagged @jewlofthelotus | #OSCON
  65. 65. Fewer Semantic Classes DRY HTML VS DRY CSSMany Presentational Classes @jewlofthelotus | #OSCON
  66. 66. NO ONE KNOWS WHAT THEY’RE DOING. @jewlofthelotus | #OSCON
  67. 67. 2 Principles of OOCSS @jewlofthelotus | #OSCON
  68. 68. Separation of STRUCTURE from SKIN 1ST PRINCIPLE @jewlofthelotus | #OSCON
  69. 69. Structure Vs. Skin @jewlofthelotus | #OSCON
  70. 70. Structure Vs. Skin Define repeating “invisible” patterns as reusable structures. What makes a button look like a button? @jewlofthelotus | #OSCON
  71. 71. Structure Vs. Skin Define repeating “invisible” patterns as reusable structures. What makes a button look like a button? Define repeating visual patterns as reusable skins. What makes these buttons look different? @jewlofthelotus | #OSCON
  72. 72. Structure Repeating “invisible” patterns. What makes a button look like a button? @jewlofthelotus | #OSCON
  73. 73. Structure Repeating “invisible” patterns. What makes a button look like a button? @jewlofthelotus | #OSCON
  74. 74. Skin Repeating visible patterns. What makes these buttons look different? @jewlofthelotus | #OSCON
  75. 75. Skin Repeating visible patterns. What makes these buttons look different? @jewlofthelotus | #OSCON
  76. 76. Structure + Skin @jewlofthelotus | #OSCON
  77. 77. Structure + Skin .btn .btn—primary .btn—small .btn—block .btn—inverse @jewlofthelotus | #OSCON
  78. 78. Separation of CONTAINER from CONTENT 2ND PRINCIPLE @jewlofthelotus | #OSCON
  79. 79. Container Vs. Content Objects should look the same no matter where you put them. @jewlofthelotus | #OSCON
  80. 80. Location Dependent Styles @jewlofthelotus | #OSCON
  81. 81. Location Dependent Styles @jewlofthelotus | #OSCON
  82. 82. Location Dependent Styles @jewlofthelotus | #OSCON
  83. 83. Better? @jewlofthelotus | #OSCON
  84. 84. Separation Of Container & Content What is the container? @jewlofthelotus | #OSCON
  85. 85. Separation Of Container & Content What is the container? @jewlofthelotus | #OSCON
  86. 86. Separation Of Container & Content What is the content? @jewlofthelotus | #OSCON
  87. 87. Separation Of Container & Content Abstract reusable styles into a new object. @jewlofthelotus | #OSCON
  88. 88. With OOCSS, we’re encouraged to give more forethought to what is common among different elements, then separate those common features into modules, or objects, that can be reused anywhere. Louis Lazaris — Smashing Magazine @jewlofthelotus | #OSCON
  89. 89. OOCSS Structure vs. Skin Container vs. Content @jewlofthelotus | #OSCON
  90. 90. CLASSITIS @jewlofthelotus | #OSCON
  91. 91. HTML <3 CSS @jewlofthelotus | #OSCON
  92. 92. HTML <3 CSSCSS STYLE @jewlofthelotus | #OSCON
  93. 93. The Semantics Debate • Do classes actually have “semantic” value? @jewlofthelotus | #OSCON
  94. 94. The Semantics Debate • Do classes actually have “semantic” value? • To whom are classes semantic to? @jewlofthelotus | #OSCON
  95. 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. 96. Presentational Arguments • Classes have NO meaning to the browser. @jewlofthelotus | #OSCON
  97. 97. Presentational Arguments • Classes have NO meaning to the browser. • Classes ARE semantic to developers. @jewlofthelotus | #OSCON
  98. 98. Presentational Arguments • Classes have NO meaning to the browser. • Classes ARE semantic to developers. • Content describes itself, classes don’t need to. @jewlofthelotus | #OSCON
  99. 99. Semantic DRY HTML VS DRY CSSPresentational @jewlofthelotus | #OSCON
  100. 100. SMACSSScalable & Modular Architecture with CSS http://smacss.com Jonathan Snook @jewlofthelotus | #OSCON
  101. 101. CATEGORIZATION @jewlofthelotus | #OSCON
  102. 102. • Base • Layout • Module • State • Theme SMACSS Categories @jewlofthelotus | #OSCON
  103. 103. CSS Resets + Default Styles What things should generally look like. SMACSS Base Objects @jewlofthelotus | #OSCON
  104. 104. Containers + Grids Hold the modules together. SMACSS Layout Objects #IDs for single use “major” components .classes for reusable “minor” components @jewlofthelotus | #OSCON
  105. 105. Reusable Parts + 
 Subclasses (Modifiers) The good stuff. SMACSS Modules @jewlofthelotus | #OSCON
  106. 106. Tacked on to layout & module objects Indicate a JavaScript dependency. SMACSS State Objects !important is allowed and even recommended! @jewlofthelotus | #OSCON
  107. 107. Tacked on to layout & module objects Indicate a JavaScript dependency. SMACSS State Objects !important is allowed and even recommended! Module-specific State objects Include module name & reside with it. pseudo & @media query states included. @jewlofthelotus | #OSCON
  108. 108. Themes can apply to all other object types In the case that your site has multiple holistic themes. SMACSS Themes @jewlofthelotus | #OSCON
  109. 109. ATOMIC DESIGN http://bradfrost.com/blog/post/atomic-web-design Brad Frost @jewlofthelotus | #OSCON
  110. 110. ASSEMBLING @jewlofthelotus | #OSCON
  111. 111. Atomic Design atoms molecules organisms templates pages @jewlofthelotus | #OSCON
  112. 112. Atomic Design atoms molecules organisms templates pages +@jewlofthelotus | #OSCON
  113. 113. The basic building blocks of matter. Single element. Global styles. Atoms @jewlofthelotus | #OSCON
  114. 114. Groups of atoms bonded together. Simple combinations built for reuse. Molecules @jewlofthelotus | #OSCON
  115. 115. Groups of molecules joined together. Complex, distinct sections of an interface. Organisms @jewlofthelotus | #OSCON
  116. 116. http://patternlab.io A collection of tools to help you create atomic design systems. Pattern Lab
  117. 117. WHAT NOW? @jewlofthelotus | #OSCON
  118. 118. ORGANIZE OPTIMIZE REPEAT@jewlofthelotus | #OSCON
  119. 119. ITERATING ON ABSTRACTION @jewlofthelotus | #OSCON
  120. 120. FINDING THE RIGHT GRANULARITY @jewlofthelotus | #OSCON
  121. 121. ESTABLISH CONVENTIONS @jewlofthelotus | #OSCON
  122. 122. DOCUMENT EVERYTHING @jewlofthelotus | #OSCON
  123. 123. ARCHITECT A STYLEGUIDE @jewlofthelotus | #OSCON
  124. 124. UTILIZE A CSS PREPROCESSOR @jewlofthelotus | #OSCON
  125. 125. STOP USING CSS SELECTORS FOR NON-CSS @jewlofthelotus | #OSCON
  126. 126. http://github.com/davidtheclark/scalable-css-reading-list http://bit.ly/dc-scrl LEARN MORE @jewlofthelotus | #OSCON
  127. 127. Questions? Decoupling the Front-end with Modular CSS Julie Cameron @jewlofthelotus #OSCON 2015 bit.ly/decoupling-css

×