こんにちは、てっちゃんです。
みなさんはお花見しましたか？今年は安定した暖かさで例年よりもすごしやすかったなと思いました。
そして、私事ですがこの春から花粉症デビューになりそうというお話をいただきまして、毎日マスクが手放せません。いやー、のどのイガイガがたまらなく嫌ですね。

今回は、cssの設計について調べたことを書いていこうと思います。
弊社でもフロントエンド陣によりある程度のコーディングガイドラインは決まっていますが、
記述の細かい仕様までには及んでいません。コンポーネントの作り方なども人によって差異が出てきます。
複数人で作業とも慣れば尚更その差異は大きくなります。cssは記述自体はとても簡単でそれゆえに、とてももろくすぐに壊れてしまいます。

参考：なんでCSSすぐ死んでしまうん

そこで壊れにくcssを設計するためには以下が重要だと言われています。

• 拡張性
• 保守性
• 明瞭性

参考：CSSアーキテクチャ
http://article.enja.io/articles/css-architecture.html

拡張性
サイトを運用していけばそれだけさまざまなコンテンツを追加・変更を行なうことになり、大きなサイトであれば自分一人が触るとは限らなくなります。自分以外の誰かが触る可能性を考慮して容易に管理できることを目指します。

保守性
コンポーネントやもっと小さい単位の変更を加えた際に既存のcssを壊してしまわないようにすることが大事です。

明瞭性
cssのルールは誰が見ても予想通りに振る舞うことが大事です。ルールの追加・変更したときに思い通りに行かないことを避け、既存のルールに影響しないようにしましょう。では、このようなcssを実現するためにはどのような設計をすればよいのでしょうか？

そこで参考にしていくが、以下になります。

• OOCSS
• SMACSS
• BEMM

OOCSS

Object Oriented CSS(オブジェクト指向CSS)元yahooのニコール・サリバン氏により提唱されました。

OOCSSの原則は

• 構造と見た目の分離
• コンテナーとコンテンツの分離

構造と見た目の分離
これは、繰り返し定義される様なbackgroundやborderなどの見た目と構造自体を別で定義することです。
以下のコードでは、ボタン自体の構造を分離したことで、見た目を変えることでバリエーションを作ることが出来ます。

コンテナーとコンテンツの分離
これは、場所に依存しないセレクタを書くということことです。よく、ヘッダーの中にh1で囲んだテキストを書くことがありますが、

と書くことがありますが、これをフッターにも同じスタイルで入れようとするときに同じようなコードを書くことになります。であれば、.sub-titleという単一で書いておけば後からちょっとした変更でも対応しやすくなります。

また、OOCSSでマルチクラスで書かれていますが、sassの@extendで書くことでシングルクラスで書くことができます。ただ、@extendの多用はcssを肥大化させる要因にもなりますので、用法・用量はお守りください。

SMACSS

こちらも元yahooのジョナサン・スナーク氏に提唱され、パターンを抽出しやすくするためのカテゴリを用意しておくことです。パターンから粒度を導きやすくしています。

• Base
• Layout
• Module
• State
• Theme

Base
reset.cssやサイト全体に適用されるスタイルや背景・フォントファミリーなどをカテゴライズして最初に決めてしまえば変更などは行わないスタイルを記述します。

Layout
ここでは、header、footer、.content、side-contentなどの大まかなレイアウトのルールを記述します。ただし、場所に依存するようなセレクタの書き方をしないようにするのが注意点です。

Module
BaseやLayoutの粒度よりももっと細かいパターンを指していて、この2つを除けばほとんどがここに記述されることなります。また、再利用出来るようにしなければなりません。

State
これは、JavaScriptでよく使うような表示を隠すときの状態を表すルールを記述していきます。

Theme
テーマはその名通り、テーマ自体を変更するときのスタイルを記述します。Stateよりかは粒度が大きいスタイルになります。

BEM

厳格な命名規則を用いた事で近年有名な設計方法となりました。ロシアのYandex社が社内のフレームワークとして公開したものになります。Block-Element-Modifierの頭文字をとってBEMとなっています。

Block
構成の起点となる要素

Element
Blockに所属する子要素

Modifier
BlockやElementから変化した状態を表す要素

BEMの命名規則はElementをアンダースコア2つ(__)、Modifierをハイフン2つ(--)で連結することでBEMの各要素を表現しています。こうすることで、詳細度を低く保つことが出来きます。若干冗長な書き方になりますが、これはこれで便利です。こちらも、シングルクラス前提になってくるので@extendをつかって書くと相性が良さそうです。

ここまで3つの方法で見てきましたが、BEMはシングルクラスに適した構造・命名だと思っていて、逆に、マルチクラスにはOOCSSやSMACSSなどが向いているという印象です。この辺を加味してcssを設計していこうと思います。

参考;ぼくのかんがえたさいきょうのしーえしゅえしゅ
http://t32k.me/mol/log/the-perfect-css-i-thought/

大規模サイトにおける本当は怖いCSSの話

モダンなCSS設計パターンを考える

Thinking about CSS Architecture

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

今必要なCSSアーキテクチャ

まとめ

今回は、それぞれの設計思想について学びました。サイトの規模や係る人数によって設計思想を変えていけるようにそれぞれのいいところミックスして独自のルールを作っていこうと思います。その辺の話はまた今度ということで！