Scalable and Modular CSS FTW!


Published on

Save 10% off ANY FITC event with discount code 'slideshare'
See our upcoming events at

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.

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • In a land far away,
  • Whose emperor was…
  • …who was deeply troubled.
  • On the surface, the kingdom looked as if it should with all of the necessary elements in place,
  • While some of the builders believed in their craft/were concerned with the mastery of their craft and were committed to building structures that could scale and stand the test of time…
  • Others were a rag-tag bunch…
  • who would hastily build with whatever was handy,
  • ending up with each new structures of selectors shabbily tacked on to the last.New builders came and went, so that ones being added to build the kingdom had no way of know the intentions of the builders before them.
  • The structures of the selectors they created didn’t start off evil…
  • But over time, they became more established and caused problems based on their position in the hierarchy.
  • New selectors that came after them had to try to establish themselves by any means possible. So, no matter how ridiculous they looked, they would try to fit in by being long and unwieldy…
  • Or fight by making themselves !importantHe’d heard tell that there were wise masters whose teachings could guide and provide structure to the work of the architects and builders, but half-crazed and feverish with the single-minded goal of seeing the kingdom to completion as they originally planned it, his hired design and building experts poo-pooed his suggestions and dismissed the legends relegating them to mere fantasy.
  • Eric did not become ruler of his kingdom merely because of his impressive stature, regal bearing, and fine form. Being born of the stuff of myth himself, he knew that there had to be some verity in the legends. He sent out two of his most trusted aides Haliec and Vidad (whom he affectionately referred to at Scully and Mulder, because they were always actively seeking the truth) into the world to bring back a champion who could use this deep knowledge to bring order to the chaos within the kingdom.
  • He spoke to them of a new responsive world, a world where a kingdom, if built correctly, could be accessed by all peoples through all ways and methods. No seeker of information would be turned away from the treasures that a kingdom contained. Even though this wasn’t the work of the masters that they initially sought, their eyes and hearts glowed at the possibility of taking their beloved kingdom to the next level by responding to the needs of their visitors. The wisdom of the Marcot renewed their lagging hope and passion to find a person who would banish the evil selectors from their kingdom once and for all, establish order, and prepare for a future of responsive greatness.
  • The prophet Marcot saw the fire in their eyes and knew their hearts were pure and that they were true seekers. “There is one could help you,” he said. “Her name is Djiejh. I hear that she spreads the knowledge of the work of the masters. She may have answers for you.”
  • They went south to the land of the sun and sea (Mijhami), They went south to the land of the sun and sea (Mijhami), where they found Djiejh and conveyed their king’s angst, frustration, and growing concern around the large and still growing ranks of evil selectors and their renegade rules that were behind the shiny façade of their kingdom. Djiejh heard them out, [and felt honor-bound to help them] and then spoke to them of the teachings of the Ninja. “We’ve heard of the Ninja!” they exclaimed! “She’s real? She’s not just a legend?”
  • Djiejh spoke of the masters: The Ninja in the Area of the Bay, The Lumberjack, who hailed from the Great White North, and The Brit in the land of Londia. And finally, Djiejh related that calling upon the elemental The Dry Wind could help with the process and maintain order.
  • The Ninja is one of my disciples and has taken my practices to another level. Seek her in the Area of the Bay.
  • Large number of font-size = cascade is not being leveraged, also over-fussiness: few font sizes are readable - and small differences are not easily detectable.
  • Employ DRY: endeavor to create and apply as many reusable pieces of code as possible.Separate structure and presentation: avoid coupling the CSS too tightly to presentation/displayModularize: find common elements and presentation and abstract these into reusable code (aka modules)
  • Keep selector chains as short as possible: the browser can parse the CSS faster and it avoids specificity warsGive rules the same weight/strength so that you and mix and match them to extend an object through subclassingUse <hr> as a page section delimiter (instead of having top or bottom borders be part of an element)Style classes rather than elements
  • Avoid the descendent selector (i.e. don’t use .sidebar h3)Avoid IDs as styling hooksAvoid attaching classes to elements in your stylesheet (i.e. don’t do div.header or h1.title)Don’t over-semanticize class names: overly semantic names prevent reuse, and classnames should convey useful information to developers.Avoid classnames that are related to the appearance of the styleAvoid using IDs for CSS styling, use them for JS hooks and page anchors predominantly
  • Determine the site-wide “legos” (ie, reusable pieces), such as:Headings Lists (e.g. action list, external link list, product list, or feature list) Module headers and footers Grids Buttons Rounded corner boxes Tabs, Carousel, toggle blocks Objects and Mix-ins  Skin for visual differenceSkins/themes are the module’s presentation – how it looks. The goal is very predictable skins, values that can be easily calculated or measured.
  • Like OOCSS, SMACSS is about identifying patterns in your design and codifying them, and has a great structure for naming classes in a meaningful and useful way
  • Base - defaults: single element selectorsLayout – divides the page into sectionsModule – reusable, modular part of the design: callouts, sidebar sections, product lists, etc.State – ways to describe how the module or layout looks in a particular stateTheme – describe how modules or layouts might lookIn small projects, can all be in the same file. In larger projects, multiple files are recommended.
  • Using a class is preferable, even if you think the element is going to stay predictable.
  • You’re better off adding classes to the elements in question and repeating the class in the HTML (and potentially committing “classitis”) than having overly-specific styles. Instead of being classitis, using multiple classes clarifies intent and increases the semantics of elements in question.
  • Some further methodologies with modules include avoiding conditional styling based on the module’s location on the page or on the website with sub-class module components, tying media-queries to the module or layout component instead of grouping them separately, which allows for the module to be kept together and for isolated testing of the module; and only using !important on state styles if necessary, but none others.
  • In the naming convention for modules, include the name of the module itself.
  • In Londia
  • Worked at Clearleft and The Guardianwe’ve become obsessed with web standards to the degree that we strive to keep content and session separate to ridiculous lengths. In addition to web standards, managing complexity is an important factor to consider.  We need to optimize code for change, and let go of the idea that we will write HTML which we will never touch again, and do then just manage all of the presentation on the CSS side. In truth, we will always have to revamp the HTML along with the CSS.
  • The goal is this: when creating selectors, be aware of whether they are document, base or module, and make an effort to keep them all modular level.
  • But one WITH ids!
  • The names of the modules again should be descriptive/semantic and not tied to location or appearance:
  • Instead of styling headings by the elements, typographic classes are suggested, which can then be applied to h1-h6, p, dd, and any other tags, but the visual presentation will be the same:
  • To handle presentation issues, it’s recommended to use helpersThe above style would be the style that you could add to whatever element needed it on the page, instead of wrapping that style into a component.
  • Providing good information and organizing it is critical for clarity and understanding.
  • Distilling even further, Djieh and Djinn discovered the essence – the key!
  • Buoyed by their discoveries and new knowledge, they went to Poesia to implement their MetaCoax approach to taming the selectors that were running amok in the kingdom.
  • The goal is to make the stylesheet a little more lightweight and easier to maintain and update with the minimum amount of time and effort investment. The focus is on giving structure and organization to the stylesheet, reducing redundancy and better reuse of styles, And optimizing the selectors
  • Adopt a “3 or less” rule
  • Reduces location dependencyIncrease portabilityReduces chances of selector breakageDecreases specificity/Avoids specificity warsPrevents over-use of !importantCan make code more forgiving
  • Normalize.css “normalizes” the code to a common baseline rather than reseting the base styling for elements across all browsers.
  • the Kellum method ( of hiding the text offscreen using the -9999px; hack (and creating a huge invisible box in the process), this new technique hides the text while leaving it accessible to screen readers.
  • From 7500 lines to 2200 linesBetter in IE6 & IE7
  • …a better place for everyone – both visitors and builders alike.
  • Scalable and Modular CSS FTW!

    1. 1. Scalable and Modular CSS FTW! The Legend of the Birth of MetaCoax/ * Denise R. JacobsFuture. Innovation. Technology. Creativity.Amsterdam, Netherlands18 February 2013 */
    2. 2. Tweeting tall talesI am:@denisejacobsThis fine event is:@fitc #FITCAmsAnd I’m telling the tale of:#metacoax
    3. 3. And tell stories about CSS
    4. 4. I like to make stuff
    5. 5. The Legend of the Birth ofMetaCoaxchapter 1Problems in Poësiachapter 2The Teachings of the Masterschapter 3Insights and Epiphanieschapter 4Ousting Selector Evilchapter 5Triumph!
    6. 6. Chapter 1Problems in Poësia
    7. 7. You know how all stories start…
    8. 8. There was a Kingdom calledPoësia
    9. 9. Emperor Eric
    10. 10. On the surface, all was fine…
    11. 11. Behind the city’s walls…
    12. 12. It was a nightmare of dis-organization
    13. 13. Top architects and designers
    14. 14. Who hired builders
    15. 15. Some believed in mastery…
    16. 16. Others were not
    17. 17. Put together with whatever was handy
    18. 18. Shabby new structures
    19. 19. They didn’t start off evil
    20. 20. …but they slowly became so overtime
    21. 21. Follow suit and try to fit in
    22. 22. Fight by trying to become!important
    23. 23. He sent out his two most trustedaides…
    24. 24. They traveled far and wide…
    25. 25. And found the prophet Marcot
    26. 26. The gospel of Responsive
    27. 27. He spoke of a championne
    28. 28. They traveled south to Mijami… Photo: Denise Jacobs
    29. 29. To find Djieh and Djinn!
    30. 30. Chapter 2The Teachings of the Masters
    31. 31. They went deep into the canyons
    32. 32. The Dry Wind appeared to them
    33. 33. DRY CSS
    34. 34. DRY CSS“Don’t Repeat Yourself”Never repeat a style/property definition…ever.
    35. 35. DRY CSS: ThinkingWhen 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. 36. DRY CSS: ApproachGroups define shared properties.Group selectors with shared properties, ratherthan defining them separately.While the groups have many selectors, eachproperty/value pair is defined only once.
    37. 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. 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. 39. The Ninja
    40. 40. OOCSSObject Oriented CSS
    41. 41. Was ruthless
    42. 42. Outcome CSS bytes/page HTML bytes/page 19% 44% decrease decrease
    43. 43. 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
    44. 44. OOCSS: The Gist• Employ DRY• Separate structure and presentation• Modularize
    45. 45. 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
    46. 46. 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
    47. 47. OOCSS: The process1. Determine the site-wide “legos” (ie, reusable pieces)2. Separate – Container and Content – Structure and Skin – Contour and Background – Objects and Mix-ins3. Mix and match container and content objects to achieve high performance design.4. Skin for visual difference
    48. 48. OOCSS: The Media Module
    49. 49. OOCSS: The Media Module<!-- media --><div class="media"> <img class="fixedMedia" src="myImg.png" /> <div class="text"> ... </div></div>
    50. 50. 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;}
    51. 51. The Lumberjack
    52. 52. SMACSSScalable and Modular Architecture for CSS
    53. 53. SMACSS: Style categories• Base• Layout• Module• State• Theme
    54. 54. SMACSS: Curb your enthusiasmSelectors should be “shallow” instead of “deep”Strive for the shallowest possible.
    55. 55. SMACSS: Deep selectordiv#childrens-footer div#col2.columndiv.bestRight p.bestTitle
    56. 56. SMACSS: Shallow selectorp.bestTitle
    57. 57. 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
    58. 58. SMACSS: On “classitis”You’re better off adding classes to the elementsin question and repeating the class in the HTMLthan having overly-specific styles.Instead of being classitis, using multiple classesclarifies intent and increases the semantics ofelements in question.
    59. 59. SMACSS: Module candidates• Nav bars• Carousels• Dialogs• Widgets• Tables• icons
    60. 60. SMACSS: StatesState changes can be notated by class
    61. 61. SMACSS: What’s in a name?an example module:.examplea callout module:.callouta callout module with a collapsed
    62. 62. SMACSS: Words of Wisdom“Constrain, but don’t choke.Consider selector performance, but don’t wastetoo much time on it.”
    63. 63. The Brit
    64. 64. CSS For Grown Ups (audio)
    65. 65. He lived his own nightmare
    66. 66. CSS For Grown UpsDon’t style pages, style modules.Have a style module library that you can reuse.
    67. 67. CSS For Grown UpsThink of your styles as being in layers:• document – from HTML code, element selectors• base styles• module styles• layout styles
    68. 68. CSS For Grown UpsEasy determination:A tag as part of the selector = a document styleIf you create a class for it, you release it fromthe tag and make it a module style.
    69. 69. CSS For Grown Ups: Don’t…make modules variations based on IDs, basethem on classes instead#sidebar .promo-box = { ... } = { ... } = better!
    70. 70. CSS For Grown Ups: module’s name extendedwith two class prefixed with js:.js-login
    71. 71. CSS For Grown Ups: Typography.h-headline.h-subheadline.h-byline.h-promo
    72. 72. CSS For Grown Ups: Helpers“Surgical layout helpers” which are things likepaddings, margins, and gutters as separateclasses..margin-top {margin-top: 1em;}
    73. 73. Chapter 3Insights and Epiphanies
    74. 74. The Masters all speak the sametruths
    75. 75. Their teachings• Ids? Not so much.• Classes? Aww yeah!• With selectors, less is more• Get your module on• Naming conventions? !Important
    76. 76. Can be simplified to this:• Structure and Inform• Reduce• Recycle and Reuse
    77. 77. Structure and Inform
    78. 78. 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
    79. 79. Reduce
    80. 80. Reduce• Eliminate inline styles• Write the shortest chain of elements possible in selectors• Drop elements: as qualifiers and selectors• Choose classes over ids
    81. 81. Recycle & Reuse
    82. 82. Recycle & Reuse• Leverage the cascade better to cut down on redundant style declarations• Modularize page components to reuse throughout site• Extend modules through subclassing
    83. 83. They figured out the key!
    84. 84. What do you do when you build?
    85. 85. Exactly!
    86. 86. What should we call it? Hmmm…measure twice, cut once css mtco css meta coa css MetaCoax!
    87. 87. And thus, MetaCoax was born! { Measure twice: cut once; }
    88. 88. Djiejh and Djinn went to Poësia…
    89. 89. Chapter 4Ousting Selector Evil
    90. 90. Institute change in 3 phases
    91. 91. (1) Initial phase• Optimize selectors• Reduce the redundant
    92. 92. Optimize Selectors• Eliminate qualifier selectors [oocss]• Eliminate the middleman• Have the shortest chain possible [oocss, smacss]
    93. 93. Qualified selectors div# div. 1259 836
    94. 94. Eliminate qualifier selectorsSelectors likediv#widget-nav div#widget-nav-slider ul spanCould easily be simplified into#widget-nav-slider .name spanwith the exact same outcome.
    95. 95. Eliminate the middlemanIf you must use a descendent selector, theneliminate all unnecessary elements in it:.widget li awould become.widget a
    96. 96. Have the shortest chain possibleFor example, instead of#toc > LI > Ait’s better to create a class, such as.toc-anchor
    97. 97. Reduce the Redundant• Leverage the cascade by relying on inheritance [oocss]• Review, revise and reduce !important [oocss, smacss]
    98. 98. Leverage the cascade withinheritancecolorfont-familyfont-sizefont-stylefont-variantfont-weightfontline-heightlist-style-imagelist-style-positionlist-style-typelist-styletext-aligntext-indenttext-transformvisibilitywhite-spaceword-spacing
    99. 99. Not using the cascade font font-size 100 112
    100. 100. Review, revise and reduce!importantIf there are a lot of styles that are !importantthen…
    101. 101. UR DOIN’ IT WRONG
    102. 102. For example… !important 126
    103. 103. (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]
    104. 104. 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]
    105. 105. Eliminate styles that rely on qualifiershigh in the div#lowercontentdiv.children.videoitem.hover a.title {background: #bc5b29;color: #fff !important;text-decoration: none;}
    106. 106. Too high in the DOM body# 936
    107. 107. Create preliminary portable styles• Typographic classes for headings, etc.[cfgu]• Surgical layout helpers [cfgu]
    108. 108. Is surgery necessary? margin-top margin-bottom 189 112
    109. 109. Institute a Grid• Use CSS3 box-sizing• Make the grid and images fluid
    110. 110. Bad grid width margin 327 738
    111. 111. 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%;}
    112. 112. Make the grid and images fluidimg {max-width: 100%;height: auto;}
    113. 113. (3) Advanced phase• Continue modularizing page elements [ocss, smacss, cfgu]• Continue cleaning-up selectors and styles• Separate CSS files by category [smacss]
    114. 114. Chapter 5Triumph!
    115. 115. Structure
    116. 116. Inbred selectors banished
    117. 117. Ended the Specificity Wars
    118. 118. Ready for a responsive future
    119. 119. New best practices
    120. 120. Reset with Normalize.css
    121. 121. Use a better ClearfixStill using this?<div class="clear"></div>….clear { clear: both; }
    122. 122. 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; }
    123. 123. And a better DividerSeriously?<div class="divider"></div>…div.divider {border-top: 1px solid #ABAA9A;clear: both;}
    124. 124. The Ninja says<hr>
    125. 125. …And Image replacement.hide-text {text-indent: 100%;white-space: nowrap;overflow: hidden;}
    126. 126. Use an icon elementInstead of this:<li class="favorite"><span class="icon favorite"></span><span id="favorite-poem-insert-point"class="favorite"></span></li>
    127. 127. Use an icon elementDo this:<p><i class="icon icon-comment"></i>23comments</p>....icon {background-image: url( sprites.png ); }.icon-comments {background-position: 0 -30px; }
    128. 128. Share the Love
    129. 129. Just revamping the code isn’tenough…“Even the cleanest code gets ruined by the firstnon-expert to touch it.”- Nicole Sullivan,The Cascade, Grids, Headings, and Selectorsfrom an OOCSS Perspective
    130. 130. Website styleguide
    131. 131. Styleguide Creation Process1. 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.
    132. 132. Styleguide creation process4. 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.
    133. 133. So everyone can access thetreasures
    134. 134. With the knowledge of TheMasters
    135. 135. The code has been improved!
    136. 136. Srsly! Start Finish 7500 2250
    137. 137. And made Poësia…
    138. 138. (You know how I’m going to endthis)
    139. 139. Character list and Resources
    140. 140. The Marcot…is Ethan Marcotte, the creator and authorof Responsive Web Design (RWD)
    141. 141. The Dry Wind…is Jeremy Clarke, the developer of DRYCSS.
    142. 142. The Ninja…is Nicole Sullivan, the creatrice of ObjectOriented CSS (OOCSS)
    143. 143. The Lumberjack…is Jonathan Snook, the creator andauthor of Scalable and Modular CSS(SMACSS) &
    144. 144. The Brit…is Andy Hume, the creator of CSS forGrown Ups (I like to shorten this to CFGU).
    145. 145. Djinn…is Jennifer Dixon, front-end developerextraordinaire
    146. 146. Illustrations byLorenzo
    147. 147. My booksThe CSS Detective Smashing Books #3 InterAct WithGuide & Web Standards: #3 1/ My chapter: “Storytelling in Webdesign”
    148. 148. And I am…
    149. 149. Now I really mean it!
    150. 150. Thank You!