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

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

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

ホリグチ　セイト
自己紹介
Front-End-Engineer
担当している業務
html,css,jsを用いいた中規模メディアサイト,
Webアプリケーションの開発
趣味
Lang-8（先週から）、漫画（いろいろ）、
宇宙と...

アジェンダ
はじめに
CSS設計の3大メソッド
OOCSS
BEM
SMACSS
設計で必要な3つのこと
設計指針
ディレクトリ構成
スタイルガイド
業務で実践してみてわかった7つのこと
まとめ

～はじめに～
CSS設計って何それ美味しいの？

CSS設計とは
!
CSSをより体系立て、より構造化させることで、
制作とメンテナンスをより容易に行うこと
※引用1　『SMACSS: Scalable and Modular Architecture for CSS』

ＣＳＳに強い拡張性、保守性、明瞭性を持たせることが大事
と、言われています

というわけで、今回僕がお話しさせていただくことは3つです

たくさん知ろう
いいとこだけ取ろう
自分なりの設計をしてみよう

CSS設計の3大メソッド

OOCSS
BEM
SMACSS

OOCSS

オブジェクト指向に基づいて考案された設計手法。
米Yahoo!のNicole Sullivan氏によって考案された。
!
OOCSSで設計されている代表的なサイト
!
!
OOCSSとは

大きな特徴は以下の2つ
要素をContainerとContentsに切り離して考える
要素をStructureとSkinに切り離して考える

要素をContainerとContentsに切り離して考える

要素をContainerとContentsに切り離して考える
Container

要素をContainerとContentsに切り離して考える
.registration

要素をContainerとContentsに切り離して考える
Contents

要素をContainerとContentsに切り離して考える
.text
.input
.heading
.btn

要素をContainerとContentsに切り離して考える

要素をContainerとContentsに切り離して考える

要素をContainerとContentsに切り離して考える
.registration > button{ … }　というような、依存したスタイルの充て方ではなく、
.btn{ … }というように独立させてスタイルを充てると、色々なところ...

ストラクチャーとスキンを切り離そう
(color)
skin
(display,text-align,…etc)
structure
(width,height)

structure skin

