Tired of eating CSS soup day after day? No longer want to play stylesheet Jenga whenever you try to edit main.css? You just may need a CSS architecture. This talk will review the major CSS architectures like BEM (Block Element Modifier) and SMACSS (Scalable and Modular Architecture for CSS) while discussing the pros and cons of each.

1. Rock Solid
CSS Architecture

2. The Genesis of CSS.
In the beginning there was the <blink> tag.
And the W3C gods saw that this was bad and separated the presentation from the
content.
The content they called “HTML” and the presentation they called “CSS.”
And the web developers cried “Blessed are we, for now we have separation of concerns
and our code will be forever maintainable.”
And there was great rejoicing on the Interwebs.

3. A Bit of Actual CSS History
1986 Saw the introduction of Standard Generalized Markup
Language (SGML) which included style sheets.
1992 ViolaWWW, the browser/editor developed by Tim Berners-
Lee had style sheets that were hard-coded into the program
1994 - First Proposed in 1994 by by Håkon Wium Lie
1996 - first W3C CSS Recommendation (CSS1)
1998 - CSS2 Recommendation.
2003 First Working Draft Module of CSS3 Released
Aug 2007 Basic box model
Apr 2011 Multi-column Layout
Jun 2011 Color Module Level 3
Sep 2011 Selectors Level 3
Nov 2011 Template Layout Module
Jun 2012 Media Queries
Sep 2014 Backgrounds and Borders Module Level 3
Håkon Wium Lie - CTO Opera Software

4. The Cascade
User-agent declarations
User normal declarations
User important declarations
Author important declarations
Author normal declarations
!
!

