Css Architecture: Jscafe 2014-03-09 Katsunori Tanaka With Oocss, Smacss, Bem

CSS
Architecture
with OOCSS,SMACSS,BEM jsCafe
2014-03-09
Katsunori Tanaka
OUTLINE
1. CSS Architecture
2. CSS Methodology
3. CSS Preprocessor
4. Semantics
5. Summary
1. CSS Architecture
What?
CSS Architecture
“コンピュータ（特にハードウェア）
における基本設計や設計思想などの
基本設計概念を意味する。”
-wikipedia
https://ja.wikipedia.org/wiki/コンピュータ・アーキテクチャ
Why?
CSS Architecture
“CSS is simple... It’s simple to understand.
But CSS is not simple to use or maintain.”
-Chris Eppstein
「CSSは単純で理解しやすいが、使ったりメンテ
したりするのはシンプルではない。」
http://chriseppstein.github.io/blog/2009/09/20/why-stylesheet-abstraction-matters/
“We have been doing it all wrong....
Our (CSS) best practices are killing us”
-Nicole Sullivan
「CSSのベストプラクティスによって私達はダメ
にされている。」
http://www.stubbornella.org/content/2011/04/28/our-best-practices-are-killing-us/
Three Best Practice
Myths
❖ Don’t add any extra elements

❖ Don’t add classes
❖ Use descendent selectors exclusively
“CODE IS TOO FRAGILE.”
-Nicole Sullivan
「コード（注：ここではCSS）もろすぎ」
http://www.stubbornella.org/content/2009/02/12/css-doesn’t-suck-you’re-just-doing-it-wrong/
CSS Architecture
http://philipwalton.com/articles/css-architecture/
The Goals of Good
CSS Architecture
❖ Predictable
❖ Reusable
❖ Maintainable
❖ Scalable
“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にもなお適用され
る。」
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
Separate Structure and Skin
“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 Container and Content
“break the dependency between the

container module and the content objects
it contains.”
「コンテナーモジュールとその中身であるコン
テンツとの依存関係を断ち切る」
EXMAPLE
MEDIA OBJECT
<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 {
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);
}
<div class="media media-shadow">
</div>
</div> テキスト
</div>
Sub Class
Base Class (modifier) Sub Class
(descendent)
</div>
</div> テキスト
</div> Sub Class
(descendent)
Three Best Practice
Myths
❖ Don’t add any extra elements

❖ Don’t add classes
❖ Use descendent selectors exclusively
Two Practices
OOCSS
❖ Add classes
❖ Don’t use descendent selectors
SMACSS
Scalable &
Modular
Architecture for
CSS
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
❖ ベースとなるルールセットを定義。
❖ タイプセレクタを用いる。
❖ クラスセレクタ、IDセレクタは用いない。
❖ CSS Reset
❖ Normalize CSS
http://yuilibrary.com/yui/docs/cssreset/
http://necolas.github.io/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
Module Class (modifier) Sub Class
(descendent)
</div>
</div> テキスト
</div> Sub Class
(descendent)
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
.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 { State Class
display: none;
}
(modifier)
State Class
(modifier)
<div class="media media-shadow is-hidden">
</div>
</div> テキスト
</div>
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
.media {
overflow: hidden;
_overflow: visible;
zoom: 1;
}
.media-img {
float: left;
margin-right: 10px;
}
.media-img > img { Child
display: block; Selector
margin: 10px;
}
.media-body {
overflow: hidden;
}
.is-hidden {
display: none;
}
.media-img > img
<div class="media skin-shadow is-hidden">
</div>
</div> テキスト
</div>
Two core goals of SMACSS
1. HTMLとコンテンツのセマンティックな価値を
向上すること（適切な命名規則に基づいたクラス
名によるコンテンツの詳細説明。）
2. 特定のHTML構造への依存を低減すること
http://smacss.com/book/html5
BEM
Block
Element
Modifier
BEM Yandex
http://bem.info/
BEM stands for
✤ Block
✤ Element
✤ Modifier
http://bem.info/method/definitions/
Block
❖ コンテンツから独立した存在
❖ ページやアプリケーションを構成している
「レゴブロック」のような役割
❖ SMACSSにおけるModule Class
Element
❖ ブロックを構成する一部分
❖ エレメントが属するブロックの中でのみ意味
をなす、ブロックに依存した存在
❖ サブクラスはアンダースコア二つでつなげる
❖ .block__element
❖ SMACSSにおけるSub Class (descendent)
Modifier
❖ Block, Elementの見栄えや振舞いを指定
❖ サブクラスはアンダースコア一つでつなげる
❖ .block_modifier
❖ .block__element_modifier
❖ SMACSSにおけるSub Class (Modifier), State Rule
Block Modifier Element
<div class="media media_shadow">
<div class="media__img">
</div>
<div class="media__body">
</div> テキスト
</div> Element
.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
❖ BEM命名規則の改良版(by Nicolas Gallagher)

