ホームページ制作等のお問い合わせはこちら

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

coding

こんにちは。もやし(@moyashi3333)です。

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

コーディング中の悩み
  • web制作のコーディングができるようになったけど、cssがごちゃごちゃしていて管理しづらい。
  • いつもcssの書き方・まとめ方で迷っている。
  • cssの上書きに !important を使いまくり、よくわからなくなっている。

上記の悩みを解決するには、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の考え方を取り入れています。

参考 HTML・CSSの設計にBEMを取り入れてみよう!Tech.Dig; 参考 予想以上に実用的!CSSを効率的にマークアップする概念「BEM」とは?ferret

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  • Foundation:ベースとなる基本設定など。reset.cssやbodyタグ、色の設定等。
  • Layout:一般的なレイアウトパーツ。ヘッダーやフッター。
  • Component:再利用できる共通パーツ。
  • Project:各ページに固有のもの。
  • Utility:微妙なスタイル調整に使えるもの。
  • (Plugins:外部プラグインのスタイル編集用)

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

flocss1

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

flocss2

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

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

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という感じです。

クラス名の付け方は、以下のような感じです。

 

参考 FLOCSSGithub 参考 FLOCSSで始めるCSS設計to-R Media

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

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

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

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

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

参考 SassProgate

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

この記事のまとめです。

  • css設計手法とは、効率的でメンテナンスしやすい(保守性の高い)cssを書く方法・ルールのこと。導入すれば、コーディングスピードが上がる。
  • 3つのポイント:クラス名の命名規則を設けること、cssはクラス指定で適用すること、スタイルの適用先や役割に応じてファイル・ディレクトリを分割すること。
  • おすすめのcss設計はFLOCSS(フロックス)。
  • 今後cssを書く際は、Sassを使っていくべき。

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