Scalable and Modular CSS FTW!

Uploaded on

If you're working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness …

If you're working on a large project with a lot of hands in the CSS pot, then your CSS may be doomed to code bloat failure. Scalable and modular CSS architectures and approaches are the new hotness and rightfully so. They provide sanity, predictably and scalability in a potentially crazy coding world. This session will give an overview of some the most popular approaches, including OOCSS, SMACSS, CSS for Grownups, and DRY CSS as well as discussing some general principles for keeping your CSS clean, optimized, and easy to maintain. Presented at FITC Amsterdam 2013

More in: Technology , Sports
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On Slideshare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. Scalable and Modular CSS FTW! e Legend of the Birth of MetaCoax/  *  Denise  R.  Jacobs  Future.  Innova6on.  Technology.  Crea6vity.  Amsterdam,  Netherlands  18  February  2013  */  
  • 2. Tweeting tall tales I am: @denisejacobs This fine event is: @fitc #FITCAms And I’m telling the tale of: #metacoax
  • 3. And tell stories about CSS
  • 4. I like to make stuff
  • 5. The Legend of the Birth of MetaCoaxchapter 1Problems in Poësia chapter 2The Teachings of the Masters chapter 3Insights and Epiphanies chapter 4Ousting Selector Evil chapter 5Triumph!
  • 6. Chapter 1Problems in Poësia
  • 7. You know how all stories start…
  • 8. There was a Kingdom called Poësia
  • 9. Emperor Eric
  • 10. On the surface, all was fine…
  • 11. Behind the city’s walls…
  • 12. It was a nightmare of dis-organization
  • 13. Top architects and designers
  • 14. Who hired builders
  • 15. Some believed in mastery…
  • 16. Others were not of that mind
  • 17. Put together with whatever was handy
  • 18. Shabby new structures
  • 19. They didn’t start off evil
  • 20. …but they slowly became so over time
  • 21. Follow suit and try to fit in
  • 22. Fight by trying to become !important
  • 23. He sent out his two most trusted aides…
  • 24. They traveled far and wide…
  • 25. And found the prophet Marcot
  • 26. The gospel of Responsive
  • 27. He spoke of a championne
  • 28. They traveled south to Mijami… Photo: Denise Jacobs
  • 29. To find Djieh and Djinn!
  • 30. Chapter 2The Teachings of the Masters
  • 31. They went deep into the canyons
  • 32. The Dry Wind appeared to them
  • 33. DRY CSS
  • 34. DRY CSS “Don’t Repeat Yourself” Never repeat a style/property definition…ever.
  • 35. DRY CSS: Thinking When looking at making a style declaration for aselector, always have an answer to the question "Why isn’t this part of a group?” Then figure out how to make it one.
  • 36. DRY CSS: Approach Groups define shared properties. Group selectors with shared properties, rather thandefining them separately. While the groups have many selectors, eachproperty/value pair is defined only once.
  • 37. DRY CSS: How •  Name the groups based on their role in the design •  Use the name as an ID at the top of the list and a class at the bottom •  Group selectors that share properties above the properties they share
  • 38. For example #LIGHT-WHITE-BACKGROUND,!.translation,!.entry .wp-caption,!#full-article .entry img,!.recent-comment .comment-text,!.roundup h3,!.post-header-sharing,!#post-categories td.label,!#post-archive roundup h3,!.subscription-manager ol,!.light-white-background!{! background-color: #fff;! border-color: #ccc;!}!
  • 39.
  • 40. The Ninja
  • 41. OOCSS Object Oriented CSS
  • 42. Was ruthless
  • 43. Outcome CSS bytes/page HTML bytes/page 19% 44% decrease decrease
  • 44. OOCSS: Signs you need it •  Large number of floats = bad grid •  Large number of margins = you need a reset css •  Large number of font-size & !important =  cascade is not being leveraged
  • 45. OOCSS: The Gist •  Employ DRY •  Separate structure and presentation •  Modularize
  • 46. OOCSS: Do’s •  Use CSS grids •  Keep selector chains as short as possible •  Give rules the same weight/strength •  Use <hr> as a page section delimiter •  Style classes rather than elements
  • 47. OOCSS: Don’ts •  Avoid attaching classes to elements •  Avoid using IDs as styling hooks, use them for JS hooks and page anchors •  Avoid the descendent selector •  Don’t over-semanticize class names •  Avoid classnames that are related to the appearance of the style
  • 48. OOCSS: The process 1.  Determine the site-wide “legos” (ie, reusable pieces) 2.  Separate –  Container and Content –  Structure and Skin –  Contour and Background –  Objects and Mix-ins 3.  Mix and match container and content objects to achieve high performance design. 4.  Skin for visual difference
  • 49. OOCSS: The Media Module
  • 50. OOCSS: The Media Module <!-- media --> !<div class="media"> ! !<img class="fixedMedia"src="myImg.png" /> ! !<div class="text"> ! !... ! !</div> !</div>!
  • 51. OOCSS: The Media Module /* ====== media ====== */!.media {margin:10px;}!.media, .bd {overflow:hidden;_overflow:visible; zoom:1;}!.media .img {float:left; margin-right: 10px;}!.media .img img{display:block;}!.media .imgExt{float:right; margin-left: 10px;}!
  • 52. The Lumberjack
  • 53. SMACSS Scalable and Modular Architecture for CSS
  • 54. SMACSS: Style categories •  Base •  Layout •  Module •  State •  Theme
  • 55. SMACSS: Curb your enthusiasm Selectors should be “shallow” instead of “deep” Strive for the shallowest possible.
  • 56. SMACSS: Deep selector div#childrens-footerdiv#col2.column div.bestRightp.bestTitle !
  • 57. SMACSS: Shallow selector p.bestTitle !
  • 58. SMACSS: Shallow selectors 101 •  Avoid tag selectors for common elements unless completely predictable. •  Use class names as the right-most (key) selector •  Use the child selector
  • 59. SMACSS: On “classitis” You’re better off adding classes to the elements inquestion and repeating the class in the HTML thanhaving overly-specific styles. Instead of being classitis, using multiple classesclarifies intent and increases the semantics ofelements in question.
  • 60. SMACSS: Module candidates •  Nav bars •  Carousels •  Dialogs •  Widgets •  Tables •  icons
  • 61. SMACSS: States State changes can be notated by class names like .is-active!.is-collapsed!.btn-pressed!
  • 62. SMACSS: What’s in a name? an example module: .example! a callout module: .callout! a callout module with a collapsed state:!
  • 63. SMACSS: Words of Wisdom “Constrain, but don’t choke. Consider selector performance, but don’t waste toomuch time on it.”
  • 64. The Brit
  • 65. CSS For Grown Ups (audio)
  • 66. He lived his own nightmare
  • 67. CSS For Grown Ups Don’t style pages, style modules. Have a style module library that you can reuse.
  • 68. CSS For Grown Ups Think of your styles as being in layers: •  document – from HTML code, element selectors •  base styles •  module styles •  layout styles
  • 69. CSS For Grown Ups Easy determination: A tag as part of the selector = a document style If you create a class for it, you release it from the tagand make it a module style.
  • 70. CSS For Grown Ups: Don’t …make modules variations based on IDs, base themon classes instead #sidebar .promo-box = bad .promo-box { ... } = okay! .promo-box-light { ... } = better!
  • 71. CSS For Grown Ups: Modules .promo-box! Related/sub-styles: module’s name extended withtwo dashes .promo-box--eco! javascript class prefixed with js: .js-login!
  • 72. CSS For Grown Ups: Typography .h-headline!.h-subheadline!.h-byline!.h-promo!
  • 73. CSS For Grown Ups: Helpers “Surgical layout helpers” which are things likepaddings, margins, and gutters as separate classes. .margin-top {margin-top: 1em;}!
  • 74. Chapter 3Insights and Epiphanies
  • 75. The Masters all speak the same truths
  • 76. Their teachings •  Ids? Not so much. •  Classes? Aww yeah! •  With selectors, less is more •  Get your module on •  Naming conventions? !Important
  • 77. Can be simplified to this: •  Structure and Inform •  Reduce •  Recycle and Reuse
  • 78. Structure and Inform
  • 79. Structure and Inform •  Utilize a naming convention to establish structure and meaning •  Categorize styles in the document or into multiple documents •  Employ grids for consistent page structure
  • 80. Reduce Photo: Denise Jacoba
  • 81. Reduce •  Eliminate inline styles •  Write the shortest chain of elements possible in selectors •  Drop elements: as qualifiers and selectors •  Choose classes over ids
  • 82. Recycle & Reuse
  • 83. Recycle & Reuse •  Leverage the cascade better to cut down on redundant style declarations •  Modularize page components to reuse throughout site •  Extend modules through subclassing
  • 84. They figured out the key!
  • 85. What do you do when you build?
  • 86. Exactly!
  • 87. What should we call it? Hmmm… measure twice, cut once css à mtco css à meta coa css à MetaCoax!
  • 88. And thus, MetaCoax was born! { Measure twice: cut once; }
  • 89. Djiejh and Djinn went to Poësia…
  • 90. Chapter 4Ousting Selector Evil
  • 91. Institute change in 3 phases
  • 92. (1) Initial phase •  Optimize selectors •  Reduce the redundant
  • 93. Optimize Selectors •  Eliminate qualifier selectors [oocss] •  Eliminate the middleman •  Have the shortest chain possible [oocss, smacss]
  • 94. Qualified selectors div#! div.! 1259 836
  • 95. Eliminate qualifier selectors Selectors like div#widget-nav div#widget-nav-slider ul li span! Could easily be simplified into #widget-nav-slider .name span! with the exact same outcome.
  • 96. Eliminate the middleman If you must use a descendent selector, then eliminateall unnecessary elements in it: .widget li a! would become .widget a!
  • 97. Have the shortest chain possible For example, instead of #toc > LI > A! it’s better to create a class, such as .toc-anchor!
  • 98. Reduce the Redundant •  Leverage the cascade by relying on inheritance [oocss] •  Review, revise and reduce !important  [oocss, smacss]
  • 99. Leverage the cascade with inheritance color!font-family !font-size !!font-style!font-variant !!font-weight !!font!line-height !!list-style-image !!list-style-position !!list-style-type !!list-style!text-align!text-indent !!text-transform!visibility!white-space!word-spacing!
  • 100. Not using the cascade font! font-size! 100 112
  • 101. Review, revise and reduce !important If there are a lot of styles that are !important then…
  • 102. UR DOIN’ IT WRONG
  • 103. For example… !important! 126
  • 104. (2) Intermediate phase •  Clear the cruft •  Create preliminary portable styles [cfgu] •  Begin instituting modules based on design patterns [oocss, smacss, cfgu] •  Institute a Grid [oocss]
  • 105. Clear the cruft •  Eliminate inline styles & decrease use of <span> •  Eliminate styles that rely on qualifiers high in the DOM [oocss] •  Use classnames as key selector [smacss] •  Create preliminary portable styles [cfgu]
  • 106. Eliminate styles that rely on qualifiers highin the DOM div#lowercontentdiv.children.videoitem.hovera.title { !background: #bc5b29; !color: #fff !important; !text-decoration: none; !}!
  • 107. Too high in the DOM body#! 936
  • 108. Create preliminary portable styles •  Typographic classes for headings, etc.[cfgu] •  Surgical layout helpers [cfgu]
  • 109. Is surgery necessary? margin-top! margin-bottom! 189 112
  • 110. Institute a Grid •  Use CSS3 box-sizing •  Make the grid and images fluid
  • 111. Bad grid width! margin! 327 738
  • 112. Good grid .l-col-1-1 {float:none;}!.l-col-1-2 {width:50%; *width:43%; }!.l-col-1-3 {width:33.33333%; *width:32.33333%;}!.l-col-2-3 {width:66.66666%; *width:65.66666%;}!.l-col-1-4 {width:25%; *width:23%; }!.l-col-3-4 {width:75%; *width:72%;}!.l-col-1-5 {width:20%; *width:19%;}!.l-col-2-5 {width:40%; *width:39%;}!.l-col-3-5 {width:60%; *width:59%;}!.l-col-4-5 {width:80%; *width:79%;}!.l-col-1-6 {width:16.6%; *width:15.6%;}!
  • 113. Make the grid and images fluid img {!max-width: 100%;!height: auto;!}!
  • 114. (3) Advanced phase •  Continue modularizing page elements  [ocss, smacss, cfgu] •  Continue cleaning-up selectors and styles •  Separate CSS files by category [smacss]
  • 115. Chapter 5Triumph!
  • 116. Structure
  • 117. Inbred selectors banished
  • 118. Ended the Specificity Wars
  • 119. Ready for a responsive future
  • 120. New best practices
  • 121. Reset with Normalize.css
  • 122. Use a better Clearfix Still using this? <div class="clear"></div>!…!.clear { clear: both; }!
  • 123. The New Clearfix /* For modern browsers */!.cf:before, .cf:after { ! content:""; !display: table;!} !!.cf:after { clear: both;} !!/* For IE 6/7 (trigger hasLayout) */!.cf { *zoom:1; } !
  • 124. And a better Divider Seriously? !<div class="divider"></div>!…!div.divider {!border-top: 1px solid #ABAA9A;!clear: both;!}!
  • 125. The Ninja says <hr> !
  • 126. …And Image replacement .hide-text {!text-indent: 100%;!white-space: nowrap;!overflow: hidden;!}!
  • 127. Use an icon element Instead of this: <li class="favorite">!<span class="icon favorite"></span>!<span id="favorite-poem-insert-point" class="favorite"></span>!</li>!
  • 128. Use an icon element Do this: <p><i class="icon icon-comment"></i>23comments</p>!...!.icon {background-image:url( sprites.png ); }!!.icon-comments {background-position: 0-30px; } !
  • 129. Share the Love
  • 130. Just revamping the code isn’t enough… “Even the cleanest code gets ruined by the first non-expert to touch it.” - Nicole Sullivan, The Cascade, Grids, Headings, and Selectors from anOOCSS Perspective
  • 131. Website styleguide
  • 132. Styleguide Creation Process 1.  Determine the unique elements and components that will be in the styleguide. Also notate the main colors for text, header, links, and buttons. 2.  Start styling the core elements of the pages: headings, links, tables, blockquotes, unordered and ordered lists, and forms. 3.  Style the components that override the base styles, such as search boxes, breadcrumb navigation, themed buttons, and variations in modules. Include interaction styles: hover, focus, active states.
  • 133. Styleguide creation process 4.  Add layout last and put the components into place. Each layout could be presented as a separate document. 5.  Document your coding process: naming conventions and the thinking behind decisions of grouping, classifying components, etc.
  • 134. So everyone can access the treasures
  • 135. With the knowledge of The Masters
  • 136. The code has been improved!
  • 137. Srsly! Start! Finish! 7500 2250
  • 138. And made Poësia…
  • 139. (You know how I’m going to end this)
  • 140. Character list and Resources
  • 141. The Marcot …is Ethan Marcotte, the creator and author ofResponsive Web Design (RWD)
  • 142. The Dry Wind …is Jeremy Clarke, the developer of DRY CSS.
  • 143. The Ninja …is Nicole Sullivan, the creatrice of ObjectOriented CSS (OOCSS)
  • 144. The Lumberjack …is Jonathan Snook, the creator and authorof Scalable and Modular CSS (SMACSS) &
  • 145. The Brit …is Andy Hume, the creator of CSS for GrownUps (I like to shorten this to CFGU).
  • 146. Djinn …is Jennifer Dixon, front-end developerextraordinaire
  • 147. Illustrations by Lorenzo Grandi
  • 148. My books The CSS Detective Smashing Books #3 & InterAct With  Guide #3 1/3 Web Standards: My chapter: “Storytelling in Webdesign”
  • 149. And I am…
  • 150. Now I really mean it!
  • 151. Thank You!