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 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.

A Bit of Actual CSS History1986 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

The Cascade User-agent declarations

User normal declarations

User important declarations

Author important declarations

Author normal declarations

!!

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)

3. Type selectors (e.g., h1) and pseudo-elements (e.g., :before).

0 , 0 , 0 , 01 point if It’s Inline

1 point for each ID selector

1 point for each class selector

1 point for each type selector

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

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

Simplicity

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

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.

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>B

efor

e

Afte

r

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>

Bef

ore

Afte

r

Block-Element-Modifier, BEMIntroduced 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

Defining TermsBlock : 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 blocksBlocks do not control their positions. No padding, margin, or position stylesBlocks 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 blocksBlocks do not control their positions. No padding, margin, or position stylesModifier class name describe their appearance. i.e. “contact-form_submit-button-error”

Some BEM Visuals

Blocks

Elements

Modifiers

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

Scalable and Modular Architecture for CSS, SMACSSAn architecture based on CSS categorization.

Jonathan Snook

1. Base

2. Layout

3. Module

4. State

5. Theme

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.

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.

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.

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-”

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

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.

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

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.

It’s All About How you Separate Your Concerns

Style Content

OOCS, Atomic

HTMLCSSJS

BEM, SMACSS

HTMLCSSJS

HTMLCSSJS

HTMLCSSJS

Who does this guy think he is?John NeedFront End Code MonkeyGalen 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