破綻しにくい CSS 設計手法と命名規則

セレクタに詳細度がある問題

CSS には "詳細度" (優先順位) が存在するため、詳細度がもっとも高いスタイルが優先されます。

/* CSS側 */
#foo{ color: red; }
.bar{ color: blue; }

<!-- HTML側 -->
<p id="foo" class="bar">
ここの文字は何色でしょう？
</p>

上記の例では、#foo が優先されるため文字は赤色になります。各セレクタの詳細度が整理されていない場合、より詳細度の高い定義が優先され、詳細度の低い定義が上書きされます。正しい設計としてはスタイルの上書きをしないことが望ましいのですが、適用済みのスタイルを変更することで他の要素にも影響がでるため、仕方なくスタイルの上書きをすることがあります。このように上書きを何回も重ねることによって、古いスタイルが変更できなくなり破綻することになります。

スタイルが子要素に継承される問題

スタイルには HTML 側の子要素にまで継承するため、DOM (Document Object Model) ツリーの上位の要素にスタイルを適用すると、下位の要素で上書きを余儀なくされ破綻してしまいます。

/* CSS側 */
body{ font-size: 16px; }
section p{ font-size: 12px; }

<!-- HTML側 -->
<section>
  <p>すべての文字が16pxになるので12pxで上書きしなきゃ...</p>
</section>

上位の要素に多くのスタイルが適用されている場合、下位の要素になるほど多くの影響を受けます。また、DOM ツリーの構成が整理されていない場合、継承されるスタイルが一意に決まらないため、多くのスタイルを上書きすることになります。

同じセレクタを多重定義できる問題

CSS の仕様では、同じセレクタを多重定義してもエラーになりません。

/* CSS側 */
.bkcolor{ background-color: black; }
.bkcolor{ background-color: white; }

CSS の定義が多くなると、同じセレクタを多重定義してしまう場合があります。多重定義しやすいケースとしては、別ファイルで同じセレクタを多重定義してしまう場合や、行数が多い CSS ファイルの中で多重定義してしまうなどです。セレクタが汎用的な名前であれば、多重定義のリスクは高まります。

スタイルが複合的に適用される問題

HTML の各要素はスタイルを複合的に受け入れます。スタイルが合成された場合、最終的にどのようなスタイルになるのか予測は困難になります。

/* CSS側 */
.cls1{ font-size: 16px; }
.cls2{ font-color: red; }
.cls3{ font-weight: bold; }

<!-- HTML側 -->
<p class="cls1 cls2 cls3">スタイルが合成された文字</p>

スタイルを複合的に適用する場合、各スタイルを厳密に管理しなければ組み合わせをコントロールできません。

構造と見た目の分離

OOCSS では、"構造と見た目を分離する" という重要な考え方があります。構造と見た目を分離していない CSS の例としては以下のようなものがあります。

/* CSS側 */
#boxA{
  width: 50px;
  height: 50px;
  border: 1px solid #333;
  background-color: black;
}
#boxB{
  width: 50px;
  height: 50px;
  border: 1px solid #ccc;
  background-color: white;
}

<!-- HTML側 -->
<div id="boxA"></div>
<div id="boxB"></div>

上記の例では OOCSS として 3 つの NG があります。

• id を使うとスタイルの使い回しができない
• 構造を定義するスタイルが重複している
• CSS が煩雑になりメンテナンス性とパフォーマンスが下がる

上記の例を、構造と見た目を分離した例で書き直すと以下のようになります。

/* CSS側 */
.box{
  width: 50px;
  height: 50px;
}
.box-black{
  border: 1px solid #333;
  background-color: black;
}
.box-white{
  border: 1px solid #ccc;
  background-color: white;
}

<!-- HTML側 -->
<div class="box box-black"></div>
<div class="box box-white"></div>

上記のように構造と見た目を分離することに成功できれば、メンテナンス性とパフォーマンスの向上が見込めます。しかし、簡単そうに見えても正しく OOCSS で設計を行う場合、高度な設計技術が求められます。

