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.

1. Scalable and Modular CSS
FTW!
The Legend of the Birth of MetaCoax
/ * Denise R. Jacobs
Future. Innovation. Technology. Creativity.
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
MetaCoax
chapter 1
Problems in Poësia
chapter 2
The Teachings of the Masters
chapter 3
Insights and Epiphanies
chapter 4
Ousting Selector Evil
chapter 5
Triumph!

6. Chapter 1
Problems in Poësia

7. You know how all stories start…

8. There was a Kingdom called
Poësia
http://www.flickr.com/photos/drobnikm/525835032/

9. Emperor Eric

10. On the surface, all was fine…
http://www.flickr.com/photos/trodel/3801987960/

11. Behind the city’s walls…
http://www.flickr.com/photos/kathrynvjones/3737219448/

12. It was a nightmare of dis-
organization
http://www.flickr.com/photos/torley/4096277982/

13. Top architects and designers
http://www.flickr.com/photos/massgovernor/7345462040/

14. Who hired builders
http://www.flickr.com/photos/8533266@N04/4457182603/

15. Some believed in mastery…
http://www.flickr.com/photos/statuelibrtynps/6276757947/

16. Others were not
http://www.flickr.com/photos/anotherjesse/243020629/

17. Put together with whatever was handy
http://www.flickr.com/photos/laughingsquid/142398084

18. Shabby new structures
http://www.flickr.com/photos/cbnsp/6605969807/

19. They didn’t start off evil
http://www.flickr.com/photos/dr_john2005/3934871670/

20. …but they slowly became so over
time
http://www.flickr.com/photos/dr_john2005/3935163348/

21. Follow suit and try to fit in

22. Fight by trying to become
!important
http://www.flickr.com/photos/stuckincustoms/6199442617/

23. He sent out his two most trusted
aides…
http://www.flickr.com/photos/bbsc30/168832715/

24. They traveled far and wide…
http://www.flickr.com/photos/annegirl/435308460/

25. And found the prophet Marcot
http://www.flickr.com/photos/axsdeny/2607122395/

26. The gospel of Responsive

27. He spoke of a championne
http://www.flickr.com/photos/44085287@N05/4055807492/

28. They traveled south to Mijami…
Photo: Denise Jacobs

29. To find Djieh and Djinn!

30. Chapter 2
The Teachings of the Masters

31. They went deep into the canyons
http://www.flickr.com/photos/gods-art/6622668251/

32. The Dry Wind appeared to them
http://www.flickr.com/photos/gods-art/6622669139/

33. DRY CSS
http://www.slideshare.net/jeremyclarke/dry-css-
a-dontrepeatyourself-methodology-for-creating-
efficient-unified-and-scalable-stylesheets

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 a
selector, 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
than defining them separately.
While the groups have many selectors, each
property/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;
}

40. The Ninja
http://www.flickr.com/photos/branditressler/2912153888/

41. OOCSS
Object Oriented CSS
https://github.com/stubbornella/oocss/wiki

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
http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

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
http://www.flickr.com/photos/stikeymo/308546507/

53. SMACSS
Scalable and Modular Architecture for CSS
https://smacss.com/

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-footer div#col2.column
div.bestRight p.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
in question and repeating the class in the HTML
than having overly-specific styles.
Instead of being classitis, using multiple classes
clarifies intent and increases the semantics of
elements 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:
.callout.is-collapsed

63. SMACSS: Words of Wisdom
“Constrain, but don’t choke.
Consider selector performance, but don’t waste
too much time on it.”

64. The Brit
http://www.flickr.com/photos/31363949@N02/6958447097/

65. CSS For Grown Ups
https://speakerdeck.com/u/andyhume/p/css-for-
grown-ups-maturing-best-practises
http://schedule.sxsw.com/2012/events/event_IA
P9410 (audio)

66. He lived his own nightmare
http://www.flickr.com/photos/djrue/4835062638/

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 tag and make it a module style.

