CSS設計

目次
1. OOCSS
2. SMACSS
3. BEM
4. FLOCSS
5. まとめ

OOCSSとは?
元・米Yahoo!のデペロッパーだったニコール・サリバンによ
って提唱された。
オブジェクト思考に基づいて、考案された設計思想。
Object Oriented CSSの略

使用法
構造と見た目、コンテナと内容を分離してclsssを定義し、それらを組み
合わせてスタイルを定義する。
ID、子孫セレクタは、なるべく使わなず、スタイルはclassで定義して組
み合わせる。
悪い例
.btn-red {
width: 300px;
height: 100px;
Line-height: 100px;
color: white;
backgronud-color: red;
}
良い例
.btn {
width: 300px;
height: 100px;
Line-height: 100px;
}
.btn-red {
color: white;
backgronud-color: red;
}

メリット
・再利用性とメンテナンスがしやすい
・共通化することでコード量が減る
デメリット
・コードが複雑になる。
・共通化によってどこにどのスタイル
が当たるのか、CSSの見通しは悪くな
ることがある。
・CSSファイルの切り分けがうまくで
きていなかったり、どのパーツが共通
化されているのかわかるガイドがない
場合、新しくプロジェクトに参加する
メンバーは初めに時間をかけてコード
を読み理解しないといけない。

SMACCSとは?
元・米Yahoo!のデペロッパーであり、Yahoo! Mailなどの担
当していたジョナサン・スヌークによってOOCSSのコンセ
プトを元に作られた。
Scalable and Modular Architecture for CSSの略

・スタイルをベース、レイアウト、モジュール、ステート、テーマの5つに分割する
ベース
要素そのもののデフォルトスタイル。
レイアウト
ページをエリアごとに分割。layout-, .l- などの接頭辞をつける
モジュール
再利用可能なパーツ。モジュールにはmod-, m-などの接頭辞はつけない。
状態（ステート）
レイアウトやモジュールの特定の状態を示す。ステートにはis- 接頭辞をつける。
テーマ
サイトのルック＆フィールを定義。テーマにはtheme- 接頭辞をつける
使用法

├── base（デフォルトスタイル）
│ ├── _base.css
│ └── _reset.css
├── layout(ページを構成するコンテナ)
│ ├── _header.css
│ ├── _footer.css
│ ├── _main.css
│ └── _sidebar.css
├── module（プロジェクトにて、繰り返されるパターンを定義）
│ ├── _button.css
│ ├── _form.css
│ └── _list.css
├── state (要素の状態を管理する。javascriptでの切り替えなどに使用)
│ ├── _error.css
│ ├── _display.css
│ └── _animate.css
└── theme（サイト全体のテーマの管理）
├── _error.css
├── _display.css
└── _animate.css
ディレクトリ構成はこんな感じ

メリット
・再利用性とメンテナンスが
しやすい
・どのファイルをいじればい
いかわかりやすい。
デメリット
・場所に依存するパーツが多
すぎるサイトでは良いところ
を活かせられない。

BEMとは?
ロシアのYandex社によって考案された設計思想です。
Block、Element、Modifierの略

使用法
要素をBlock、Element、Modifierの３つに分け、命名規則を元にClass名を記述
します。
「Block-Element__Modifier」のように
・BEMではBlockとElementの間を「-」
・ElementとModifierの間を「__」
で区切って記述する。
※「Block_Elemen__Modifier」など全てアンダーバーで区切ってアレンジする
人もいる。

Block
Blockはどこでも置くことができ、Blockの中にBlockを含め
ることも可能です。ただしCSSではBlockは完全に独立し、
Blockを別の場所に移動しても、単体で動作可能である必要。
Blockが親の名前になるので、重要。

Element
Elementは、ブロックの構成要素です。
ElementはBlockの構成要素の一つなのでBlockの中に存在す
る必要がある。
必ず頭にBlock名がつくので、重複しないclass名になるので
Element以下の名前はパターンで書くことができる。

Modifier
同じElementでも、カレント状態であったり、異なる装飾を
設定する場合使用。
KeyとValueという名前をつけてわかりやすくすることがで
きる

BEMを使用する上での注意
・大枠からBEMで書いていくとElementが多くなりすぎて１
つのclassが長くなるので、なるべく使い回せるボタンなどか
ら作成すと使い安い
・BEMの重要なことは、ElementかModifierか、といった役
割を明確にすることであり、クラス名にアンダースコアを使
うかどうかは重要ではない。

メリット
・どんなスタイルかわかりや
すい。
・コードの再利用がしやすい。
デメリット
・BEMを知らない人と一緒に
書くと破綻する
・一つのclassが長くなり見づ
らくなる事もある。

FLOCSSとは?
OCSS、SMACSS、BEMを元に日本人の谷拓樹さんが考えた設計思想。
Foundation、Layout、Objectの略

FLOCSSの決まり事
・fonundion
・layout
・object
・
component
・project
・utility
で分ける。
命名規則
・BEMを使用
接頭字
.l- //layout
.c- //component
.p- //project
.u- //utilty

FLOCSSはSassを使った方がいい
Sassを使っている想定。
importする際にCSSの場合
@import url('foundation/base.css');
@import url('foundation/reset.css');
・・・
このimport文だとサイトの読み込みに時間がかかってしまう。
Sassを使うと実際にページに読み込まれる時にはimportし終わっていて一つにまとめられたCSSファイルが生
成することができます。importの書き方は
@import "foundation/base";
@import "foundation/header";
・・・
Sassを使う方がメリットがある。

ディレクトリはこんな感じ
├── foundation（デフォルトスタイル）
│ ├── _base.scss
│ └── _reset.scss
├── layout(ページを構成するコンテナ)
│ ├── _footer.scss
│ ├── _header.scss
│ ├── _main.scss
│ └── _sidebar.scss
└── object（プロジェクトにて、繰り返されるパターンを定義）
├── component（再利用できる小さいパーツ）
│ ├── _button.scss
│ ├── _dialog.scss
│ ├── _grid.scss
│ └── _media.scss
├── project（componentより大きいパーツ）
│ ├── _articles.scss
│ ├── _gallery.scss
│ └── _profile.scss
└── utility（スタイルの調整とか）
├── _clearfix.scss
├── _margin.scss
├── _position.scss
├── _size.scss
└── _text.scss

メリット
・SMACSS より Object（コンポーネ
ント）の分け方が細かいのでより保守
性が高い
・SMACSS、BEMなどのいいとこどり
デメリット
OOCSS、SMACSS、BEMなどの思想
がわからないといけない。

１度決めた設計思想は最後までやらないと中身がカオス化す
る。
ただ結局、どんなCSS設計思想だろうがいつか破綻する気が
する。。。いかに最小限に留めるかが大事！

Good is good.
We provide opportunities to the SEKAI by fusing technology and ideas.
テクノロジーとクリエイティブでセカイをより良くする
のこと

CSS設計

More Related Content

More from GIG inc.

CSS設計

Editor's Notes