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
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
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!
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
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!
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.
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_IAP9410 (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;}!
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
81. Reduce
• Eliminate inline styles
• Write the shortest chain of elements possible in
selectors
• Drop elements: as qualifiers and selectors
• Choose classes over ids
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/
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]
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; !
}!
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:
pi class=icon icon-comment/i23
comments/p!
...!
.icon {background-image:
url( sprites.png ); }!
!
.icon-comments {background-position: 0
-30px; } !
129. Share the Love
http://www.flickr.com/photos/meggers/2378288736/
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
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/
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
148. My books
The CSS Detective Smashing Books #3 InterAct With
Guide
#3 1/3
Web Standards:
CSSDetectiveGuide.com SmashingBook.com
InterActWithWebStandards.com
twitter.com/cssdetective
twitter.com/waspinteract
My chapter:
“Storytelling in Webdesign”