css設計手法とは？cssコーディングの効率化・保守性アップ

こんにちは。もやし（@moyashi3333）です。

フリーランスとして、主にWeb制作・コーディング業をして生活しています。

上記の悩みを解決するには、CSS設計を取り入れるのがおすすめです。

本記事では、css設計の考え方をわかりやすく解説し、おすすめのcss設計である「FLOCSS」を紹介します。

css設計（FLOCSS）を導入すれば、メンテナンスしやすいcssを書くことができ、結果としてコーディングスピードも上がります。

css設計手法は、cssの書き方・管理方法におけるルールを設けること

「css設計」とは、どうすれば効率的にコーディングできるか、メンテナンスしやすい状態にしておけるのかを考慮した、css管理における指針・ルールのことです。

特にルールを設けずにcssを書いていると、「あれ、このスタイルどこに書いてたっけ…」だったり「なぜかスタイルが適用されない… !important 使っちゃおう」だったりとなり、ごちゃごちゃしたコード（メンテナンス性の低い）コードになりがちです。

こうした問題は、特にページ数の多いwebサイトだと顕著です。修正案件で、1つのstyle.cssファイルに何も考えずに書かれたcssといったものに当たると、涙が出るのはぼくだけではないはず。。

css設計を導入することで、cssの書き方・まとめ方に迷うことがなくなり、かつ、メンテナンスしやすい（＝保守性が高い）cssコーディングを行うことができます。

結果として、コーディングの効率化につながります。

css設計を取り入れる上でのポイント

css設計を取り入れる際は、基本的な3つの方向性があります。

1. 一定のルールに基づきクラス名を付与する（命名規則を設ける）
2. cssは必ずクラス指定で適用する
3. スタイルの適用先・役割に応じて、ファイル・ディレクトリを分ける

それぞれ解説していきます。

一定のルールに基づきクラス名を付与する（命名規則を設ける）

まず、クラス名に命名規則（ルール）を設けることで、クラス名を考える時間が削減できます。

クラスの命名規則としては、BEM（ベム）が有名です。今回紹介するFLOCSSも、BEMの考え方を取り入れています。

cssは必ずクラス指定で適用する

また、cssはクラス指定で行なってあげることで、スタイルの上書き問題が解消されます。

htmlタグやidを指定してしまうと、スタイルが上書きできない状態が発生し、無闇に !important を使うといったことになってしまいます。必ずクラス指定で適用するようにしましょう。

// 悪い例 ： htmlタグやidで指定
h1 {
  color: blue;
}
#hoge {
  color: blue;
} 

// 良い例 ： classで指定
.hoge {
  color: blue;
}

スタイルの適用先・役割に応じて、ファイル・ディレクトリを分ける

そして、スタイルの適用先や役割によって、ファイル・ディレクトリ（＝フォルダ）を分割してあげることで、どこに何のスタイルが指定してあるのかがわかりやすくなります。

例えば、一般的なwebサイトにはヘッダー・フッター・サイドバーという要素がありますね。

これらをひとつのcssファイル内で書くではなく、 header.css, footer.css, sidebar.css のようにファイルを分けて、各ファイル内でスタイルを書いてあげます。

そして、「layout」というディレクトリを作成し、その中に上記3つのファイルを入れるといったイメージです。

// 悪い例 ： ひとつのファイルに全てのスタイルを定義
- css
  - style.css

// 良い例 ： 適用先・役割ごとにディレクトリ・ファイルが分割されている
- css
  - layout
    - header.css
    - footer.css
    - sidebar.css
  - directory-name
    - filename.css

おすすめのcss設計手法は「FLOCSS」

css設計には複数の手法があります。

ぼくが実際に使っていておすすめなcss設計が「FLOCSS（フロックス）」です。

どこに何のスタイルが定義されているかパッと見でわかる点と、共通パーツのスタイルを再利用しやすい点が気に入っています。

FLOCSSにおけるディレクトリ構成

FLOCSSでは、スタイルの役割や適用先に応じて、以下のようなディレクトリ構成（レイヤー）に分けられます。

例えば、次のような構成になります（cssファイルではなく、scssファイルを想定）。あくまで一例です。

あとは @import を使って各ファイルをひとつのファイルで読み込み、cssにコンパイルすればOKです。

効率化のポイントは component で、同じスタイルが2-3回登場する場合は共通パーツ化してしまいましょう。

utility については、微妙なスタイル調整だけで良いのに、class名を設定してcss書くのが面倒だ…という時に有効です。
例えば、PCとスマホとで display: none; を切り替えるクラス、text-align の調整用クラスといった具合です。

.u-pc-none {
  display: block;
  @include mq(pc) {
    display: none;
  }
}

.u-sp-none {
  display: none;
  @include mq(pc) {
    display: block;
  }
}

FLOCSSにおけるクラス命名規則

基本的な命名規則はBEM（MindBEMding）に従います。 参考 HTML・CSSの設計にBEMを取り入れてみよう！Tech.Dig;   その上で、FLOCSSのどのディレクトリ（レイヤー）に該当するかによって、クラス名にプレフィックスを付けてあげます。

• .l-*：layoutパーツ。　例）l-hader, l-footer, l-sidebar
• .c-*：componentパーツ。　例）c-btn, c-title, c-post-card
• .p-*：projectパーツ。　例）p-mainvisual, p-posts, p-gallery
• .u-*：utilityパーツ。　例）u-sp-none, u-pc-none, u-ta-center

こうすれば、クラス名を見ればどこで定義されているか一目瞭然ですね。例えば、 .p-gallery というクラス名が付いていれば、 project ディレクトリ内の gallery.scss ファイルを見ればOKという感じです。 クラス名の付け方は、以下のような感じです。

<header class="l-header">
  <!-- headerのhtml -->
</header> 

<main class="l-main">
  <ul class="p-gallery">
    <li class="p-gallery__item">ギャラリー1</li>
    <li class="p-gallery__item">ギャラリー2</li>
    <li class="p-gallery__item">ギャラリー3</li>
  </ul>
</main>

<footer class="l-footer">
  <!-- footerのhtml -->
</footer>

【補足】cssを書く際は、Sassを使えるようになろう

css設計を取り入れる場合、Sassを使えないと効果が半減します。

Sassはcssを拡張した言語で、cssを効率的に・わかりやすく書くことができます。

cssを書ける人なら難しくありませんし、css設計を取り入れないにしても習得する価値は大いにあります。というより、コーダーなら必須といっても過言ではありません。

Progateでもコースがありますので、サクッと受講してみましょう。

CSS設計「FLOCSS」を使い、cssコーディングを効率化しよう

この記事のまとめです。

本記事に関する質問等ありましたら、Twitterやお問い合わせフォームからお気軽にどうぞ。