OOCSS の設計を難しくしている原因は、"構造" と "見た目" をどのように分離するか明確にしなければならない点です。例えば、width や height は構造に分類されますが、border はどちらに分類されるでしょうか？ 厳密には border は構造と見た目をまとめて定義できるため、どちらにも分類することはできません。細分化されたプロパティとして border-width は構造に分類され、border-color は見た目に分類されます。構造と見た目をまとめて定義できるプロパティを OOCSS で扱う場合には注意が必要です。

OOCSS で設計を行う上で、もうひとつ重要な点があります。それは OOCSS の設計の前に、サイト全体の設計を行い、構造と見た目のパターンを決めておくことです。つまり、サイトを組み立てる前に、必要な "レゴブロック" を洗い出して構造と見た目をすべて整理しておきます。組み立てる作業はレゴブロックを揃えてからになります。組み立てながら必要なレゴブロックを定義する方法では、手戻りの発生や今後のメンテナンスに重大な影響を与える可能性があります。

ベースルール

ベースルールは、要素のデフォルトとなるスタイルを定義します。ベースルールの最大の特徴は、要素に対してスタイルを定義するため、id や class を使用しないことです。

body {
  background: white;
}
a:link {
  color: blue;
}

ベースルールを定義する上で注意しなければならないことは、各要素に対して多くのスタイルを定義しないことです。なぜなら、多くのスタイルを定義してしまうと、後から追加するモジュールに対してスタイルを上書きするリスクを上げてしまうためです。

ベースルールは各要素の構造や見た目を整えるため "normalize.css" や "reset.css" と本質的には同じです。各要素を初期化する CSS とベースルールを併用する場合は、重複定義に注意しましょう。

各要素を初期化する CSS には全称セレクタが使われていたり、使われていない要素への定義が含まれていたりします。その結果、予期しないスタイルが適用される可能性があるため、安易にベースルールと併用するべきではありません。

レイアウトルール

レイアウトルールは、ページを各セクションのエリアに分けるための定義を行います。

.layout-header{
  margin-top: 20px;
}
.layout-main{
  width: 80%;
}
.layout-sub{
  width: 20%;
}
.layout-footer{
  margin-bottom: 20px;
}

ページを分けるセクションとしては、ヘッダー、メイン、フッターが代表的です。その他にもサブメニュー、ナビゲーション、各パーツを配置するエリアなどがあります。

レイアウトルールをクラス名で管理する場合、"layout-" や "l-" などのプレフィックスを付けると明確に区別できます。"layout-" や "l-" のプレフィックスは公式で紹介されている方法ですが、どのような文字列でも構いません。特に大規模なプロジェクトではコーディング規約に命名規則が定められている場合が多いため、プロジェクトのルールに従った名前にしましょう。

また、レイアウトルールの相対幅、固定幅の管理方法として子孫セレクタを使って分岐させる方法もあります。"fixed" がクラス名についている場合は px 指定、そうでない場合は % 指定となります。

.layout-main {
  width: 80%;
}
.layout-fixed .layout-main {
  width: 600px;
}

ヘッダーやフッターなどの主要なレイアウトでは、慣習的に id セレクタが使われます。しかし、SMACSS では class セレクタが使われており、id セレクタは使用していません。id セレクタの使用が禁止されているわけではありませんが、id セレクタを使う場合、以下の点に注意する必要があります。

• id セレクタは CSS の詳細度を高めるため、複雑化するリスクを招きやすい
• id セレクタを利用すると、スタイルの上書きが難しくなる
• id セレクタは同一ページで複数の要素に指定できないため、柔軟性を失う

モジュールルール

モジュールルールは、ロゴ、ナビゲーション、タブなどのページを構成するすべてのパーツに対してスタイルを定義するルールです。各パーツはページのどこに配置しても再利用できるようにスタイルを独立させておく必要があります。スタイルを独立させるための命名規則として、親モジュールの名前をプレフィックスとして利用します。

<div class="item">
  <p class="item-text"></p>
</div>

ただし、同じ要素であっても配置場所が異なる場合、親要素による分岐を行うべきではありません。なぜなら、親要素による分岐を行った場合、配置場所が変わるとスタイルが崩れるためです。

