css architecture with oocss, smacss, bem

of 83 /83
CSS Architecture jsCafe 2014-03-09 Katsunori Tanaka with OOCSS,SMACSS,BEM

Upload: katsunori-tanaka

Post on 11-Aug-2014

4.769 views

Category:

Design


23 download

DESCRIPTION

Slide about Modern CSS Architecture. with OOCSS, SMACSS, BEM and Preprocessors. If you want to download PDF but don't want to login SlideShare, go to Speacker Deck on which is the same downloadable PDF : https://speakerdeck.com/katsunoritanaka/css-architecture-with-oocss-smacss-bem

TRANSCRIPT

Page 1: CSS Architecture with OOCSS, SMACSS, BEM

CSSArchitecture

jsCafe 2014-03-09Katsunori Tanaka

with OOCSS,SMACSS,BEM

Page 2: CSS Architecture with OOCSS, SMACSS, BEM

OUTLINE

1. CSS Architecture

2. CSS Methodology

3. CSS Preprocessor

4. Semantics

5. Summary

Page 3: CSS Architecture with OOCSS, SMACSS, BEM

1. CSS Architecture

Page 4: CSS Architecture with OOCSS, SMACSS, BEM

What?CSS Architecture

Page 5: CSS Architecture with OOCSS, SMACSS, BEM

“コンピュータ(特にハードウェア)における基本設計や設計思想などの基本設計概念を意味する。”

https://ja.wikipedia.org/wiki/コンピュータ・アーキテクチャ

-wikipedia

Page 6: CSS Architecture with OOCSS, SMACSS, BEM

Why?CSS Architecture

Page 7: CSS Architecture with OOCSS, SMACSS, BEM

“CSS is simple... It’s 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

Page 8: CSS Architecture with OOCSS, SMACSS, BEM

“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

Page 9: CSS Architecture with OOCSS, SMACSS, BEM

Three Best PracticeMyths

❖ Don’t add any extra elements

❖ Don’t add classes

❖ Use descendent selectors exclusively

http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

Page 10: CSS Architecture with OOCSS, SMACSS, BEM

“CODE IS TOO FRAGILE.”

http://www.stubbornella.org/content/2009/02/12/css-doesn’t-suck-you’re-just-doing-it-wrong/

-Nicole Sullivan

「コード(注:ここではCSS)もろすぎ」

Page 11: CSS Architecture with OOCSS, SMACSS, BEM

CSS Architecturehttp://philipwalton.com/articles/css-architecture/

Page 13: CSS Architecture with OOCSS, SMACSS, BEM

“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/

Page 14: CSS Architecture with OOCSS, SMACSS, BEM

2. CSS Methodology

Page 15: CSS Architecture with OOCSS, SMACSS, BEM

CSS Methodology

✤ OOCSS

✤ SMACSS

✤ BEM

Page 16: CSS Architecture with OOCSS, SMACSS, BEM

Object OrientedCSS

Page 17: CSS Architecture with OOCSS, SMACSS, BEM

OOCSS Nicole Sullivanhttps://github.com/stubbornella/oocss/wiki

Page 18: CSS Architecture with OOCSS, SMACSS, BEM

Two Main Principles

✤ Separate Structure and Skin

✤ Separete Container and Content

Page 19: CSS Architecture with OOCSS, SMACSS, BEM

“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

Page 20: CSS Architecture with OOCSS, SMACSS, BEM

“break the dependency between the container module and the content objects it contains.”

「 コンテナーモジュールとその中身であるコンテンツとの依存関係を断ち切る」

Separate Container and Content

Page 21: CSS Architecture with OOCSS, SMACSS, BEM

EXMAPLE

MEDIA OBJECT

Page 22: CSS Architecture with OOCSS, SMACSS, BEM

テキスト

<div class="media"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div></div>

Page 23: CSS Architecture with OOCSS, SMACSS, BEM

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

Page 24: CSS Architecture with OOCSS, SMACSS, BEM

テキスト

<div class="media "> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div></div>

media-shadow

Page 25: CSS Architecture with OOCSS, SMACSS, BEM

Sub Class(descendent)

Sub Class(descendent)

テキスト

<div class="media media-shadow"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div></div>

Base ClassSub Class(modifier)

Page 26: CSS Architecture with OOCSS, SMACSS, BEM

Three Best PracticeMyths

❖ Don’t add any extra elements

❖ Don’t add classes

❖ Use descendent selectors exclusively

http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/

Page 27: CSS Architecture with OOCSS, SMACSS, BEM

❖ Add classes

❖ Don’t use descendent selectors

Two PracticesOOCSS

Page 28: CSS Architecture with OOCSS, SMACSS, BEM

Scalable &ModularArchitecture forCSS

SMACSS

Page 29: CSS Architecture with OOCSS, SMACSS, BEM

SMACSS Jonathan Snook http://smacss.com

Page 30: CSS Architecture with OOCSS, SMACSS, BEM

Three Main Principles

✤ Categorizing CSS Rules