❖ ダブルセパレータ
❖ .block__element
❖ .block−−modifier
❖ .block__element−−modifier
http://nicolasgallagher.com/about-html-semantics-front-end-architecture/
Block Modifier Element
<div class="media media--shadow">
<div class="media__img">
</div>
<div class="media__body">
</div> テキスト
</div> Element
3. CSS Preprocessor
for OOCSS
CSS Preprocessor
for OOCSS
✤ “&” Combinator (LESS & SASS3.3~)

✤ Placeholder Selector (SASS)
✤ Combine multiples files
<a class="btn btn--red" href="#" >爆破</a>
テキスト
<a class="btn btn--blue" href="#" >やめる</a>
// btn component
.btn {
border: 1px solid #000;
padding: 10px 20px;
color: #000;
border-radius: 8px;
&--red {
background-color: red;
}
&--blue {
3.3~
background-color: blue;
}
}
.btn {
padding: 10px 20px;
color: #000;
border-radius: 8px;
}
.btn--red {
}
.btn--blue {
}
Single
Class
OOSCSS
Multiple
Classes
<a class="btn btn--red" href="#" >爆破</a>
テキスト
<a class="btn btn--blue" href="#" >やめる</a>
Single
Single Class
Classes
<a class="fire" href="#" >爆破</a>
テキスト
<a class="stop" href="#" >やめる</a>
%btn {
padding: 10px 20px;
color: #000;
border-radius: 8px;
}
%btn--red {
}
%btn--blue {
}
.fire {
@extend %btn;
@extend %btn--red;
}
.stop {
@extend %btn;
@extend %btn--blue;
}
.fire, .stop {
padding: 10px 20px;
color: #000;
border-radius: 8px;
}
.fire {
}
.stop {
}
Placeholder Selector
✤ Clean markup - single class

✤ Semantic class naming
✤ Avoid using too much @extend
4. Semantics
About HTML semantics and
front-end architecture
“ ... not all semantics need to be content-
derived ”
「全てのセマンティクスがコンテンツ由来であ
る必要はない」
“ Content-layer semantics are already
served by HTML elements and other
attributes. ”
「コンテンツレイヤーのセマンティクスは、
HTML要素とその他属性によって、すでに与え
られている」
“ Class names impart little or no useful
semantic information to machines or
human visitors... ”
「クラス名は、サイト閲覧者やマシーンにとっ
て殆ど影響を与えることはなく、有益な情報を
もたらすことはない」
“ The primary purpose of a class name is
to be a hook for CSS and JavaScript. ”
「クラス名の第一の目的は、CSSやJavaScriptの
フックになること。」
“ Class names should communicate useful
information to developers. ”
「クラス名は開発者へ有益な情報を伝達すべき。」
“ 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. ”
「フレキシブルで最利用可能なコンポーネント
は、DOMツリーのある部分に依存することも、
特定の要素タイプを使用したりもしない。」
CSS Class
Naming Convention
✤ Semantic ?
✤ presentational / behavioural ?
5. Summary
The Goals of Good
CSS Architecture
❖ Predictable
❖ Reusable
❖ Maintainable
❖ Scalable
Do you need a CSS Architecture &
Methodology like OOCSS ?
❖ How many developers ?
❖ Reuse ?
❖ Maintainance ?
❖ Scale ?
Bootstrap
http://getbootstrap.com/
Topcoat
http://topcoat.io/
Thank you
so much
ご静聴ありがとうございました jsCafe
2014-03-09
Katsunori Tanaka

Css Architecture: Jscafe 2014-03-09 Katsunori Tanaka With Oocss, Smacss, Bem

Hochgeladen von

Dokumentinformationen

Originaltitel

Copyright

Verfügbare Formate

Dieses Dokument teilen

Dokument teilen oder einbetten

Freigabeoptionen

Stufen Sie dieses Dokument als nützlich ein?

Sind diese Inhalte unangemessen?

Copyright:

Verfügbare Formate

Css Architecture: Jscafe 2014-03-09 Katsunori Tanaka With Oocss, Smacss, Bem

Hochgeladen von

Copyright:

Verfügbare Formate

CSS

❖ Don’t add any extra elements

✤ Separate Structure and Skin

“abstract the structure of the block from

“break the dependency between the

❖ Don’t add any extra elements

✤ Categorizing CSS Rules

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

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

<a class="btn btn--red" href="#" >爆破</a>

<a class="fire" href="#" >爆破</a>

✤ Clean markup - single class

Das könnte Ihnen auch gefallen