LogoMark.png

CSS/CodingRule

CSS|CodingRule

CSS を体系的・効率的に書くためのメソッド

はじめに

CSSの設計には、OOCSS, BEM, SMACSS, FLOCSS といったメソッド(手法)が存在します。チームで仕事をする際には(ひとりプロジェクトでも)、CSS が一定のルールに基づいて設計されていることが重要で、これが作業の効率化やメンテナンス性の良さに直結します。一般に以下の4点に配慮した設計が必要であると言われます。


CSS が抱える問題

CSS の書式は、セレクタ(HTML上のターゲット)に対して、実現したいスタイルを羅列するだけ・・というシンプルな仕組みなので、他の言語に比べると使うこと自体は簡単なのですが、大規模なサイトのデザインでコードの行数が増えてくると、とたんに混乱が生じます。ここではまず、CSSのコーディングが抱える問題をタイプ別に確認します。


多重定義の問題

CSS のコーディングでは、同じセレクタに対して多重にスタイルを定義することができます。逆にいうと多重に定義してもエラーとしてはじかれることがないので問題点を発見しにくい・・という問題を孕みます。

.sampleArea { background-color: black; }
 :
.sampleArea { background-color: red; }

この性質は、コードの末尾に「追加のCSSを加えて調整する(上書きする)」といったかたちで積極的に利用される場合もありますが、以下のような「予期せぬ衝突」が起きるという問題を孕んでいます。


セレクタの優先度の問題

CSS には優先度(詳細度)の概念があり、これを理解していないと「なぜ効かないの?」と悩むことになります。以下の例では「クラス よりも ID の方が詳細度が高い」というルールによって、文字は赤で表示されます。

優先度は、コード上の順序CSSが書かれた場所重要度詳細度に分けて考えることができます。以下、優先順位の高い順に紹介します。

スタイルが子要素にまで継承する問題

CSSスタイルは HTML上での子要素(DOMツリーの下位)にまで「継承」されるため、上位の要素に必要以上に詳細なスタイルを適用すると、下位の要素で上書きが必要になり、管理が煩雑になってしまいます。

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

HTML要素はスタイルを複合的に受け入れます。 スタイルが合成された場合、結果を予測することが困難になるので、各スタイルは事前に厳密に設計する必要があります。以下、スタイル合成の例です。

Sample Text




一般的なコーディング指針

ID、クラスの命名規則について

参考

参考:使う言語によって単語接続ルール(文化)が違います。

参考

要素タグの利用は必要最小に

要素名に対して直接CSSを書くと、各所でそれを打ち消す記述が必要になってコードが肥大化するので、全体に統一的に適用する「リセットCSS」のようなケースにのみ利用するのがよいでしょう。

IDの利用は必要最小に

IDセレクタの利用は以下のような理由で、できるだけ使わないのが理想です。

逆に言えば、IDの利用は、以下のような場合に限った方がいいでしょう。

クラスの定義・命名について

CSSフレームワークの設計を見れば明らかですが、クラスの定義は特定のHTML構造とは独立になされるのが理想です。「HTMLにCSSを適用する」という発想ではなく、「CSSをHTML要素に適用する」という発想で書くことを前提に定義するとよいでしょう。

SMACSSの発想

CSSの設計手法として、、OOCSS, BEM, SMACSS, FLOCSS などがありますが、ここでは、SMACSS(Scalable and Modular Architecture for CSS:スマックス)を紹介します(好みの問題です)。
 SMACSSは CSS を BASE, LAYOUT, MODULE, STATE, THEME に分類して記述する手法です。

ルール内容
BASE要素そのもののデフォルトスタイルを定義
LAYOUTページをエリアごとに分割するためのスタイルを定義
MODULE再利用可能な単位でパーツの見た目を定義
STATEレイアウトやモジュールの特定の状態におけるスタイルを定義
THEMEサイトのルック&フィールを定義


ベース

サイト全体について、要素のデフォルトスタイルを定義します。主に以下のHTMLセレクタへのスタイル適用となります(IDやクラスは対象外)。

bodyの背景や、リンクのデフォルトカラーや下線、フォントのスタイルなど、サイト全体で統一すべき要素のビジュアルを定義します。ここで書き込みすぎると、個々のパーツで「上書き」が増えるので、必要最小限にとどめるのがコツです。典型的なのは、以下のような CSS リセットです。

body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, img
pre, code, form, fieldset, legend, input, textarea,p, blockquote, th, td {
  margin: 0;
  padding: 0;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}
:

 
参考:リセットCSS


レイアウト

レイアウトルールでは、ヘッダー・フッター・ナビゲーション・メインコンテンツ・サイドバーなど、大枠のレイアウト(ページのエリア分割)に対してスタイルを適用します。詳細度の高い ID はなるべく使用せず、プレフィックス付きのクラスで定義して、後の モジュールやステートと区別します。

.layout_header {
  margin-bottom: 20px;
}
.layout_main {
  width: 70%;
}
.layout_aside {
  width: 30%;
}
.layout_footer {
  border-top: 1px solid gray;
}

一般にヘッダやフッタなどの主幹レイアウト要素は「ページ内に唯一」なので、慣習的にIDセレクタが使われることが多いのですが、JavaScript のフックとして必要になる場合や、ページ内アンカーとして必要な場合を除いて、極力 ID は使わず、クラスで作ることが推奨されています。


モジュール

モジュールルールでは、再利用可能な単位でパーツの具体的な見た目の定義をします。ロゴ、ナビゲーション、タブなど「部品」の単位です。レイアウトと同様、クラス名にはプレフィックス module- をつけます。


ステート

ステートルールは、モジュールの状態によってスタイルを上書きして見た目の変更を行います。プレフィックスには .is-hidden .is-active .is-current など is- を使います。

テーマ

テーマルールは、サイト全体のテーマ統一、変更のための定義をします。例えば 「付加のCSS」を書く、あるいは、main.css を読み込んだ後、thema.css を読み込むなど、後からスタイルを変更させる場合に使います。

コーディングルールには様々あって、これが標準と呼べるものはありませんし、また「IDセレクタの是非問題」にも様々な意見があるようです。
 いずれにしても、サスティナブルなCSSにするには、それなりにしっかりした「情報デザイン」が必要になるということ、また組織で制作にあたる場合は、メンバー間でルールをきちんと共有することが重要です。



BEMの発想

BEMはBlock Element Modifierの略です。

Block

いくつかのエレメントで構成された要素。これはページのどこに配置しても機能する独立した要素で、例えば、ヘッダー、フッター、ナビゲーション、コンテンツなどがそれにあたります。

Element

Blockの内部に置かれた個々の要素。例えば、タイトル、テキスト・画像、リスト、テーブルなどがそれにあたります。

Modifier

Block、Elememt の状態やスタイリングを設定するものです。例えば「メニュー要素のアクティブな状態」などがそれにあたります。

BEMの命名ルール

参考:Google:CSS BEM



PAGES

GUIDE

DATA

Last-modified: 2021-05-29 (土) 20:03:50