インソースマーケティングデザイン
2016.05.31 コーディング
CSS設計を学ぼう
マリンロードスタッフブログをご覧いただいている皆様、こんにちは。
フロントエンドエンジニアの虎澤です。
やっと春がきたなーと思ったらもう5月も終わりで、間も無く梅雨を経て夏がやってきますね。
私は夏生まれですが夏に弱いです。
暑いの苦手なのでクーラーの効いたお部屋でぐったりしてます。
あ、でも夕方頃の、ひぐらしが鳴いてる感じとか…あの風情はとても好きです。
今年は浴衣を着て夏祭りとか行ってみたいですね。
年齢的に浴衣はハードル高そうですけどね…。あーぁ。
CSS設計を学ぶ！
前回は新しいスマートフォン向けコーディングの手法についてご紹介しました。
そこでちらっと触れた、「CSS設計」というものを今回はちらっとご紹介してみようかと思います。
おそらく、昨今のフロントエンド業務においてはこの「CSS設計」の知識の有無は重要です。
サイト制作にあたってCSSを使わないFEさんは皆無だと思いますが、全員がCSS設計を取り入れているかどうかと言われれば、きっとそうではないでしょう。
詳しいデータは分かりませんが、まだまだ普及率は低いのかな、という認識です。
そもそもCSS設計って何？
「CSS設計」とは、運用後のメンテナンスなどを考慮して、CSSの命名規則や組み方などを計画することや、その設計図そのもののことです。
サイト制作にあたる時、CSSを「そのページのデザイン・HTML構造だけに合わせて」組んでたりしませんか？
デザイン通りにコーディングをし、結果的にデザイン通りになればそれはそれで正解です。
ですが、サイトというものは可変が容易です。
制作段階にしろ、運用段階にしろ、今まで白背景だったものが突然黒背景になったり、新しい要素を入れこまなければいけなくなったり、逆に削除しなければいけなくなったり、なんてことがいくらでも起こり得ます。
そうなった時、先述の通り「そのページのデザイン・HTML構造だけに合わせて」CSSを組んでいると、すでに組んでいるスタイルを打ち消してから新しいスタイルを記述しなければいけなくなったりします。
少しのメンテナンスでもコードが大量に増えていってしまい、後からまたメンテナンスをする際にとても作業しにくいCSSになってしまうんです。
これを避けるために、「CSS設計」という概念があるわけですね。
4つのゴールを目指す
CSSを組む際は、下記の4つが満たせるように設計を行います。（下記一部Philip Walton氏『CSS Architecture』より引用）
最初に作ったルールにルールを追加した場合、組み方によっては意図しない部分にまでそのルールが影響を及ぼすことがあります。作ったルールがサイトにどのような影響を与えるのか、きちんと予測できるCSSを組めることがひとつのゴールとなります。
②再利用しやすい
同じサイトで同じパーツが複数のページに登場することはよくあります。これをそのページ、要素毎に作っていたら、CSSの量は膨大になってしまいます。
共通である部分を抜き出し、パーツ化していくことで、同じUIが出てきた時にスタイルを再利用しやすくなります。無駄なCSSの記述が減ります。
③保守しやすい
既存のルールにルールを追加する時、わずかなスタイルの追加で既存のルールに影響を与えてしまうことはよくありません。
個々のルールが独立したものとして存在し、その各ルールに対してだけメンテナンスを行えるかたちが理想です。
④拡張しやすい
サイト制作にあたった作業者が一生そのサイトのメンテナンスをしていくわけではありません。
その作業者以外の人間がメンテナンスに入ることは十分にあり得ます。
そうなった時、各ルールに対して容易にメンテナンス・管理できるかはとても重要です。
また、作業者全員がCSSを組んだ者と同じ知識レベルであることはないかと思います。他の作業者が深く学習しなくても調整に困らないCSSを組むことも重要です。
CSS設計の種類
CSS設計と一口に言っても、結構色々な種類があったりします。ベースの設計方法があって、その設計を派生させた設計方法などもあったりします。
OOCSS、SMACSS、BEM、FLOCSSが基本のCSS設計となり、派生系としてMCSSやSUIT CSSなどが存在します。
私がよく利用するのがSUIT CSSです。
BEMベースのCSS設計で、加えて汎用クラスを利用したり、キャメルケースを採用していたりなどの特徴があります。
CSS設計の具体例：SUIT CSS
では、実際にSUIT CSSを採用して組んだ簡単なHTMLをご紹介します。
■HTML
■CSS
ベースは下記の3つから構成します。
Element：Blockに所属する子要素。必ずBlockの中にいる。命名規則→Block名の後にハイフンひとつをつけたうえ、任意のElement名称を付加する。単語の区切りがある場合は区切り文字の先頭を大文字にする（例：Button-list）
Modifier：BlockまたはElementから派生した要素。兄弟。命名規則→Block名またはElement名の後にハイフンふたつをつけたうえ、任意の名称を付加する。単語の区切りがある場合は区切り文字の先頭を大文字にする（例：Button-list-li--blue）
Block、Elementに固有の基本スタイルをあて、Modifierにその派生系（基本スタイルの色違いなど）となるスタイルをあてます。
上記に加え、UtilityクラスとStateクラスを利用します。
State：JSによってスタイルが変わる時などに使う。命名規則→クラス名の頭に「is-」もしくは「js-」を付加する。（例：is-matchHeight）
最近はdisplay:inline-block;を使って横並びを表現することが多いのですが、これらの「よく繰り返し使う汎用スタイル」をUtilityとして定義しておきます。
上記のサンプルコードでいうと、
u-divAreaとu-divArea-divのセットがそうですね。
横並びにさせたい要素毎にu-divArea-divをあて、その要素群の親に対してu-divAreaをあてることで横並びを実現します。
ボタンのカラーや大きさは、別のルールで設定されているので、もしここでu-divAreaとu-divArea-divクラスをタグから削除しても、横並びが反映されないだけで、他のスタイルには影響を及ぼしません。
ボタンの矢印装飾スタイルである、「u-chevLeft」も同様です。このクラスを消すと矢印が消えるだけで、他には影響を及ぼしません。
まとめ
上記に挙げたSUIT CSSはCSS設計の一部で、各設計によってルールなどが変わってきます。
まずはプロジェクトの内容、ボリュームなどを考慮してどの設計を採用するかをきちんと考えることもフロントエンドの仕事になりますね。
SUIT CSS以外の設計に関してはまだまだ知識も未熟なので、これからどんどん他の設計についても勉強していこうと思います。
以上、虎澤でした。