structure skin
.btn{
display:
inline-‐block;
border-‐radius:
5px;
text-‐align:
center;
}
.btn-‐green{
backgr...

structure skin
.btn{
display:
inline-‐block;
border-‐radius:
5px;
text-‐align:
center;
}
.btn-‐large{
width:...

structure + skin
=
<button
class="btn
btn-‐pink
btn-‐medium">button</button>

structure + skin
=
<button
class="btn
btn-‐black
btn-‐large">button</button>

structure + skin
=
<button
class="btn
btn-‐green
btn-‐small">button</button>

BEM

html構造を明確にすることに軸を置いた設計方法。厳格な命名規則が特徴。
ロシアのYandex社によって考案された。
!
BEMで設計されている代表的なサイト
!
!
BEMとは

大きな特徴は以下の2つ
要素を Block, Element, Modifierの3つに分ける
.Block__Element_Modifierという命名ルールを用いる

Block, Element, Modifier

Block, Element, Modifier
Block

Block, Element, Modifier
.registration

Block, Element, Modifier
Element

Block, Element, Modifier
.registraion__heading
.registraion__text
.registraion__input
.registraion__btn

Block, Element, Modifier
Modifier

Block, Element, Modifier
.registraion__btn_color_bule

MindBEMding
BEMのエッセンスをとり入れつつ、命名ルールは
自分たちでカスタマイズするのもあり
CSS Wizardly
Harry Roberts氏
http://csswizardry.com/2013/01/mind...

SMACSS

SMACSSとは
OOCSS,BEMの流れを汲みつつ、著者の経験や理論も交えてドキュメントに落とし
込まれたスタイルガイド（コーディングルール）。
Jonathan Snook氏によって考案された。

大きな特徴
要素をBase,Layout,Module,State,Theme
の5つに分ける

Base
Layout
Module
State
Theme

Base
Layout
Module
State
Theme
!
reset.css
helper.css
…etc

Base
Layout
Module
State
Theme

Base
Layout
Module
State
Theme

Base
Layout
Module
State
Theme
.tab .is-current

Base
Layout
Module
State
Theme

その他にもいろいろ
マルチクラス推奨
ざっくりした命名規則
Sassでの実装方法
などなど

設計で必要な3つのこと

設計指針
ディレクトリ構成
スタイルガイド

設計指針

設計指針
コーディングを行う際に守るべき約束事。
方針。
コーディング中に迷いが生じたら、これを
元に判断・解決する

設計指針　例
SMACSSの場合
HTMLとコンテントのセマンティックな価値を向上すること
特定のHTML構造への依存を低減すること
※引用1　『SMACSS: Scalable and Modular Architecture for...

設計指針　例
KOJI ISHIMOTO氏の場合
絶対にCSSを増やしたくない
class名で悩みたくない
完璧じゃなくてもいい
石本光司
@t32k
Front-end-engineer
サイバーエージェント所属
JS G...

ディレクトリ構成

ディレクトリ構成例（SMACSSベース）
html scss js image

ディレクトリ構成例（SMACSSベース）
html scss js image

ディレクトリ構成例（SMACSSベース）
normlize.scss
helper.scss
header.scss
footer.scss
main.scss
side.scss
button.scss
heading.scs...

ディレクトリ構成例（SMACSSベース）
scss
mixin.scss
setting.scss
common.scss
normlize.scss
helper.scss
header.scss
footer.scss
m...

ディレクトリ構成例（SMACSSベース）
common.scss
@importして1つのCSSに
@import "normlize.scss";
@import “helper.scss”;
!
@import "header....

ディレクトリ構成　まとめ
カテゴライズして分けておくと管理しやすい
SMACSSなどのスタイルガイドを参考にしよう
（他にこんなのもあります）

スタイルガイド

スタイルガイド
モジュールの一覧表。コンポーネント一覧と
呼ばれることもしばしば。
コーディングルールやカラーコードを載せる
　となお良い。

※引用3　Twitter『 Bootstrap』

スタイルガイド　作り方
htmlとcssでべた書きで作る
ジェネレーター使う

スタイルガイド　参考になるもの
CSS フレームワーク
コーディングルール

スタイルガイド　まとめ
コンポーネントの一覧があると保守しやすく、
コミュニケーションコストを減らせる
ジェネレーターを使おう

業務で実践してみてわかった
7つのこと

設計がオリジナルすぎると残業増える

設計がオリジナルすぎると残業増える
設計者＆作業者のコミュニケーションコストが増える
既存の手法を取り入れつつ、厳しすぎないルールを設ける
S
命名ルールってこの場合はどう
なるの？
このデータはどこに入れるべき？
これはElem...

ベストプラクティスなんてない！

ベストプラクティスなんてない！
時と場合による
S
メンバー案件の内容期限

S ベストプラクティスなんてない！
メンバー案件の内容期限
自分なりの設計をしてみよう

言葉の意味はしっかり定義しとく

言葉の意味はしっかり定義しとく
ContainerとContentとか、
BlockとElementtとか、
Moduleとか…言い方多すぎ？
Layoutってどこの部分？
S

BEMは案外めんどくない

$S BEMは案外めんどくない Dashのスニペット機能が超絶楽 PhpStormの補完機能は強力 .block{ &__element{ background: black; } } Sass 3.3̃の使うと省略できる .b...$

OOCSSとBEMは混ぜるとちょい危険

S OOCSSとBEMは混ぜるとちょい危険
OOCSS
シングルクラス向きマルチクラス向き
.registration__btn_color_pink .btn .btn_pink .btn_small

S OOCSSとBEMは混ぜるとちょい危険
OOCSS
.Block__Element._modifier
.registraion__btn._color_pink

セマンティックに
こだわりすぎるのもよくない

S セマンティックにこだわりすぎるのもよくない
.btn-blue
.btn-pink
.btn-green
.btn-default
.btn-primary
.btn-success
.btn-a
.btn-b
.btn-...

オブジェクト指向を勉強すると
OOCSSが楽しくなる

オブジェクト指向を勉強するとOOCSSが楽しくなる
スーパークラスとサブクラス
複合オブジェクト　など
S
オススメ
ITmedia エンタープライズ『5分で絶対に分かるオブジェクト指向』
URL : http://www.itme...

まとめ

たくさん知ろう
いいとこだけ取ろう
自分なりの設計をしてみよう

S たくさん知ろう
OOCSS

S いいとこだけ取ろう
OOCSS

OOCSS
S 自分なりの設計をしてみよう
自分や周りの環境に合わせて、最適な設計をしよう

S 参考文献
※引用1　Jonathan Snook,斉藤祐也『SMACSS: Scalable and Modular Architecture for CSS』
https://smacss.com/ja
※引用2　KOJI ISHI...

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