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.
Rock Solid
CSS Architecture
The Genesis of CSS.
In the beginning there was the <blink> tag.
And the W3C gods saw that this was bad and separated the p...
A Bit of Actual CSS History
1986 Saw the introduction of Standard Generalized Markup
Language (SGML) which included style ...
The Cascade
User-agent declarations
User normal declarations
User important declarations
Author important declarations
Aut...
How to Calculate Specificity
Selector Types
1. ID selectors (e.g., #example).
2. Class selectors (e.g., .example), attribu...
Specificity Examples <li id=”catTwo” class=”cat-li” style=”color:red”>
<article id=”myArticle” class=”my-article”>
<h1 id=...
Why We Need CSS Architecture
Rule
Sorting
Algorithm
Rule Set
This worksThis Doesn’t
The Holy Grail of CSS Architecture
Maintainability
Scalability
Testability
Reusability
Predictability
The Separation of Style from Content
When it launched in May 2003, it
contained only five designs.
In February 2005, The Z...
Object Oriented CSS, OOCCS
Nicole Sullivan - First
Introduces OOCSS at Web
Directions North in 2008
https://github.com/stu...
Separation of Structure from Skin
<div class=’widget’>
<input/>
<button>Click Me</button>
</div>
.widget{
height: 100px;
w...
Separation of Content from Container
<header>
<h2>Lorem</h2>
</header>
<footer>
<h2>Ipsum</h2>
</footer>
header h2{
width:...
Block-Element-Modifier, BEM
Introduced by Yandex, one of the largest internet
companies in Europe, operating Russia’s most...
Defining Terms
Block : A functionally independent page component that can be reused
Element : A composite part of a block ...
Some BEM Visuals
Blocks
Elements
Modifiers
A Quick BEM Example
<form class=”contact-form”>
<input type=”text” class=”contact-form_email_error” />
<textarea class=”co...
Scalable and Modular Architecture for CSS, SMACSS
An architecture based on CSS categorization.
Jonathan Snook
1. Base
2. L...
Base
Base rules are the defaults. They are almost exclusively single element selectors
but it could include attribute sele...
Layout Rules
Layout rules divide the page into sections. Layouts hold one or more modules together.
.layout-grid { … }
.la...
Modules
These are the re-usable bits like sidebars, navigation, page-footers. The bulk of your CSS
goes here.
.module-sear...
State
State classes represent changes in application state. Use state classes to show how
things look when things are coll...
Theme
Theme rules are the overrides necessary to create different themes. They mostly control
color, fonts and and other n...
Atomic CSS
Atomic CSS can be characterized as the principles of Reductio ad absurdum applied to OOCSS.
Why stop at separat...
Goodbye Stylesheets, Hello “inline”
<p class=”large-para”>
.large-para {
line-height: 2em;
font-family: sans-serif;
font-s...
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 ...
It’s All About How you Separate Your Concerns
Style Content
OOCS, Atomic
HTML
CSS
JS
BEM, SMACSS
HTML
CSS
JS
HTML
CSS
JS
H...
Who does this guy think he is?
John Need
Front End Code Monkey
Galen Healthcare
Twitter : @JohnNeed
GitHub : https://githu...
Upcoming SlideShare
Loading in …5
×

Rock Solid CSS Architecture

417 views

Published on

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.

Published in: Software
  • Be the first to comment

  • Be the first to like this

Rock Solid CSS Architecture

  1. 1. Rock Solid CSS Architecture
  2. 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. 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. 4. The Cascade User-agent declarations User normal declarations User important declarations Author important declarations Author normal declarations ! !
  5. 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. 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. 7. Why We Need CSS Architecture Rule Sorting Algorithm Rule Set This worksThis Doesn’t
  8. 8. The Holy Grail of CSS Architecture Maintainability Scalability Testability Reusability Predictability
  9. 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. 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. 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. 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. 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. 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. 15. Some BEM Visuals Blocks Elements Modifiers
  16. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×