✤ Naming Rules

✤ Minimizing the Depth of Applicability

Page 31: CSS Architecture with OOCSS, SMACSS, BEM

Five Types of Categories

1. Base

2. Layout

3. Module

4. State

5. Theme

Page 32: CSS Architecture with OOCSS, SMACSS, BEM

Base Rules

http://yuilibrary.com/yui/docs/cssreset/

http://necolas.github.io/normalize.css/

❖ ベースとなるルールセットを定義。❖ タイプセレクタを用いる。❖ クラスセレクタ、IDセレクタは用いない。❖ CSS Reset

❖ Normalize CSS

Page 33: CSS Architecture with OOCSS, SMACSS, BEM

Layout Rules ( Major Components)

❖ ページの主要なレイアウトを司るコンポーネント❖ コンテナーとして後述するモジュールを含む❖ クラスセレクタ、IDセレクタで定義

❖ クラスの命名規則は、l- layout-❖ .l-header❖ .l-sidebar❖ .l-content❖ .l-footer

http://smacss.com/book/type-layout

Page 34: CSS Architecture with OOCSS, SMACSS, BEM

Module Rules ( Minor Components)

❖ 先述のメジャーコンポーネント内に配置❖ 個々のモジュールはスタンドアロンなコンポーネントとして存在できるように設計(reusable)❖ クラスセレクタのみで定義。

❖ サブクラスはハイフンでつなげる(命名規則)❖ .media❖ .media-image❖ .media-image-hoge

http://smacss.com/book/type-module

Page 35: CSS Architecture with OOCSS, SMACSS, BEM

Sub Class(descendent)

Sub Class(descendent)

テキスト

<div class="media media-shadow"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div></div>

Module ClassSub Class(modifier)

Page 36: CSS Architecture with OOCSS, SMACSS, BEM

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

Page 37: CSS Architecture with OOCSS, SMACSS, BEM

State Class(modifier)

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

Page 38: CSS Architecture with OOCSS, SMACSS, BEM

テキスト

<div class="media media-shadow is-hidden"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div></div>

State Class(modifier)

Page 39: CSS Architecture with OOCSS, SMACSS, BEM

Theme Rules

❖ ページ全体のテーマ変更用のルール❖ クラスセレクタのみで定義

❖ クラスの命名規則は、theme-❖ theme-a-background❖ theme-a-border❖ theme-b-background❖ theme-b-border

http://smacss.com/book/type-theme

Page 40: CSS Architecture with OOCSS, SMACSS, BEM

Minimizing the Depth of Applicability

❖ 適応性の深度を最小限にとどめる

❖ 深度の深い子孫セレクタは使用しない❖ コンテンツ依存を防止する為

❖ モジュール内では子セレクタにとどめる❖ 理想は子セレクタの代わりにサブクラスで定義

http://smacss.com/book/applicability

Page 41: CSS Architecture with OOCSS, SMACSS, BEM

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

Page 42: CSS Architecture with OOCSS, SMACSS, BEM

テキスト

<div class="media skin-shadow is-hidden"> <div class="media-img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media-body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div></div>

.media-img > img

Page 43: CSS Architecture with OOCSS, SMACSS, BEM

Two core goals of SMACSS

1. HTMLとコンテンツのセマンティックな価値を

向上すること(適切な命名規則に基づいたクラス

名によるコンテンツの詳細説明。)

2. 特定のHTML構造への依存を低減すること

http://smacss.com/book/html5

Page 44: CSS Architecture with OOCSS, SMACSS, BEM

BlockElementModifier

BEM

Page 45: CSS Architecture with OOCSS, SMACSS, BEM

BEM Yandex http://bem.info/

Page 46: CSS Architecture with OOCSS, SMACSS, BEM

BEM stands for

✤ Block

✤ Element

✤ Modifier

http://bem.info/method/definitions/

Page 47: CSS Architecture with OOCSS, SMACSS, BEM

Block

❖ コンテンツから独立した存在❖ ページやアプリケーションを構成している「レゴブロック」のような役割❖ クラスセレクタのみで定義。❖ SMACSSにおけるModule Class

http://bem.info/method/definitions/

Page 48: CSS Architecture with OOCSS, SMACSS, BEM
Page 49: CSS Architecture with OOCSS, SMACSS, BEM
Page 50: CSS Architecture with OOCSS, SMACSS, BEM

Element

❖ ブロックを構成する一部分❖ エレメントが属するブロックの中でのみ意味をなす、ブロックに依存した存在❖ クラスセレクタのみで定義。

❖ サブクラスはアンダースコア二つでつなげる❖ .block__element

❖ SMACSSにおけるSub Class (descendent)

http://bem.info/method/definitions/

Page 51: CSS Architecture with OOCSS, SMACSS, BEM
Page 52: CSS Architecture with OOCSS, SMACSS, BEM

Modifier

❖ Block, Elementの見栄えや振舞いを指定❖ クラスセレクタのみで定義。

❖ サブクラスはアンダースコア一つでつなげる❖ .block_modifier❖ .block__element_modifier

