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 & Combinator (LESS & SASS3.3~) Placeholder Selector (SASS) Combine multiples les

3.3~ // btn component .btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; &--red { background-color: red; } &--blue { background-color: blue; } }

.btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } .btn--red { background-color: red; } .btn--blue { background-color: blue; }

Single Class OOSCSS

Multiple Classes Multiple Classes

Single Classes Single Class

%btn { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } %btn--red { background-color: red; } %btn--blue { background-color: blue; } .fire { @extend %btn; @extend %btn--red; } .stop { @extend %btn; @extend %btn--blue; }

.fire, .stop { border: 1px solid #000; padding: 10px 20px; color: #000; border-radius: 8px; } .fire { background-color: red; } .stop { background-color: blue; }

Placeholder Selector Clean markup - single class Semantic class naming Avoid using too much @extend

4. Semantics

About HTML semantics and front-end architecture http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

... not all semantics need to be content- derived http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

Content-layer semantics are already served by HTML elements and other attributes. HTML http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

Class names impart little or no useful semantic information to machines or human visitors... http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

The primary purpose of a class name is to be a hook for CSS and JavaScript. CSSJavaScript http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

Class names should communicate useful information to developers. http://nicolasgallagher.com/about-html-semantics-front-end-architecture/

A exible and reusable component is one which neither relies on existing within a certain part of the DOM tree, nor requires the use of specic element types. http://nicolasgallagher.com/about-html-semantics-front-end-architecture/ DOM

CSS Class Naming Convention Semantic ? presentational / behavioural ?

5. Summary

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

Do you need a CSS Architecture & Methodology like OOCSS ? How many developers ? Reuse ? Maintainance ? Scale ? http://philipwalton.com/articles/css-architecture/

Bootstrap http://getbootstrap.com/

Topcoat http://topcoat.io/

Thank you so much jsCafe 2014-03-09 KatsunoriTanaka

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

Dreamweaver MX 2004 CSS CSS - 碁峰資訊 · PDF file Dreamweaver MX 2004 CSS, Cascading Style Sheet CSS Internet Explorer 5 Netscape 6 Safari CSS CSS: CSS. CSS 2-3 Dreamweaver CSS

CSS Grid Layout w/ Blueprint CSS

CSS Pams Terapi Cairan Css

Que es CSS? Presentacion Basica para CSS

CSSにもオブジェクト指向を - OOCSSことはじめ

OOCSS - 以sass開發為例

CSS Dasar #3 : Penempatan CSS

OOCSS - Object Oriented CSS

基于Gulp的前端动化 - ppt. 于Gulp的前端自动化@刘剑辛&刘达慰.pdf · PDF file Work The normalize part CSS预编译：less sass stylus CSS类名：BEM SMACSS APICSS

7Masters CSS | SMACSS, por Rafael Lyra

XML 문서 화면 표현 CSS 개념 CSS 사용법 CSS 문법

Smacss and bem

Tutorial CSS untuk Cara Menuliskan CSS di HTML; • Tips Belajar CSS Variasi atau Versi CSS Sejak awal diperkenalkan CSS memiliki beberapa variasi: CSS 1: adalah versi pertama (17

OOCSS Session Barcamp Mainz 2009

Arquitetura CSS - SMACSS + OOCS + BEM

Optymalizacja stylow CSS kurs Tajniki css

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

2016/6/5 CSS - HTML CSS Vol. 12 - ニュー... 2016/6/5 CSS - HTML CSS Vol. 12 - DESIGNMAP 8/9

MOVE.CSS: UMA BIBLIOTECA DE COMPONENTES ... BEM Block Element Modifier CSS Cascading Style Sheets DOM Document Object Model HTML HyperText Markup Language OOCSS Object Oriented Cascading

Object-Oriented CSS 從 OOCSS, SMACSS, BEM 到 AMCSS

Smacss. Organizando css

Cascading Style Sheet (CSS) pada HTML - file2 Sub Pokok Bahasan CSS? Contoh sederhana Selector Mekanisme mengaplikasikan CSS Elemen-elemen CSS CSS properties

Web viewPengenalan CSS & Kumpulan Tag CSS. Pengenalan CSS. A. Sejarah Singkat CSS. Pada tanggal 17 Desember 1996, World Wide Web Consortium (W3C) menjadikan CSS

OOCSS, SMACSS or BEM?

CSS: Conceptos bá › dspace › bitstream › 10045 › 26458 › 1 › CSS... · PDF file CSS Introducción al desarrollo web CSS Cascading Style Sheets

OOCSS - Versión anotada - @janogarcia

CSS in JS - tzi.fr · PDF file aphrodite, babel-plugin-css-in-js, babel-plugin-pre-style, bloody-react-styled, classy, csjs, css-constructor, css-light, css-loader, css-ns, cssobj,

OOCSS – JURIY ARTYUKH for Tech Hangout - Tech Hangout #20 - 2013.04.03

Tecnologías Web para la presentación CSS CSS

Css Página 1 - Max · PDF file Css Página 2 CSS Sumário Introdução ao CSS ..... 4