CSS設計手法の違いをHTML初心者向けにわかりやすく解説！

HTMLを学ぶのであれば、CSSも学ぶ必要があります。しかし、CSSは、サイトの規模が大きく、チームの人数が増えるほど、管理が難しくなります。そんなときに重宝されるのがCSS設計手法です。CSS設計手法を学び、運営しやすいサイト制作を目指しましょう。

HTMLとCSSの設計手法とは

企業が運営する大規模Webサイトでは、サイトのちょっとした修正は日常的に行われています。しかし、場当たり的な設計で作られたサイトだと、ちょっとしたHTMLの修正だけでいいはずが、関連するCSSに大幅な仕様変更が必要になる場合があります。

こういった事態を防ぐのがCSS設計手法です。
CSS設計とは、CSSを記述する時のルールのことです。まずは、CSS設計手法を使うメリットを紹介します。

• メンテナンス性が向上する
• 大規模Webサイトでも整ったコードを書ける
• 複数人でのコーディングができる

CSS設計手法では、各手法のディレクトリ構成や命名規則などのルールに従います。これにより、HTMLとCSSの依存性が減り、余計な修正は不要になります。また、大規模サイトであろうと、複数人での開発であろうと、誰が読んでも理解できるコードを維持できます。
ちなみに、CSS設計手法には、いくつかの種類があり、各プロジェクトに適したCSS設計手法を使うことで、効率の良いサイト制作ができるようになります。また、命名規則はBEMで、構成はSMACCSを採用するなど、ハイブリッドな設計手法を採用する企業もあります。

CSS設計手法1：BEM

BEMは、わかりやすい命名規則が人気のCSS設計手法です。
BEMとは、「Block Element Modifier」の略で、WebサイトのUIをBlock、Blockに含まれている要素をElement、BlockやElementの装飾や動作をModifierとして扱う考え方のCSS設計手法です。

BEMでは、次の命名規則でクラス名が決められます。

element を「__（アンダースコア2つ）」、modifier を「–（ハイフン2つ）」でつなげることで各要素を見分けることができます。
BEMの表記方法は、見た目に抵抗を感じる人が多いです。しかし、見た目の美しさを気にせず、わかりやすさを重視した場合、BEMは非常に優れたCSS設計手法であるといえます。

CSS設計手法2：OOCSS

OOCSSとは、「Object Oriented CSS」の略で、その名の通りオブジェクト指向を取り入れたCSS設計手法のことです。
OOCSSで重要とされているのが、「構造と見た目の分離」という考え方です。つまり、CSSでクラスを作る際には、構造に関するクラスと見た目に関するクラスに分けて記述します。
例として、構造と見た目を分離していないCSSの例を紹介します。

次に、構造と見た目を分離したOOCSSの考えに則った例を紹介します。

上記のようにOOCSSで記述した場合、メンテナンス性とパフォーマンス性が向上します。特にWebサイトやプロジェクトの規模が大きいほど重宝される設計手法です。

CSS設計手法3：SMACSS

SMACSSとは、「Scalable and Modular Architecture for CSS」の略で、CSSを5つに分類して記述するCSS設計手法です。SMACSSで分類されるルールは次の通りです。

• ベース：サイト全体に影響するもの
• レイアウト：ページのレイアウト指定（ヘッダー、フッターなど）
• モジュール：再利用可能なパーツのこと
• ステート：状態によって見た目が変化するもの
• テーマ：テーマごとのスタイルのこと

基本的には、上記の5つのフォルダを作成し、各フォルダにCSSファイルを保存していきます。この5つの分類は、感覚的にわかりやすいので、CSS設計に労力をかけたくない人に、おすすめです。

CSS設計手法4：MCSS

MCSSとは、「Multilayer CSS」の略で、BEMとOOCSSを基にしたCSS設計手法です。
MCSSでは、CSSモジュールを次の3つレイヤーに分類します。

• Base：再利用できる通常のスタイル
• Project：Baseを基準としたプロジェクト別のスタイル
• Cosmetic：装飾に関するスタイル

Base、Project、Cosmeticに分類された各CSSモジュールを、HTMLから複数指定して、サイトに出力します。

CSS設計手法5：FLOCSS

FLOCSSは、OOCSS、SMACSS、BEM、MCSSなどの考え方を取り入れた、ハイブリッドなCSS設計手法です。
FLOCSSでは、「Foundation」「Layout」「Object」の3つのレイヤーに分類され、さらにObjectレイヤーの子レイヤーとして、「Component」「Project」「Utility」の3つに分類されます。そして、命名規則は、BEMのルールを採用しています。

• Foundation：デフォルトのスタイル
• Layout：ページのレイアウトスタイル（ヘッダー、フッターなど）
• Object：繰り返し使われるビジュアルパターン
• Component：再利用できるモジュール
• Project：プロジェクト別のスタイル
• Utility：装飾に関するスタイル

FLOCSSは、各CSS設計手法のいいとこ取りともいえます。ただし、それなりの知識が必要なので、サイト制作初心者などが加わるプロジェクトであれば、理解するには時間がかかるかもしれません。

まとめ

いかがでしたでしょうか？
HTMLを学ぶ上で知っておくべき、CSS設計手法について紹介してきました。各CSS設計手法には、それぞれ違いがありますが全ての手法で、将来的なメンテナンス性を向上させることができます。あとは、サイトの規模やチームの人数などに合わせてCSS設計手法を選ぶのがベストです。
そのためにも、各CSS設計手法の違いをもう一度しっかりと理解しておくようにしましょう。