CSS Architecture with OOCSS, SMACSS, BEM

CSS Architecture jsCafe 2014-03-09 KatsunoriTanaka with OOCSS,SMACSS,BEM

OUTLINE 1. CSS Architecture 2. CSS Methodology 3. CSS Preprocessor 4. Semantics 5. Summary

1. CSS Architecture

What? CSS Architecture

https://ja.wikipedia.org/wiki/ -wikipedia

Why? CSS Architecture

CSS is simple... Its simple to understand. But CSS is not simple to use or maintain. CSS http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/ -Chris Eppstein

We have been doing it all wrong.... Our (CSS) best practices are killing us CSS http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/ -Nicole Sullivan

Three Best Practice Myths Dont add any extra elements Dont add classes Use descendent selectors exclusively http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

CODE ISTOO FRAGILE. http://www.stubbornella.org/content/2009/02/12/css-doesnt-suck-youre-just-doing-it-wrong/ -Nicole Sullivan CSS

CSS Architecture http://philipwalton.com/articles/css-architecture/

The Goals of Good CSS Architecture Predictable Reusable Maintainable Scalable http://philipwalton.com/articles/css-architecture/

CSS isn't just visual design. Don't throw out programming best practices just because you're writing CSS. Concepts like OOP, DRY, the open/closed principle, separation of concerns, etc. still apply to CSS. DRY/ CSS http://philipwalton.com/articles/css-architecture/

2. CSS Methodology

CSS Methodology OOCSS SMACSS BEM

Object Oriented CSS

OOCSS Nicole Sullivan https://github.com/stubbornella/oocss/wiki

Two Main Principles Separate Structure and Skin Separete Container and Content

abstract the structure of the block from skin which is being applied. Class can be extended by adding additional classes to the block element. Separate Structure and Skin

break the dependency between the container module and the content objects it contains. Separate Container and Content

EXMAPLE MEDIA OBJECT

Lorem Ipsum is simply dummy text of the printing and typesetting industry.

.media-shadow { box-shadow: 0 1px 5px rgba(0,0,0,0.75); } .media { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 10px; } .media-img > img { display: block; margin: 10px; } .media-body { overflow: hidden; }

media-shadow

Sub Class (descendent) Sub Class (descendent)
Base Class Sub Class (modier)

Three Best Practice Myths Dont add any extra elements Dont add classes Use descendent selectors exclusively http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

Add classes Dont use descendent selectors Two Practices OOCSS

Scalable & Modular Architecture for CSS SMACSS

SMACSS Jonathan Snook http://smacss.com

Three Main Principles Categorizing CSS Rules Naming Rules Minimizing the Depth of Applicability

Five Types of Categories 1. Base 2. Layout 3. Module 4. State 5. Theme

Base Rules http://yuilibrary.com/yui/docs/cssreset/ http://necolas.github.io/normalize.css/ ID CSS Reset Normalize CSS

Layout Rules ( Major Components) ID l-layout- .l-header .l-sidebar .l-content .l-footer http://smacss.com/book/type-layout

Module Rules ( Minor Components) reusable .media .media-image .media-image-hoge http://smacss.com/book/type-module

Sub Class (descendent) Sub Class (descendent)
Module Class Sub Class (modier)

State Rules Layout, Module JavaScript addClass, removeClass, toggleClass is- is-active is-tab-active is-hidden is-media-hidden http://smacss.com/book/type-state

State Class (modier) .media { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 10px; } .media-img > img { display: block; margin: 10px; } .media-body { overflow: hidden; } .is-hidden { display: none; }

State Class (modier)

Theme Rules theme- theme-a-background theme-a-border theme-b-background theme-b-border http://smacss.com/book/type-theme

Minimizing the Depth of Applicability http://smacss.com/book/applicability

Child Selector .media { overflow: hidden; _overflow: visible; zoom: 1; } .media-img { float: left; margin-right: 10px; } .media-img > img { display: block; margin: 10px; } .media-body { overflow: hidden; } .is-hidden { display: none; }

.media-img > img

Two core goals of SMACSS 1. HTML 2. HTML http://smacss.com/book/html5

Block Element Modier BEM

BEM Yandex http://bem.info/

BEM stands for Block Element Modier http://bem.info/method/denitions/

Block SMACSSModule Class http://bem.info/method/denitions/

Element .block__element SMACSSSub Class (descendent) http://bem.info/method/denitions/

Modier Block, Element .block_modifier .block__element_modifier SMACSSSub Class (Modier), State Rule http://bem.info/method/denitions/

Element Element
Block Modier

.media { overflow: hidden; _overflow: visible; zoom: 1; } .media__img { float: left; margin-right: 10px; } .media__img > img { display: block; margin: 10px; } .media__body { overflow: hidden; } .media_shadow { box-shadow: 0 1px 5px rgba(0,0,0,0.75); }

MindBEMDing http://csswizardry.com/2013/01/mindbemding-getting-your-head-round-bem-syntax/

MindBEMDing http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ BEM(by Nicolas Gallagher) .block__element .blockmodifier .block__elementmodifier

Element Element
Block Modier

3. CSS Preprocessor for OOCSS

CSS Preprocessor for OOCSS & Combi

CSS Architecture with OOCSS, SMACSS, BEM

simply dummy

css http

background

typesetting

body overflow

1px solid

lorem ipsum

lorem ipsum

Text of CSS Architecture with OOCSS, SMACSS, BEM

Arquitetura CSS - SMACSS + OOCS + BEM

CSS: ordenar un CSS - Ordenar un آ CSS Introducciأ³n al desarrollo web CSS: ordenar un CSS Sergio Lujأ،n

CSS Dasar #3 : Penempatan CSS

Smacss. Organizando css

MOVE.CSS: UMA BIBLIOTECA DE COMPONENTES ... BEM Block Element Modifier CSS Cascading Style Sheets DOM

CSS Versicherung CSS Versicherung CSS Versicherung Recht & Compliance Tribschenstrasse 21 Postfach 2568

OOCSS Session Barcamp Mainz 2009

Seja Bem-Vindo ao Curso CSS- Cascading Style Sheets CSS أ© a mesma coisa que Style Sheets e que Folhas

OOCSS - Object Oriented CSS

OOCSS - Versión anotada - @janogarcia

Qu'est-ce que CSS?richard- Qu'est-ce que CSS? CSS: Cascading Style Sheets CSS : comment afï¬پcher les

悩まないコーディングをしよう！ OOCSS,SMACSSを用いた、読みやすくてメンテナブルなCSS設計（Sass対応）