【CSS】セレクタの優先度、保守性向上(BEM、OOCSS、SMACSS、FLOCSS、MCSS）

セレクタの優先度

!important

基本的には避けたい。複雑なシステムの場合はこれを使いがちになってしまいます。

インライン記述（style属性)

外部のCSSファイルで一元管理されることが望ましい。

IDセレクタ

1ファイルの中で一度しか使えない。基本的に使うことは避けることが推奨されています。（ただし、ヘッダーや、フッターなどページ内に一つしか存在しないことが確実に保証される要素に関しては使っても良いです。）

注意点

CSSのIDセレクタの使用は避けるべきですが、HTMLにid属性を持たせたりしてJavaScriptのフックとして使う分にはパフォーマンス観点でも利便性が高いので積極的に活用していくべきです。

クラスセレクタ・属性セレクタ・擬似クラス

1ファイルで何度利用されても問題ない。

要素セレクタ、擬似要素

要素セレクタはdivやh3などのことです。擬似要素は、::afterや::beforeなどのことです。

ユニバーサルセレクタ

*と指定して全ての要素に適用すること。初期スタイルをリセットする目的で使われていたりしましたが、現在はパフォーマンスの観点などからあまり使われません。

保守性向上

要素セレクタを使用せず、classセレクタを使う。

例えば、以下のような要素セレクタを使うようになっているとHTMLの構造が変わってしまうとCSSの書き換えが発生してしまいます。

classセレクタを使うようにしましょう。

取り消しのルールを作らないこと

二つのセレクタを適用するケースで、ある箇所で定義したセレクタの内容を別の箇所で取り消すような記述をしている場合があります。

取り消しではなく、追加するセレクタを作るようにしましょう。単純に記述量が減ります。

BEMを採用しているのであれば、Block単位でCSSファイルを分割すること

BEMのBlockがどういう単位なのかといえば、例えばアラートなどです。

ファイル名がBlock名を保証してくれますし、該当するファイルを探しやすくなります。

BEMとは？

CSSの命名規則に関する設計手法です。BEMはBlock、Element、modifierの略で、ページを構成する要素をオブジェクト、コンポーネントをこの三つの要素に分けて考える考え方です。多くのプロジェクトや、フレームワークでこの考え方が採用されています。

Block

アラートメッセージなどであれば、.alertというCSSがこれに該当します。

Element

Blockを構成する要素です。アラートであれば、.alert-titleや、alert-bodyなどが該当します。

命名規則

以下のように命名します。アンダースコア２つで区切ります。

なので、「.alert__title」のような命名になります。

Modifier

BlockまたはElementのバリエーションの違いの要素になります。バリエーションの違いとは、alertであれば、情報用、警告用、エラー用などのようなバリエーションのことです。

以下のように命名します。アンダースコア1つで区切ります。

例えば、「.alert_info」のような命名をします。

BEMのメリット

ElementとModifyのアンダーバーの数によって、マークアップを見れば、コンポーネントの機能（Modifier）や、構造（Element）が明らかになり、命名にユニークさが出るのでCSSの汚染リスクを低減することができるようになります。

個別のプロパティに関するテクニック

line-hgieht

絶対値(17pxとか)ではなく、font-size(1.5)に対する倍率を指定するようにする。そうすることでフォントサイズの指定が変わったとしても追従してくれるようになるため。

OOCSS(オブジェクト指向CSS)を使う。

スコープがグローバルになるためコンポーネント設計が難しいCSSに対してオブジェクト指向プログラミング の概念を取り入れたものです。

OOCSSの原則

分離が、再利用可能なコンポーネント（HTML、CSS、JavaScriptのセット）を設計する上で重要です。

構造と見た目の分離

コンポーネントの基本構造と、具体的なルール機能を分離することです。

例えば、アラートの部品があった場合に、warning、errorや、infoなどがありますが、基本的にどの骨格も変わりません。ただ、背景や文字色などは変えることが多いので、それらのCSSセレクタを分離します。

「class="alert-info"」としているのを「class="alert info"」などと分離します。

また、「alert」と「alert-info」などのような命名にすると良いです。なぜなら、「info」のようになっていると全く別の用途のCSSに汚染される可能性があるためです。

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

場所に依存しないセレクタを記述する。例えば、ヘッダーとフッターにロゴのcssスタイルが必要になった場合は、それぞれ分離してスタイルを記述するのではなく、.logoとするなど共通のスタイルとして記述するようにします。

SMACSS（スマックス）を使う。

