CSSでデザインをしていく際、「本当はうまくいくはずなのに、他では上手く逝ったのに、このサイトでは思ったように表示されない」など起こる事があります。実はこれ、CSS設計がきっちり成り立っていれば、起こりにくくなっていく現象だということはご存知でしょうか？

CSS設計に沿い書いていくことで、壊れにくくなり、どこでも対応しやすい状態をつくりあげることができます。まさに効率アップ！

そこで今回、CSS設計について個人的にまとめたものをアップしてみました。

[quads id=”1″]

そもそもCSSが壊れるってどういうこと？

CSSは、カスケード・スタイル・シートの略。カスケードとは階層になっている姿。Styleをかいたシートが、階層（カスケード）順に表示されていくことを示しています。ようは、最初にスタイルした項目の上に、どんどこスタイルが上乗せになっていく。この時、上乗せになるので、最後に書かれた内容が上書きされ適応されます。

そこでよく起こるのが
1.　スタイルを打ち消しを多用する
2.　親のスタイルが子に継承され消えない
3. 　上書きしたことで、全体構造に影響が出る
その結果、思ったように表示されない現象が現れます。

例えば、上で書いてあったスタイルの位置を、下に書いただけで崩れる。これも、カスケードとしてスタイルシートが成り立っているため、全体構造の順序が変わり崩れるわけです。

そこで生まれたのが、CSS設計という考え方

CSSは書きやすいけれど、崩れやすい。それならば、ルールを作ってしまおうではないかっ。そんな考えで生まれたのCSS設計。最初にルールを決めてしまおうと言うわけです。

最初にルール化ができれば、壊れる確率は少なからずとも減少します。また、わかりやすくなるため、問題が起こった際にも、直しやすくなります。

CSS設計のゴールを理解する

まず、CSS設計のゴール：目標を理解しましょう。

1. 予測しやすい
ルールが期待通りに振る舞うこと。ルールを追加・更新したとき、そのルールが意図せずサイトの一部に影響を与えない

2. 再利用しやすい（コンポネート化）
既存のパーツから新しいコンポーネントを速くつくることができる

3. 拡張しやすい
ひとりのデベロッパか、大きなエンジニアチームかを問わず、容易に管理・拡張できること。またそのサイトのCSSアーキテクチャに、巨大な学習曲線を必要することなく容易に近づけること。

4. 明瞭にであること
明瞭にわかる命名規則、スタイルガイド、設計であること

5. 保守しやすい
新しいコンポーネントと機能が追加・更新されるか、再編される必要があるとき、既存のCSSのリファクタリングを必要とすべきではない。

これらを見ても分かる通り、CSS設計が上手に組めたならば、そのスタイルを再利用＆拡張しやすくなり、保守もしやすくなるため、CSSが精錬されていくことにも繋がっていきます。（※同じ設計の中において）これはかなり、メリットが高いですよね。

大事なことは、楽しい「CSS設計＆管理」をしていくこと！

「自分以外の誰が見てもわかる」＋「CSSを編集することがあまりない」

  1. そんなノーストレス状態に至ったらどうでしょうか？素晴らしいですよね。
  3. どんなに多くの人が貢献したとしても、どのコードも一人で書いたようにする。
    同意の上のでのスタイルを厳格に守る。
    もし悩むようであれば常に現存する共通のパターンを利用する

そんなCSS設計を目指しましょう！

沢山あるCSS設計

それでは、CSS設計を考えていきましょう。実はCSS設計の考え方は幾つもあります。

BEM

BEMとは、「クラスを 3 つの概念に分けて命名」したもの

  • Block ⇒ 塊
  • Element ⇒ 要素
  • Modifier(kyeとvalueで表す) ⇒ 状態（変化）

で.article__title–type_primaryのような命名をし、記載する設計方法です。

クラス名などを見るだけで、どの部分の設定したスタイル化がはっきりとわかります。ただ、名前がかなり長くなるため、好みが分かれます。※主にシングルクラス志向

SMACSS

SMACSSは、5つのカテゴリにCSSを分類し、CSSをカテゴライズすることで『デザインの中で繰り返されるパターンを体系立てる』設計方法です。

  • 【カテゴリ】
    ベース　　：要素そのもののデフォルトスタイル
    レイアウト：ページをエリアごとに分割
    モジュール：再利用可能なパーツ
    ステート　：レイアウトやモジュールの特定の状態を示す
    テーマ　　：サイトのルック＆フィールを定義

OOCSS

Object Oriented CSSの略。オブジェクト指向を取り入れた設計です。

構造と見た目を分離し、コンテナと内容も分離して考えます。これにより、CSSクラスによる意味づけを行い、CSSにHTML要素を使わなくすることで、レイアウトとは独立されたオブジェクトとして捉え扱うことができるようになります。
※マルチクラス志向
※Bootstrapがこの設計方法で作られています。

SUITE CSS

SUIT CSSはコンポーネントベースのCSS設計手法。ReactやEmber、 AngularといったコンポーネントベースのUI設計と相性がよく扱いやすく作られています。

MCSS

BEMとOOCSSの原理をもとにした、Multilayer CSS構成設計のこと。

Foundation(基礎)→Base(モジュール、パーツ、ステート)→Project(画面構成、レイアウト)→Cosmetic(その他)という具合に、レイヤーの分け方が開発工程に近い。

FLOCSS

OOCSSやSMACSS、BEM、SuitCSSのコンセプトを取り入れた、モジュラーなアプローチのためのCSS構成案。ProjectレイヤーやUtilityレイヤーの存在など、現実の案件で起こりうる事柄が対処されている

APBCSS

Atomic Parts Base CSS。Atomic Designが ベースとなるように設計されており、構成の考え方もこれまでのものと逆で、細部化出来ないUIパーツから、定義していく。CSSに慣れていない方も取り組みやすいと言われている。

今、メインで使われているのはこれらのCSS設計ですが、他にも調べるとあるかと思います。

まず、どれかの設計を取り入れてみる。

いろいろCSS設計を紹介しましたが、それぞれの特徴も強く、理解するのには時間が多少かかります。そこでどれでもいいので、一つ。選んで取り入れてみましょう。そうすることで、考え方やCSS構成の仕方など理解が深まります。

自分の場合は、SMACSS設計を基本にしていたのですが、気づいたらOOCSS気味に。人により、BEM×OOCSSの方もいますし、それぞれのルールを決めて使えばOKです。ただし、他の方にもわかりやすいようにしましょう。

作業効率化・品質向上に繋がるCSS設計

最初、取り入れる際や設計を作るときには、かなりの手間がかかります。しかし、ある程度決まり、慣れてくるとその分、その後の更新作業で作業効率化・品質向上には繋がっていきます。

１週間かかってたものが、３日で。３日が１日で。１日が半日で。半日でが１時間で。みたいな流れができたりするんですね。またコンポネートして貯めていくことで、時間があるときに、そのコンポネートした一部分の品質アップも簡単にできてしまいます。

いろいろな案件ごとに、CSSのクラス名など違ったり、設計方法が違うものからスタイルを応用しようとして、エラーに悩むよりよりも遥かに効率的でしょう。※それでもその他の構成などでエラーは出る・・（汗）

参考にしたいスライド

CSSについて参考にしたスライドをごく一部ですがご紹介します。自分もかなり勉強になりました。


Sassで各CSS設計の記載をする

他、ALTCSSを利用されている方は、ALTCSSを利用した各設計の記載方法もありますので、下記を参考にしてみてください。

その他参考にしたい記事

参考にしたい本

その他、これらの本もかなり勉強になります！是非、お手元に置きながら設計してみてください。

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