Scalable and Modular CSS FTW!

Scalable and Modular CSS
FTW!
The Legend of the Birth of MetaCoax

/ * Denise R. Jacobs
Future. Innovation. Technology. Creativity.
Amsterdam, Netherlands
18 February 2013 */

Tweeting tall tales
I am:
@denisejacobs

This fine event is:
@fitc #FITCAms

And I’m telling the tale of:
#metacoax

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!

You know how all stories start…

There was a Kingdom called
Poësia

http://www.flickr.com/photos/drobnikm/525835032/

On the surface, all was fine…

http://www.flickr.com/photos/trodel/3801987960/

Behind the city’s walls…

http://www.flickr.com/photos/kathrynvjones/3737219448/

It was a nightmare of dis-
organization

http://www.flickr.com/photos/torley/4096277982/

Top architects and designers

http://www.flickr.com/photos/massgovernor/7345462040/

Who hired builders

http://www.flickr.com/photos/8533266@N04/4457182603/

Some believed in mastery…

http://www.flickr.com/photos/statuelibrtynps/6276757947/

Others were not

http://www.flickr.com/photos/anotherjesse/243020629/

Put together with whatever was handy

http://www.flickr.com/photos/laughingsquid/142398084

Shabby new structures

http://www.flickr.com/photos/cbnsp/6605969807/

They didn’t start off evil

http://www.flickr.com/photos/dr_john2005/3934871670/

…but they slowly became so over
time

http://www.flickr.com/photos/dr_john2005/3935163348/

Fight by trying to become
!important

http://www.flickr.com/photos/stuckincustoms/6199442617/

He sent out his two most trusted
aides…

http://www.flickr.com/photos/bbsc30/168832715/

They traveled far and wide…

http://www.flickr.com/photos/annegirl/435308460/

And found the prophet Marcot

http://www.flickr.com/photos/axsdeny/2607122395/

He spoke of a championne


They traveled south to Mijami…

Photo: Denise Jacobs

Chapter 2
The Teachings of the Masters

They went deep into the canyons

http://www.flickr.com/photos/gods-art/6622668251/

The Dry Wind appeared to them

http://www.flickr.com/photos/gods-art/6622669139/

DRY CSS

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

DRY CSS

“Don’t Repeat Yourself”

Never repeat a style/property deﬁnition…ever.

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.

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.

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

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;
}

The Ninja

http://www.flickr.com/photos/branditressler/2912153888/

OOCSS

Object Oriented CSS

https://github.com/stubbornella/oocss/wiki

Outcome

CSS bytes/page HTML bytes/page

19% 44%
decrease decrease

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

OOCSS: The Gist
• Employ DRY

• Separate structure and presentation

• Modularize

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

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

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

OOCSS: The Media Module

http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/

<div class="media">
<img class="fixedMedia" src="myImg.png" />
<div class="text">
...
</div>
</div>


