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.

Scalable and Modular CSS FTW!

3,184 views

Published on

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

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

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 http://www.flickr.com/photos/drobnikm/525835032/
  9. 9. Emperor Eric
  10. 10. On the surface, all was fine… http://www.flickr.com/photos/trodel/3801987960/
  11. 11. Behind the city’s walls… http://www.flickr.com/photos/kathrynvjones/3737219448/
  12. 12. It was a nightmare of dis-organization http://www.flickr.com/photos/torley/4096277982/
  13. 13. Top architects and designers http://www.flickr.com/photos/massgovernor/7345462040/
  14. 14. Who hired builders http://www.flickr.com/photos/8533266@N04/4457182603/
  15. 15. Some believed in mastery… http://www.flickr.com/photos/statuelibrtynps/6276757947/
  16. 16. Others were not http://www.flickr.com/photos/anotherjesse/243020629/
  17. 17. Put together with whatever was handy http://www.flickr.com/photos/laughingsquid/142398084
  18. 18. Shabby new structures http://www.flickr.com/photos/cbnsp/6605969807/
  19. 19. They didn’t start off evil http://www.flickr.com/photos/dr_john2005/3934871670/
  20. 20. …but they slowly became so overtime http://www.flickr.com/photos/dr_john2005/3935163348/
  21. 21. Follow suit and try to fit in
  22. 22. Fight by trying to become!important http://www.flickr.com/photos/stuckincustoms/6199442617/
  23. 23. He sent out his two most trustedaides… http://www.flickr.com/photos/bbsc30/168832715/
  24. 24. They traveled far and wide… http://www.flickr.com/photos/annegirl/435308460/
  25. 25. And found the prophet Marcot http://www.flickr.com/photos/axsdeny/2607122395/
  26. 26. The gospel of Responsive
  27. 27. He spoke of a championne http://www.flickr.com/photos/44085287@N05/4055807492/
  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 http://www.flickr.com/photos/gods-art/6622668251/
  32. 32. The Dry Wind appeared to them http://www.flickr.com/photos/gods-art/6622669139/
  33. 33. DRY CSShttp://www.slideshare.net/jeremyclarke/dry-css-a-dontrepeatyourself-methodology-for-creating-efficient-unified-and-scalable-stylesheets
  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 http://www.flickr.com/photos/branditressler/2912153888/
  40. 40. OOCSSObject Oriented CSShttps://github.com/stubbornella/oocss/wiki
  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 http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/
  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 http://www.flickr.com/photos/stikeymo/308546507/
  52. 52. SMACSSScalable and Modular Architecture for CSShttps://smacss.com/
  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 nameslike.is-active.is-collapsed.btn-pressed
  61. 61. SMACSS: What’s in a name?an example module:.examplea callout module:.callouta callout module with a collapsed state:.callout.is-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 http://www.flickr.com/photos/31363949@N02/6958447097/
  64. 64. CSS For Grown Upshttps://speakerdeck.com/u/andyhume/p/css-for-grown-ups-maturing-best-practiseshttp://schedule.sxsw.com/2012/events/event_IAP9410 (audio)
  65. 65. He lived his own nightmare http://www.flickr.com/photos/djrue/4835062638/
  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 = bad.promo-box { ... } = okay.promo-box-light { ... } = better!
  70. 70. CSS For Grown Ups: Modules.promo-boxRelated/sub-styles: module’s name extendedwith two dashes.promo-box--ecojavascript 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 http://www.flickr.com/photos/s4xton/2425718415/
  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 http://www.flickr.com/photos/trvance/3138749670/
  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 http://www.flickr.com/photos/epsos/5575089139/
  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! http://www.flickr.com/photos/karent/3673326282/
  84. 84. What do you do when you build? http://www.flickr.com/photos/mdave/2878687949/
  85. 85. Exactly! http://www.flickr.com/photos/chriscoyier/5269340772/
  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… http://www.flickr.com/photos/trodel/3801987960/
  89. 89. Chapter 4Ousting Selector Evil
  90. 90. Institute change in 3 phases .flickr.com/photos/boklm/486646798/
  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 lidiv.name 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 DOMbody.video 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 http://www.flickr.com/photos/joebehr/6349047969/
  116. 116. Inbred selectors banished http://i31.photobucket.com/albums/c351/Rasey07/twins.jpg
  117. 117. Ended the Specificity Wars
  118. 118. Ready for a responsive future http://www.flickr.com/photos/digitalfrance/98314057/
  119. 119. New best practices http://www.flickr.com/photos/torley/2761300969/
  120. 120. Reset with Normalize.css http://necolas.github.com/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 http://www.flickr.com/photos/littlemad/5729783584/
  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 http://www.flickr.com/photos/lecercle/514344657/
  134. 134. With the knowledge of TheMasters
  135. 135. The code has been improved! http://www.flickr.com/photos/clspeace/2143292403/
  136. 136. Srsly! Start Finish 7500 2250
  137. 137. And made Poësia… http://www.flickr.com/photos/drobnikm/525835032/
  138. 138. (You know how I’m going to endthis) http://www.flickr.com/photos/sonialuna/2942020058/
  139. 139. Character list and Resources
  140. 140. The Marcot…is Ethan Marcotte, the creator and authorof Responsive Web Design (RWD)http://ethanmarcotte.com/twitter.com/beep http://www.flickr.com/photos/localcelebrity/7907876246/
  141. 141. The Dry Wind…is Jeremy Clarke, the developer of DRYCSS.http://simianuprising.com/twitter.com/jeremyclarke
  142. 142. The Ninja…is Nicole Sullivan, the creatrice of ObjectOriented CSS (OOCSS)http://www.stubbornella.org/twitter.com/stubbornella http://www.flickr.com/photos/localcelebrity/6025912453/
  143. 143. The Lumberjack…is Jonathan Snook, the creator andauthor of Scalable and Modular CSS(SMACSS)http://snook.ca/ & http://smacss.comtwitter.com/snookca http://www.flickr.com/photos/splat/3742596419/
  144. 144. The Brit…is Andy Hume, the creator of CSS forGrown Ups (I like to shorten this to CFGU).http://andyhume.nettwitter.com/ http://www.flickr.com/photos/angryamoeba/4674320039/
  145. 145. Djinn…is Jennifer Dixon, front-end developerextraordinairehttp://jdcoding.comtwitter.com/jenniration
  146. 146. Illustrations byLorenzo GrandiLorenzoGrandi.it
  147. 147. My booksThe CSS Detective Smashing Books #3 InterAct WithGuide & Web Standards: #3 1/3CSSDetectiveGuide.co InterActWithWebStandards.com mtwitter.com/cssdetective SmashingBook.com twitter.com/waspinteract My chapter: “Storytelling in Webdesign”
  148. 148. And I am…DeniseJacobs.comdenise@denisejacobs.comtwitter.com/denisejacobs
  149. 149. Now I really mean it!
  150. 150. Thank You! http://www.flickr.com/photos/theredproject/3302110152/

×