70. CSS For Grown Ups: Don’t
…make modules variations based on IDs, base
them on 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
with two 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 like
paddings, margins, and gutters as separate
classes.
.margin-top {margin-top: 1em;}

74. Chapter 3
Insights and Epiphanies

75. The Masters all speak the same
truths
http://www.flickr.com/photos/s4xton/2425718415/

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
http://www.flickr.com/photos/trvance/3138749670/

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

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
http://www.flickr.com/photos/epsos/5575089139/

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!
http://www.flickr.com/photos/karent/3673326282/

85. What do you do when you build?
http://www.flickr.com/photos/mdave/2878687949/

86. Exactly!
http://www.flickr.com/photos/chriscoyier/5269340772/

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…
http://www.flickr.com/photos/trodel/3801987960/

90. Chapter 4
Ousting Selector Evil

91. Institute change in 3 phases
.flickr.com/photos/boklm/486646798/

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
div.name 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
eliminate all 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
high in the DOM
body.video div#lowercontent
div.children.videoitem.hover a.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 5
Triumph!

116. Structure
http://www.flickr.com/photos/joebehr/6349047969/

117. Inbred selectors banished
http://i31.photobucket.com/albums/c351/Rasey07/twins.jpg

118. Ended the Specificity Wars

119. Ready for a responsive future
http://www.flickr.com/photos/digitalfrance/98314057/

120. New best practices
http://www.flickr.com/photos/torley/2761300969/

121. Reset with Normalize.css
http://necolas.github.com/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>23
comments</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 an OOCSS Perspective

131. Website styleguide
http://www.flickr.com/photos/littlemad/5729783584/

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
http://www.flickr.com/photos/lecercle/514344657/

135. With the knowledge of The
Masters

136. The code has been improved!
http://www.flickr.com/photos/clspeace/2143292403/

137. Srsly!
Start Finish
7500 2250

138. And made Poësia…
http://www.flickr.com/photos/drobnikm/525835032/

139. (You know how I’m going to end
this)
http://www.flickr.com/photos/sonialuna/2942020058/

140. Character list and Resources

141. The Marcot
…is Ethan Marcotte, the creator and author
of Responsive Web Design (RWD)
http://ethanmarcotte.com/
twitter.com/beep
http://www.flickr.com/photos/localcelebrity/7907876246/

142. The Dry Wind
…is Jeremy Clarke, the developer of DRY
CSS.
http://simianuprising.com/
twitter.com/jeremyclarke

143. The Ninja
…is Nicole Sullivan, the creatrice of Object
Oriented CSS (OOCSS)
http://www.stubbornella.org/
twitter.com/stubbornella
http://www.flickr.com/photos/localcelebrity/6025912453/

144. The Lumberjack
…is Jonathan Snook, the creator and
author of Scalable and Modular CSS
(SMACSS)
http://snook.ca/ & http://smacss.com
twitter.com/snookca
http://www.flickr.com/photos/splat/3742596419/

145. The Brit
…is Andy Hume, the creator of CSS for
Grown Ups (I like to shorten this to CFGU).
http://andyhume.net
twitter.com/
http://www.flickr.com/photos/angryamoeba/4674320039/

146. Djinn
…is Jennifer Dixon, front-end developer
extraordinaire
http://jdcoding.com
twitter.com/jenniration

147. Illustrations by
Lorenzo Grandi
LorenzoGrandi.it

148. My books
The CSS Detective Smashing Books #3 InterAct With
Guide & Web Standards:
#3 1/3
CSSDetectiveGuide.co InterActWithWebStandards.co
m m
twitter.com/cssdetective SmashingBook.com twitter.com/waspinteract
My chapter:
“Storytelling in Webdesign”

149. And I am…
DeniseJacobs.com
denise@denisejacobs.com
twitter.com/denisejacobs

150. Now I really mean it!

151. Thank You!
http://www.flickr.com/photos/theredproject/3302110152/