❖ SMACSSにおけるSub Class (Modifier), State Rule

http://bem.info/method/definitions/

Page 53: CSS Architecture with OOCSS, SMACSS, BEM

Element

Elementテキスト

<div class="media media_shadow"> <div class="media__img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media__body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div></div>

Block Modifier

Page 54: CSS Architecture with OOCSS, SMACSS, BEM

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

Page 56: CSS Architecture with OOCSS, SMACSS, BEM

MindBEMDing

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

❖ BEM命名規則の改良版(by Nicolas Gallagher)

❖ ダブルセパレータ❖ .block__element❖ .block−−modifier❖ .block__element−−modifier

Page 57: CSS Architecture with OOCSS, SMACSS, BEM

Element

Elementテキスト

<div class="media media--shadow"> <div class="media__img"> <img src="http://lorempixel.com/100/100/" /> </div> <div class="media__body"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</p> </div></div>

Block Modifier

Page 58: CSS Architecture with OOCSS, SMACSS, BEM

3. CSS Preprocessorfor OOCSS

Page 59: CSS Architecture with OOCSS, SMACSS, BEM

CSS Preprocessorfor OOCSS

✤ “&” Combinator (LESS & SASS3.3~)

✤ Placeholder Selector (SASS)

✤ Combine multiples files

Page 60: CSS Architecture with OOCSS, SMACSS, BEM

テキスト<a class="btn btn--red" href="#" >爆破</a>

<a class="btn btn--blue" href="#" >やめる</a>

Page 61: CSS Architecture with OOCSS, SMACSS, BEM

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

Page 62: CSS Architecture with OOCSS, SMACSS, BEM

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

Page 63: CSS Architecture with OOCSS, SMACSS, BEM

SingleClassOOSCSS

Page 64: CSS Architecture with OOCSS, SMACSS, BEM

Multiple ClassesMultiple Classes

テキスト<a class="btn btn--red" href="#" >爆破</a>

<a class="btn btn--blue" href="#" >やめる</a>

Page 65: CSS Architecture with OOCSS, SMACSS, BEM

Single ClassesSingle Class

テキスト<a class="fire" href="#" >爆破</a>

<a class="stop" href="#" >やめる</a>

Page 66: CSS Architecture with OOCSS, SMACSS, BEM

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

}

Page 67: CSS Architecture with OOCSS, SMACSS, BEM

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

}.fire {

background-color: red;}.stop {

background-color: blue;}

Page 68: CSS Architecture with OOCSS, SMACSS, BEM

Placeholder Selector

✤ Clean markup - single class

✤ Semantic class naming

✤ Avoid using too much @extend

Page 69: CSS Architecture with OOCSS, SMACSS, BEM

4. Semantics

Page 70: CSS Architecture with OOCSS, SMACSS, BEM

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

Page 71: CSS Architecture with OOCSS, SMACSS, BEM

“ ... not all semantics need to be content-derived ”

「全てのセマンティクスがコンテンツ由来である必要はない」

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

Page 72: CSS Architecture with OOCSS, SMACSS, BEM

“ Content-layer semantics are already served by HTML elements and other attributes. ”

「コンテンツレイヤーのセマンティクスは、HTML要素とその他属性によって、すでに与えられている」

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

Page 73: CSS Architecture with OOCSS, SMACSS, BEM

“ Class names impart little or no useful semantic information to machines or human visitors... ”

「クラス名は、サイト閲覧者やマシーンにとって殆ど影響を与えることはなく、有益な情報をもたらすことはない」

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

Page 74: CSS Architecture with OOCSS, SMACSS, BEM

“ The primary purpose of a class name is to be a hook for CSS and JavaScript. ”

「クラス名の第一の目的は、CSSやJavaScriptのフックになること。」

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

Page 75: CSS Architecture with OOCSS, SMACSS, BEM

“ Class names should communicate useful information to developers. ”

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

「クラス名は開発者へ有益な情報を伝達すべき。」

Page 76: CSS Architecture with OOCSS, SMACSS, BEM

“ A flexible and reusable component is one which neither relies on existing within a certain part of the DOM tree, nor requires the use of specific element types. ”

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

「フレキシブルで最利用可能なコンポーネントは、DOMツリーのある部分に依存することも、特定の要素タイプを使用したりもしない。」

Page 77: CSS Architecture with OOCSS, SMACSS, BEM

CSS Class Naming Convention

✤ Semantic ?

✤ presentational / behavioural ?

Page 78: CSS Architecture with OOCSS, SMACSS, BEM

5. Summary

Page 81: CSS Architecture with OOCSS, SMACSS, BEM

Bootstraphttp://getbootstrap.com/

Page 82: CSS Architecture with OOCSS, SMACSS, BEM

Topcoathttp://topcoat.io/

Page 83: CSS Architecture with OOCSS, SMACSS, BEM

Thank youso much

jsCafe 2014-03-09Katsunori Tanaka

ご静聴ありがとうございました