5. How to Calculate Specificity
Selector Types
1. ID selectors (e.g., #example).
2. Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-
classes (e.g., :hover)
0 , 0 , 0 , 0
1 point if
It’s Inline
1 point for
each ID
selector
1 point for
each class
selector
1 point for
each type
selector

6. Specificity Examples <li id=”catTwo” class=”cat-li” style=”color:red”>
<article id=”myArticle” class=”my-article”>
<h1 id=”myHeadline” class=”my-headline”>
Hello Kitty
</h1>
<ol>
<li id=”catOne” class=”cat”>Calico</li>
<li id=”catTwo” class=”cat cat-2”>Calico</li>
</ol>
</article>
li + li: {color: blue;}
.cat:nth-child(2){color: purple;}
#catTwo:{color: green;}
.my-article .my-headline ol .cat-2{color: green;}
#myArticle .my-headline ol .cat-2{color: yellow;}
1,0,0,0
0,0,0,2
0,0,2,0
0,1,0,0
0,0,3,1
0,1,2,1

7. Why We Need CSS Architecture
Rule
Sorting
Algorithm
Rule Set
This worksThis Doesn’t

8. The Holy Grail of CSS Architecture
Maintainability
Scalability
Testability
Reusability
Predictability

9. The Separation of Style from Content
When it launched in May 2003, it
contained only five designs.
In February 2005, The Zen of CSS
Design was published by CSS Zen
Garden creator Dave Shea and
web designer Molly Holzschlag.
The book is based on 36 designs
featured at the Zen Garden site.
CSS Zen Garden

10. Object Oriented CSS, OOCCS
Nicole Sullivan - First
Introduces OOCSS at Web
Directions North in 2008
https://github.com/stubbornella/oocss/wiki
Nicole Sullivan, contributor to many open source
project such as CSS-Lint, currently an
Engineering Manager at npm, Inc.

11. Separation of Structure from Skin
<div class=’widget’>
<input/>
<button>Click Me</button>
</div>
.widget{
height: 100px;
width: 100px;
border: solid 1px blue;
background-color: yellow;
}
input{
width: 90px;
border: solid 1px blue;
background-color: yellow;
}
button{
width: 30px;
border: solid 1px blue;
background-color: yellow;
}
.widget{
height: 100px;
width: 100px;
}
input{
width: 90px;
}
button{
width: 30px;
}
.skin {
border: solid 1px blue;
background-color: yellow;
}
<div class=’widget skin’>
<input class=’skin’/>
<button class=’skin’>Click Me</button>
</div>
Before
After

12. Separation of Content from Container
<header>
<h2>Lorem</h2>
</header>
<footer>
<h2>Ipsum</h2>
</footer>
header h2{
width: 200px;
height: 260px;
padding: 20px;
color: blue;
}
footer h2{
width: 200px;
height: 260px;
padding: 30px;
color: red;
}
.global-size{
width: 200px;
height: 260px;
}
.header-h2{
padding: 20px;
color: blue;
}
footer-h2{
padding: 30px;
color: red;
}
<header>
<h2 class=”header-h2 global-size”>Lorem</h2>
</header>
<footer>
<h2 class=”footer-h2 global-size”>Ipsum</h2>
</footer>
Before
After

13. Block-Element-Modifier, BEM
Introduced by Yandex, one of the largest internet
companies in Europe, operating Russia’s most popular
search engine.
BEM is a class naming convention that forces you to organize
your CSS into reusable chunks of single-responsibility.
BEM uses only class selectors for styling on id’s or tag names.
Class names have up to three parts separated by underscores.
block-name_element-name_modifier-name

14. Defining Terms
Block : A functionally independent page component that can be reused
Element : A composite part of a block that can't be used separately from it.
Modifier : An entity that defines the appearance, state, or behavior of a block or element.
Blocks can be nested inside of other blocks
Blocks do not control their positions. No padding, margin, or position styles
Blocks have semantic class names. i.e. “contact-form”
Elements are nested inside of blocks.
Elements have semantic class names that are composites of their block
class name. i.e. “contact-form_submit-button
Blocks can be nested inside of other blocks
Blocks do not control their positions. No padding, margin, or position styles
Modifier class name describe their appearance. i.e. “contact-form_submit-button-
error”

15. Some BEM Visuals
Blocks
Elements
Modifiers

16. A Quick BEM Example
<form class=”contact-form”>
<input type=”text” class=”contact-form_email_error” />
<textarea class=”contact-form_message”></textarea>
<input type=”submit”
class=”contact-form_submit”
value=”submit”/>
</form>
.contact-form {
border: solid 1px blue;
background: white;
Width: 20em;
}
.contact-form_email {
width: 90%;
margin: 1em auto;
border: solid 1px grey;
}
.contact-form_email_error {
width: 90%;
margin: 1em auto;
border: solid 1px red;
}
.contact-form_submit {
width: 90%;
margin: 1em auto;
border: solid 1px grey;
}
BLOCK
ELEMENTS
MODIFIER

17. Scalable and Modular Architecture for CSS, SMACSS
An architecture based on CSS categorization.
Jonathan Snook
1. Base
2. Layout
3. Module
4. State
5. Theme

18. Base
Base rules are the defaults. They are almost exclusively single element selectors
but it could include attribute selectors, pseudo-class selectors, child selectors or
sibling selectors. Essentially, a base style says that wherever this element is on
the page, it should look like this.
h1 { font-size: 2em;}
p { color: grey;
line-height: 1.6em;
font-family: helvetica, sans-serif;
}
input[type=”text”]{ border: solid 1px blue;}
…
Base rules are styled
using type selectors so
they have low specificity.

19. Layout Rules
Layout rules divide the page into sections. Layouts hold one or more modules together.
.layout-grid { … }
.layout-grid .row{ … }
.layout-grid .cell { … }
Style layout rules with classes
that start with “layout-” and
then the name of the layout.

20. Modules
These are the re-usable bits like sidebars, navigation, page-footers. The bulk of your CSS
goes here.
.module-search-widget{ … }
.module-search-widget button{ … }
.module-search-widget .search-field{ … }
Prefix your module class
names with “module-”
and the module name.

21. State
State classes represent changes in application state. Use state classes to show how
things look when things are collapsed, in an error state, or expanded.
.is-error{ color: red;}
.is-error input {border-color: red;}
State classes start with
the prefix “is-”

22. Theme
Theme rules are the overrides necessary to create different themes. They mostly control
color, fonts and and other non-layout rules. This part is optional if you don’t need themes.
/* in module-name.css */
.mod {
border: 1px solid;
}
/* in blue-theme.css */
.mod {
border-color: blue;
}

23. Atomic CSS
Atomic CSS can be characterized as the principles of Reductio ad absurdum applied to OOCSS.
Why stop at separating structure from skin? Let’s keep on seperating until every class has only one
property. That’s ACSS.
CSS is a plague of locus sent by Håkon Wium Lie to destroy
all that holy with web development.
If you agree with this statement then Atomic CSS is for you.

24. Goodbye Stylesheets, Hello “inline”
<p class=”large-para”>
.large-para {
line-height: 2em;
font-family: sans-serif;
font-size: 1.6em;
}
<p class=”ls-2 ff-sans fs-16”>
.lh-2 {line-height: 2em;}
.ff-sans {font-family: sans-serif;}
.fs-16{ font-size: 1.6em;}

25. Atomizer
<div class="foo Bd C(#0280ae) Ta(c)">
<p class="Op(0) foo:h>Op(1)">Lorem ipsum</p>
</div>
Atomizer is a tool for creating Atomic CSS. Generate an Atomic stylesheet dynamically from the
Atomic classes you're actually using in your project (no unused styles!), or predeclare styles in
configuration.

26. It’s All About How you Separate Your Concerns
Style Content
OOCS, Atomic
HTML
CSS
JS
BEM, SMACSS
HTML
CSS
JS
HTML
CSS
JS
HTML
CSS
JS

27. Who does this guy think he is?
John Need
Front End Code Monkey
Galen Healthcare
Twitter : @JohnNeed
GitHub : https://github.com/johnneed
CodePen : http://codepen.io/johnneed/
Linked In : https://www.linkedin.com/in/johnneed
Read about the origins of the <blink> tag here
www.montulli.org/theoriginofthe<blink>tag