/* ====== 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;}

The Lumberjack

http://www.flickr.com/photos/stikeymo/308546507/

SMACSS

Scalable and Modular Architecture for CSS

https://smacss.com/

SMACSS: Style categories

• Base
• Layout
• Module
• State
• Theme

SMACSS: Curb your enthusiasm

Selectors should be “shallow” instead of “deep”

Strive for the shallowest possible.

SMACSS: Deep selector

div#childrens-footer div#col2.column
div.bestRight p.bestTitle

SMACSS: Shallow selector

p.bestTitle

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

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.

SMACSS: Module candidates

• Nav bars
• Carousels
• Dialogs
• Widgets
• Tables
• icons

SMACSS: States

State changes can be notated by class names
like

.is-active
.is-collapsed
.btn-pressed

SMACSS: What’s in a name?
an example module:
.example

a callout module:
.callout

a callout module with a collapsed state:
.callout.is-collapsed

SMACSS: Words of Wisdom

“Constrain, but don’t choke.

Consider selector performance, but don’t waste
too much time on it.”

The Brit


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)

He lived his own nightmare

http://www.flickr.com/photos/djrue/4835062638/

CSS For Grown Ups

Don’t style pages, style modules.

Have a style module library that you can reuse.

CSS For Grown Ups

Think of your styles as being in layers:
• document – from HTML code, element
selectors
• base styles
• module styles
• layout styles

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.

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!

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

CSS For Grown Ups: Typography

.h-headline
.h-subheadline
.h-byline
.h-promo

CSS For Grown Ups: Helpers

“Surgical layout helpers” which are things like
paddings, margins, and gutters as separate
classes.

.margin-top {margin-top: 1em;}

Chapter 3
Insights and Epiphanies

The Masters all speak the same
truths

http://www.flickr.com/photos/s4xton/2425718415/

Their teachings
• Ids? Not so much.

• Classes? Aww yeah!

• With selectors, less is more

• Get your module on

• Naming conventions? !Important

Can be simplified to this:

• Structure and Inform

• Reduce

• Recycle and Reuse

Structure and Inform

http://www.flickr.com/photos/trvance/3138749670/

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

Reduce

• Eliminate inline styles

• Write the shortest chain of elements possible
in selectors

• Drop elements: as qualifiers and selectors

• Choose classes over ids

Recycle & Reuse

http://www.flickr.com/photos/epsos/5575089139/

Recycle & Reuse

• Leverage the cascade better to cut down on
redundant style declarations

• Modularize page components to reuse
throughout site

• Extend modules through subclassing

They figured out the key!

http://www.flickr.com/photos/karent/3673326282/

What do you do when you build?

http://www.flickr.com/photos/mdave/2878687949/

Exactly!

http://www.flickr.com/photos/chriscoyier/5269340772/

What should we call it? Hmmm…

measure twice, cut once css 

mtco css 

meta coa css 

MetaCoax!

And thus, MetaCoax was born!

{ Measure twice: cut once; }

Djiejh and Djinn went to Poësia…

http://www.flickr.com/photos/trodel/3801987960/

Chapter 4
Ousting Selector Evil

Institute change in 3 phases

.flickr.com/photos/boklm/486646798/

(1) Initial phase

• Optimize selectors

• Reduce the redundant

Optimize Selectors

• Eliminate qualifier selectors [oocss]

• Eliminate the middleman

• Have the shortest chain possible
[oocss, smacss]

Qualified selectors

div# div.

1259 836

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.

Eliminate the middleman

If you must use a descendent selector, then
eliminate all unnecessary elements in it:
.widget li a

would become
.widget a

Have the shortest chain possible

For example, instead of
#toc > LI > A

it’s better to create a class, such as
.toc-anchor

Reduce the Redundant

• Leverage the cascade by relying on
inheritance [oocss]

• Review, revise and reduce !important
[oocss, smacss]

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

Not using the cascade

font font-size

100 112

Review, revise and reduce
!important

If there are a lot of styles that are !important
then…

For example…

!important

126

(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]

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]

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;
}

Too high in the DOM

body#

936

Create preliminary portable styles

• Typographic classes for headings, etc.[cfgu]

• Surgical layout helpers [cfgu]

Is surgery necessary?

margin-top margin-bottom

189 112

Institute a Grid

• Use CSS3 box-sizing

• Make the grid and images fluid

Bad grid

width margin

327 738

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-6 {width:16.6%; *width:15.6%;}

Make the grid and images fluid

img {
max-width: 100%;
height: auto;
}

(3) Advanced phase

• Continue modularizing page elements
[ocss, smacss, cfgu]

• Continue cleaning-up selectors and styles

• Separate CSS files by category [smacss]

Structure

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

Inbred selectors banished

http://i31.photobucket.com/albums/c351/Rasey07/twins.jpg

Ready for a responsive future

http://www.flickr.com/photos/digitalfrance/98314057/

New best practices

http://www.flickr.com/photos/torley/2761300969/

Reset with Normalize.css

http://necolas.github.com/normalize.css/

Use a better Clearfix

Still using this?

<div class="clear"></div>
…
.clear { clear: both; }

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; }

And a better Divider
Seriously?

<div class="divider"></div>
…
div.divider {
border-top: 1px solid #ABAA9A;
clear: both;
}

…And Image replacement

.hide-text {
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
}

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>

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; }

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

Website styleguide

http://www.flickr.com/photos/littlemad/5729783584/

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.

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.

So everyone can access the
treasures

http://www.flickr.com/photos/lecercle/514344657/

With the knowledge of The
Masters

The code has been improved!

http://www.flickr.com/photos/clspeace/2143292403/

Srsly!

Start Finish

7500 2250

And made Poësia…

http://www.flickr.com/photos/drobnikm/525835032/

(You know how I’m going to end
this)

http://www.flickr.com/photos/sonialuna/2942020058/

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/

The Dry Wind

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

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/

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/

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/

Djinn

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

Illustrations by

Lorenzo Grandi
LorenzoGrandi.it

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”

And I am…

DeniseJacobs.com
denise@denisejacobs.com
twitter.com/denisejacobs

Thank You!

http://www.flickr.com/photos/theredproject/3302110152/

Scalable and Modular CSS FTW!

More Related Content

What's hot

Viewers also liked

Similar to Scalable and Modular CSS FTW!

More from FITC

Scalable and Modular CSS FTW!

Editor's Notes