プラカンブログSTAFF BLOG

2017.02.28

もう後悔したくない!CSSの設計概念を知りメンテナンス性を高めよう

CSS設計

デザインとコーディングだったらコーディングの方が8px分くらい好きなデザイナーのKIKUCHIです。
 
コーディングをする上で欠かせないCSSWEBページのスタイルを指定するための言語で、比較的簡単にスラスラ~っと書けてしまうが故に、問題が起きやすく直すのが難しい、と感じることはありませんか?
これからのCSSこそメンテナンス性の高い設計を行い、後々の手間や残念な気持ちをなくしていきたい!あの時しっかり考えて書いておけば良かった…と後悔したくない!今更書き方なんて変えられない?いやいやいやいや!今変えないでいつ変えるの?今でしょ!(古)
ということで、参考になりそうなCSS設計概念をまとめました。
 
目次
  1. CSSの複雑化
  2. CSSを設計する上でのゴール
  3. 代表的なCSS設計概念
    • OOCSS
    • BEM
    • SMACSS
  4. まとめ

1. CSSの複雑化

冒頭でも書いたように、CSSは気づいたら取り返しのつかないくらい複雑な内容になってしまうことが多々あります。
例えば、
  • 同じようなコードが複数箇所ある
  • クラス名が被っている
  • スタイルの詳細度問題
…などなど。
【参考】
 
このように誰もが陥りやすいCSSの落とし穴から脱出するため、繰り返し書きますが、メンテナンス性の高いCSS設計をしましょう!よしっ!

2. CSSを設計する上でのゴール

様々な記事でも取り上げられている、フィリップ・ウォルトン氏のブログ記事に、より良いCSS設計のゴールとして以下の4つが挙げられます。
 
  1. 予測しやすい
  2. 再利用しやすい
  3. 保守しやすい
  4. 拡張しやすい
【参考】
上記のゴールを意識した上で、3つの代表的なCSS設計方法をご紹介します。

3. 代表的なCSS設計概念

OOCSS

OOCSS(Object-Oriented CSS)とは、オブジェクト指向に基づいた設計で、それぞれが独立したスタイルで色々なところに使いまわせるのが特徴です。
IDをきっかけに子孫セレクタによって定義するのではなく、すべてのスタイルをクラスで定義して複数組み合わせる、ということです。
OOCCCの原則
構造と見た目の分離
繰り返し定義されるような background や border などの見た目と構造自体を分けて定義すること。
/* ボタンの構造 */
.btn{
 width: 200px;
 height: 50px;
 padding: 10px;
 text-align: center;
}

/* ボタンの見た目 */
.btn-red{
 background-color: red;
 color: white;
}
<a href="#" class="btn btn-red">ボタン</a> 
 
コンテナーとコンテンツの分離
場所に依存しないセレクタを書くということ。一つのクラスに書くことで修正の対応がしやすくなる。
header .sub-title{
    font-size: 16px;
    color: #555;
    border-bottom: 1px solid #ccc;
}
footer .sub-title{
    font-size: 16px;
    color: #555;
    border-bottom: 1px solid #ccc;
}

.sub-title{
    font-size: 16px;
    color: #555;
    border-bottom: 1px solid #ccc;
}
【参考】

BEM

BEM(ベム)とは、「Block」「Element」「Modifier」の略語で、HTML構造を明確にし、厳格なclass名の命名ルールが特徴です。
 
Block:構造の起点となる要素、塊
Element:Blockに所属する小要素
Modifier:状態、変化(keyとvalueで表す)
【参考】

SMACSS

SMACSS(Scalable and Modular Architecture for CSS )とは、
CSSのルールを5種類にカテゴライズした上で、それぞれの考え方や記述ルールが取り決められているのが特徴です。CSSを体系立て、構造化させることで制作とメンテナンスの効率化を図ります。
 
ベース 要素そのもののデフォルトスタイル
レイアウト ページをエリアごとに分割
モジュール 再利用可能なパーツ
状態(ステート) レイアウトやモジュールの特定の状態を示す
テーマ サイトのルック&フィールを定義
【参考】

4. まとめ

CSSとは簡単なようで奥が深いです。
紹介した3つのCSS設計概念の中でどれがいいか…というのは、その案件の性質だったり、チームメンバーにもよるので、その時に応じて使い分けるというのが理想的と考えられます。
ちなみに私はOOCSSとSMACSSを組み合わせたような書き方を心がけています。よりよい方法があれば柔軟に対応していきたいです。
 
ただ、これらのCSS設計方法を駆使し共有したとしても、最終的には個人差が出てきてしまうと思います。結局は「誰でも分かりやすいCSSを書くよう心がける」ことが大切なんだと思います。
【その他参考記事】
 
 

+dc(菊)

この記事は、KIKUCHI が書きました。