<!-- NG -->
<div class="layout-main">
  <p class="item"></p>
</div>

<div class="layout-sub">
  <p class="item"></p>
</div>


<!-- OK -->
<div class="layout-main">
  <p class="item"></p>
</div>

<div class="layout-sub">
  <p class="item item-red"></p>
</div>

ステートルール

ステートルールは、特定の状態によってスタイルを上書きするルールです。通常の状態では使用されず、javascript などで状態の切り替えが発生した場合に用いられます。状態の切り替えとは、モジュールの表示・非表示、正常・異常、オン・オフなどを指します。

.is-disable{
  ...
}
.is-current{
  ...
}
.is-active{
  ...
}

ステートルールでは、プレフィックスとして "is-" が使われます。ステートルールのクラス名には、固有のモジュール名を付与するとスタイルの競合を避けることができます。

テーマルール

テーマルールは、見た目に関するスタイルを定義するルールです。プレフィックスとして "theme-" が使われます。

.theme-font {
  color: #333;
}
.theme-background {
  background-color: #fff;
}

Foundation レイヤー

Foundation レイヤーは reset.css や normalize.css などのスタイルの初期化や、SMACSS のベースルールで扱うデフォルトのスタイルを定義します。ページの背景や、フォントの設定などを Foundation レイヤーで定義します。

Layout レイヤー

Layout レイヤーはページを構成するヘッダーやフッター、メインコンテンツ、サイドバーなど共通で使用されるエリアのスタイルを定義します。これは SMACSS のレイアウトルールの考え方が取り入れられています。各エリアは基本的にページ単位でユニークになるため id セレクタを使用することも可能です。ただし、id セレクタは詳細度が高くなるため、使用する場合はセレクタ名にプレフィックスをつけるか、属性セレクタを用いることが推奨されています。

Object レイヤー

Object レイヤーは OOCSS の考え方が取り入れられており、サイト内で再利用されるデザインのパターンをすべて "Object" と定義します。

.p-boxA {
    width: 100px;
    height: 100px;
    color: #ff0000;
}
.p-boxB {
    width: 200px;
    height: 200px;
    color: #00ff00;
}

禁止・非推奨・許容・推奨

FLOCSS で禁止とされているルールは以下の通りです。

• 状態を表す is- から始まるセレクタにスタイルを定義すること
• 同一レイヤー内におけるモジュール間のカスケーディング
• モジュール間の Extend
• レイヤーの順序を前後させる

FLOCSS で非推奨とされているルールは以下の通りです。

• Layout レイヤー以外の要素で id セレクタを使う

FLOCSS で許容とされているルールは以下の通りです。

• 異なるレイヤー間でのモジュールのカスケーディング
• モジュール内のカスケーディング
• モジュール内の Extend
• is- プレフィックスをもつクラスを使う
• 隣接セレクタ、疑似クラスの使用

/* CSS側 */
.c-tabs {
  display: table;
  table-layout: fixed;
}
.c-tab {
  display: table-cell;
}
.c-tab > a { // Use Descendant selector
  display: block;
}

<!-- HTML側 -->
<ul class="c-tabs">
  <li class="c-tab">
    <a>Tab A</a>
  </li>
  <li class="c-tab">
    <a>Tab B</a>
  </li>
  <li class="c-tab">
    <a>Tab C</a>
  </li>
</ul>

FLOCSS で推奨とされているルールは以下の通りです。

• MindBEMding に則った命名を行う
• Object にプレフィックスをつける
• モジュール単位でファイルを分割する

├── foundation
│   ├── _base.scss
│   └── _reset.scss
├── layout
│   ├── _footer.scss
│   ├── _header.scss
│   ├── _main.scss
└── object
    ├── component
    │   ├── _button.scss
    │   ├── _dialog.scss
    ├── project
    │   ├── _articles.scss
    │   ├── _gallery.scss
    │   └── _profile.scss
    └── utility
        ├── _clearfix.scss
        ├── _margin.scss
        ├── _position.scss
        ├── _size.scss