ライブラリやフレームワークがあるというよりはCSSのベストプラクティス的なものです。OOCSSの思想がベースになっています。

カテゴライズ

パターンを抽出しやすくするためのカテゴライズを用意しています。

Base

ブラウザやプロジェクトにおける各要素のデフォルトスタイル。具体例をあげれば、reset.cssや、normalize.cssなどが該当します。

Layout

ヘッダーや、フッター、コンテンツエリア、サイドバーという構成の大枠。この粒度であればページ内に一つしか存在しないことがほぼ保証されるのでIDセレクタは使っても良いでしょう。

Module

Layoutのパターンを除いてページを構成するほぼ全てがこのカテゴリーに属します。ボタン、見出しなど。「m-*」や「mod-*」などの命名をしたりします。

State

JavaScriptによる制御などによって切り替わるような状態を表すルールを記述します。例：.is-hiddenや、.is-error、.is-activeなど。

基本的に状態を表すので、「is-*」という命名規則を使ったりします。

Theme

テーマを切り替えたりするような機能が求められるCSSの時に考慮する。

Stateよりも大きい粒度のスタイルになります。

FLOCSS(フロックス）を使う。

OOCSS、SMACSS、BEMの命名、MCSSのレイヤー設計などのアイディアを取り入れたコンセプト

原則

3つのレイヤーとObjectと呼ばれる子のレイヤーで構成されます。

Foundation

SMACSSのBaseや、MCSSのFoundationと同等。reset.cssなど。

Layout

ページの構成要素（ヘッダー、フッター、サイドバー、メインコンテンツエリアなど）

Object

基本的に全てをコンポーネントのように扱う。

Component

汎用性が高く再利用できるパターンとして小さい単位のコンポーネントを定義している。MCSSでいうところのBaseレイヤー。

最低限の機能を持ったものとして定義されるべきで、それ自体が固有の幅や、色などの特色を持つのは避けるべき。

Project

プロジェクト固有の要素。プロジェクト固有の記事一覧など。

Utility

わずかなスタイル調整のための便利クラス。MCSSのCosmeticレイヤーに近い。

命名規則

基本的にはBEMを採用している。

また、レイヤーのコンポーネントにはそれぞれ「c-*」、「p-*」、「u-*」とプレフィックスをつけることを推奨している。

MCSSとは？

OOCSSとBEMのコンセプトをもとに作られた新たなコンセプトです。「Multilayer CSS」の略です。

マルチレイヤーCSS

複数のレイヤー構成をもとにしてCSSを設計するアプローチをとっています。ルールに従えば、SMACSSなどと同じように特別なツールなどを用いることなく拡張性が高いCSSを記述することができるようになります。

Foundation（最下層）

SMACSSでいうところのBaseと同じと考えて良い。プロジェクトの土台としてreset.cssや、normalize.cssを用いた各要素の初期化を行う。

Base（二層）

SMACSSでいうところのModuleカテゴリに近いかもしれない。プロジェクトの各所で再利用できて抽象的である要素が該当する。他のプロジェクトでも再利用できるレベルで抽象化されている要素。例えば、ボタン、フォーム、ナビゲーションなど。

世の中でよく使われているBootstrapや、ReactのMaterial-UIなどもこの中に入ると考えて差し障りない。

例

• ボタン
• フォーム
• ナビゲーション

特徴

BaseレイヤーコンポーネントからBaseレイヤーコンポーネントは上書きできるが、BaseレイヤーコンポーネントからProjectレイヤーコンポーネントは上書きできません。

Project（三層）

Baseレイヤーコンポーネントより具体的なページ構成要素を含む。

例

• 登録フォーム
• ログインエリアのブロック

特徴

ProjectレイヤーコンポーネントからBaseレイヤーコンポーネントやProjectレイヤーコンポーネントは上書きできる。

Cosmetic（最上位層）

下層のレイヤーには含まれないようなスタイルが含まれている。

例

• リンクカラー
• 少数のプロパティで構成されるCSS(.margin-fLなど)
• グローバルなModifier

ユースケース

ほとんど他の部品と同じだが、このコンポーネントだけイレギュラーに画像が差し込まれるので、少しだけ余白を開けたい場合など。

特徴

Cosmeticレイヤー自身を含め、全てのレイヤーから上書きできない。（ただし、Contextレイヤーを除く）

Context（例外の層）

特定のブラウザや、デバイス向けや、ログイン中など特定条件下にある場合などに例外スタイルです。