初心者向けCSS設計について

はじめに

CSSを書いていく中で、どうやったらより少ない記述で、自分以外の人にもわかりやすいCSSを書くことができるだろうかということについて悩むことが多くなりました。
調べていく中でCSS設計について、たくさんの開発者がいろいろな手法を考えだしているということを知りました。
この記事では、そんなCSS設計の手法をいくつかご紹介します。

よいCSSとは

まず、様々なCSS設計の手法を紹介する前に、よいCSSとはどういったものかということについてふれたいと思います。
次に紹介する4つを満たしていれば、よい設計のCSSであるということができるといわれています（※1）。

1.予測しやすい

クラス名を見るだけである程度どのようなものなのかイメージでき、記述したルールがきちんと予測通りに振る舞うこと。

2.再利用しやすい

同じパーツが複数個所で必要となった際、再利用できること。

3.保守しやすい

先に書いたルールの影響で、記述した通りの振る舞いにならなかったり、新しくルールを追加・更新することによって、既存のルールを破壊してしまったりしないようにすること。

4.拡張しやすい

共通のルールを定めたり、案件に関わる開発者のだれもが分かりやすい形式を採用したりすることで、メンテナンスや管理がしやすいものにすること。また、サイトの規模が大きく複雑になるにつれ、拡張しやすい設計であること。

CSS設計手法3選

これらの特徴を実現するために様々なCSS設計手法が考え出されました。その中で代表的な3つをご紹介します。

1.OOCSS（Object Oriented CSS、オブジェクト指向CSS）

＜OOCSSの原則＞

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

構造と見た目の分離

構造に関する記述と見た目に関する記述を分離して、それぞれ別のクラス内に記述するという考え方です（※1）。

▼記述例

      <div class="btn contact">お問い合わせ</div>
      <div class="btn info">採用情報</div>
      <div class="btn faq">よくある質問</div>
    

      /* 構造に関する記述 */
      .btn {
        font-size: 16px;
        padding: 10px;
        border: 2px solid;
        border-radius: 5px;
        margin: 20px auto;
        width: 200px;
        text-align: center;
      }


      /* 見た目に関する記述 */
      .contact {
        border-color: blue;
        background-color: skyblue;
      }

      .info {
        border-color: red;
        background-color: pink;
      }

      .faq {
        border-color: orange;
        background-color: yellow;
      }
    

このように記述すれば、仮にボタンの構造が変わったとしても.btnを変更するだけで済むため、変更漏れを防ぐことができます（※1）。
また、別の見た目のボタンの追加が発生したとしてもCSSの記述はわずかでよく、拡張がしやすくなります（※1）。

コンテナーとコンテンツを分離

場所に依存しないセレクターを書くということです。
例えば、メインコンテンツ内にあるボタンをヘッダー部分にも大きさだけ変えて追加したいとします。

▼記述例

      <div class="btn small-btn">ボタン</div>
    

      .btn {
        font-size: 16px;
        padding: 10px;
        border: 2px solid;
        border-radius: 6px;
        margin: 20px auto;
        width: 200px;
        text-align: center;
      }

      /* 場所に依存していない書き方 */
      .small-btn {
        font-size: 8px;
        padding: 5px;
        border: 1px solid;
        border-radius: 3px;
        width: 100px;
      }

      /* 場所に依存した書き方 */
      /* #header .btn  {
        font-size: 8px;
        padding: 5px;
        border: 1px solid;
        border-radius: 3px;
        width: 100px;
      }  */
    

このように場所に依存しない記述をすることによって、新たに別の場所にヘッダーと同じボタンの追加が発生したとしても、再利用が可能です。

ただ、OOCSSの欠点として、同じ見た目で違う構造の部品を拡張し続けるなどしていると、スタイルの影響範囲がどこまでだったか分かりづらくなってしまうこともあるのではないかと思いました。

2.SMACSS（スマックス）

以下の５つのカテゴリーを軸にCSSのルールを記述していく手法です（※1）。

Base

要素そのものに対してデフォルトのスタイルを定義します。このカテゴリーで定義したものは、よほどのことがない限り書き換えることはないです。

▼記述例

      html {
        font-family: Arial, Helvetica, sans-serif;
        line-height: 1.5;
      }

      body {
        background-color: white;
      }

      ul {
        list-style: none;
      }
    

Layout

ヘッダー、フッター、コンテンツエリア、サイドバーというようなサイトを構成する大枠の要素に対して定義します。このとき、クラス名の頭に『l-』や『layout-』という接頭辞をつけます。

▼記述例

      .l-main {
        background-color: gold;
      }

      .l-footer {
        background-color: gray;
      }
    

Module

ボタンや見出し、リンク、表など再利用できるパーツに対して定義します。ほとんどがこのカテゴリーに属しているため特に接頭辞をつけることは推奨されているわけではないですが、『m-』『mod-』といった接頭辞をつけても構わないです。

State

JavaScriptなどによる制御によって、変化する状態を表すときこのカテゴリーに分類します。このような場合、『is-』という接頭辞をつけます。
メディアクエリもこのStateに属するCSSです。

▼記述例

      .is-hidden {
        display: none;
      }
    

Theme

サイト全体の雰囲気に関わるスタイル（テーマ）を切り替えたりするときに考慮するカテゴリーで、接頭辞に『theme-』をつけたクラス名を付与します。

SMACSSは一定のメンテナンス性を担保できることがメリットですが、ルールの共有をしておく必要があります（※2）。

3.BEM（ベム）

特徴的な命名規則を持つ手法で、保守性に優れていることから広くこの命名規則が使われています（※3）。

• Block：大枠となる独立した要素
• Element：Blockの中の要素
• Modifier：BlockやElementのバリエーションの違い

BEMの命名規則は以下になります。

      class="block__element--modifier"
    

• BlockとElementをアンダースコア２つ__で区切る
• ElementとModifierはハイフン２つ–で区切る

▼記述例

      <ul class="feature">
        <li class="feature__list">
          <p class="feature__list--red">赤文字</p>
        </li>
        <li class="feature__list">
          <p class="feature__list--blue">青文字</p>
        </li>
      </ul>
    

BEMはクラス名を見ただけでどの要素がどういう状態か予測しやすく、また、細かくクラス名を指定しているためスタイルの影響範囲が小さいのがメリットですが、クラス名が長くCSSを書くのが大変になってしまうというデメリットもあります（※2）。

まとめ

CSSがグローバルスコープであるというところから起きる問題に対して様々なアプローチがなされているということを知り、CSS設計は奥が深いんだなと感じました。
他にもFLOCSSやMCSS、tailwindcssなど様々な設計手法がありますが、どの手法も、メリットデメリットがあり、案件によって最適な方法で記述していく必要があると思います。

今回、CSS設計について学んでみて、CSSがごちゃごちゃになりがちだった私にとって、とても為になりました。

この記事の内容が、皆さんのお役に少しでも立てると幸いです。

最後まで読んでいただきありがとうございました。

参考

（※1）谷 拓樹. css設計の教科書. 株式会社インプレス. 2014
https://book.impress.co.jp/books/1113101128

（※2）css設計・命名規則の歴史(BEM・OOCSS・SMACSS・FLOCSS・tailwindcss)
https://www.northdetail.co.jp/blog/1953/

（※3）【命名規則】BEMを使った書き方についてまとめてみた【CSS】
https://qiita.com/takahirocook/items/01fd723b934e3b38cbbc

すべて最終閲覧日2023年3月3日