Home > Software > Rock Solid CSS Architecture

Rock Solid CSS Architecture

Date post: 13-Apr-2017
Author: john-need
View: 278 times
Download: 0 times
Share this document with a friend
Embed Size (px)
of 27 /27
Rock Solid CSS Architecture

Rock Solid CSS Architecture

The Genesis of CSS.In the beginning there was the 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 program1994 - First Proposed in 1994 by by Hkon Wium Lie1996 - first W3C CSS Recommendation (CSS1)1998 - CSS2 Recommendation.2003 First Working Draft Module of CSS3 ReleasedAug 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

Hkon Wium Lie - CTO Opera Software

Jhkgkhgjkhgkhgkh jghkjghkj jhjhgjkhg

The CascadeUser-agent declarationsUser normal declarations

User important declarations

Author important declarationsAuthor normal declarations


How to Calculate SpecificitySelector TypesID selectors (e.g., #example).Class selectors (e.g., .example), attributes selectors (e.g., [type="radio"]) and pseudo-classes (e.g., :hover)Type selectors (e.g., h1) and pseudo-elements (e.g., :before).

0,0,0,01 point if Its Inline1 point for each ID selector1 point for each class selector 1 point for each type selector

Specificity Examples

Hello Kitty

  1. Calico
  2. Calico

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,00,0,0,20,0,2,00,1,0,00,0,3,10,1,2,1

Why We Need CSS Architecture

Rule Sorting Algorithm

Rule Set

This works

This Doesnt

The Holy Grail of CSS ArchitectureMaintainabilityScalabilityTestabilityReusabilityPredictabilitySimplicity

The Separation of Style from ContentWhen 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/wikiNicole Sullivan, contributor to many open source project such as CSS-Lint, currently an Engineering Manager at npm, Inc.

Separation of Structure from Skin

Click Me

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

Click Me


Separation of Content from Container



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





Block-Element-Modifier, BEM

Introduced by Yandex, one of the largest internet companies in Europe, operating Russias 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 ids 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 reusedElement : 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



A Quick BEM Example

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

Scalable and Modular Architecture for CSS, SMACSS

An architecture based on CSS categorization.

Jonathan SnookBaseLayoutModuleStateTheme

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

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

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

ThemeTheme 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 dont need themes./* in module-name.css */.mod { border: 1px solid;}

/* in blue-theme.css */.mod { border-color: blue;}

Atomic CSSAtomic CSS can be characterized as the principles of Reductio ad absurdum applied to OOCSS.

Why stop at separating structure from skin? Lets keep on seperating until every class has only one property. Thats ACSS.

CSS is a plague of locus sent by Hkon 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

.large-para { line-height: 2em; font-family: sans-serif; font-size: 1.6em;}

.lh-2 {line-height: 2em;}.ff-sans {font-family: sans-serif;}.fs-16{ font-size: 1.6em;}


Lorem ipsum

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.

Its All About How you Separate Your Concerns

StyleContentOOCS, Atomic


Who does this guy think he is?John NeedFront End Code MonkeyGalen HealthcareTwitter : @JohnNeedGitHub : https://github.com/johnneedCodePen : http://codepen.io/johnneed/Linked In : https://www.linkedin.com/in/johnneedRead about the origins of the tag here