CSSの整理とスケーリング
新しいプロジェクトの最初のスタイルシートは書いていて楽しい。数百行進むと何かが変わる。1つのボタンの色を変えると、他の3つのボタンも変わってしまう。見出しは !important を付けるまで動かない。新しいルールを追加するたびに、古いルールを壊す可能性がある。CSSそのものはまだ正しい。足りなくなったのは、それを支える構造であり、構文ではなくその構造が、スタイルシートが1000行でも10万行でも実用的かどうかを決める。
CSSがスケーリングしにくい理由
CSSは**デフォルトではグローバル**です。書いたすべてのルールは、ページ上の任意の場所にあるマッチしたすべての要素に到達できます。p { color: navy; } と書くと、プロジェクト全体のすべての段落が紺色になります。意図したかどうかに関わらず。小さいページではこれは便利です。プロジェクトが大きくなると、ほとんどのトラブルの原因になります。
問題はルールの衝突として現れます。2つのスタイルシートが両方とも p をターゲットとしているか、一般的なルールと特定のルールが両方同じ要素に適用されます。今あなたはどちらが勝つかを計算する必要があります。あなたは CSSの仕組み でこのメカニズムを見ました。ブラウザーは詳細度と順序で衝突を解決します。CSSをうまくスケーリングすることは、最初からそうした衝突を作らないことについてです。
/* ページ上のすべての段落に到達する1つのグローバルルール */
p {
color: navy;
}
/* 別の場所にある2番目のルール、同じ要素のために競争しています */
.notice p {
color: crimson; /* .notice 内で勝ちます。より具体的です */
}
詳細度を低く平らに保つ
最も有用な単一の習慣は、**クラス**でスタイルすることであり、ほとんどの場合、一度に1つのクラスです。.card のようなクラスは素早く適用でき、再利用可能で、後で変更する必要があっても痛みがありません。単一のクラスは詳細度の低い穏やかなレベルだからです。
トラブルは2つのことから来ます。idと長いセレクターのチェーンです。#header のようなidはクラスよりもはるかにオーバーライドが難しく、.sidebar ul li a のようなチェーンは1つの正確な構造に結合しています。どこにでも配置できるプレーンなクラスを優先します。
/* 優先：単一クラス、低く平ら */
.nav-link {
color: navy;
}
/* 避ける：id、後で上書きするのが難しい */
#nav-link {
color: navy;
}
/* 避ける：深いチェーン、脆弱で詳細度が高い */
.sidebar nav ul li a {
color: navy;
}.card や .nav-link のような単一クラスは再利用が素早く、後で上書きするのが痛みがありません。これはまさにあなたが望むものです。#header のようなidと .sidebar ul li a のような長いチェーンから遠ざかってください。どちらも変更するのがはるかに難しいからです。 命名規則
クラスでスタイリングしたら、次の質問は何と呼ぶかです。.blue や .thing2 のような名前は、クラスが何のためにあるのかを何も言わないため、すぐに崩れます。**命名規則**はクラスの名前を付ける合意された方法なので、その名前はそのクラスが何をするのか、どこに属しているのかをあなたに伝えます。
広く使われているのはBEMと呼ばれており、Block、Element、Modifierの略です。ブロックはカードのようなコンポーネントです。要素は、2つの下線で書かれた内部の部分です。修飾子は、2つのダッシュで書かれた変動です。
/* ブロック：コンポーネント自体 */
.card { }
/* 要素：ブロックの一部、2つの下線 */
.card__title { }
.card__body { }
/* 修飾子：ブロックの変動、2つのダッシュ */
.card--featured { }<article class="card card--featured">
<h2 class="card__title">週末のワークショップ</h2>
<p class="card__body">レイアウトへの短い紹介。</p>
</article>.card のようなブロック、2つの下線を持つその内側の .card__title のような要素、2つのダッシュを持つ .card--featured のような変動。BEMを使う必要はありませんが、いくつかの一貫したスキームを選んでそれに固執してください。 ファイルの構造化
スタイルシートが成長するにつれて、1つの長いファイルは移動するのが難しくなります。一般的な修正は、CSSを、ルールが何をするかで数個のフォルダーに分割することです。**ベース**スタイル (body、見出しのようなプレーン要素のデフォルト)、コンポーネント (カード、ボタン、その他の部分)、ユーティリティ (間隔やテキスト配置クラスのような小さな単一目的ヘルパー)。
ファイルを分割するときに1つの詳細が重要です。それらを読み込む順序です。2つのルールが同じ詳細度を持つとき、後で来るものが勝ちます。そのため、後で読み込まれたスタイルシートはそれより前の詳細度をオーバーライドできます。最も一般的なものから最も特定のものへ、ファイルを読み込みます。
/* main.css: 順序は最も具体的でないものから最も具体的なものまで実行します */
@import "base/reset.css"; /* 要素のデフォルト */
@import "base/typography.css";
@import "components/card.css"; /* 自己完結したピース */
@import "components/button.css";
@import "utilities/spacing.css"; /* 最後に読み込まれるため、上書きできます */
@import "utilities/text.css";カスケードを明示的にする
これまでのすべては、規則によってカスケードを管理可能に保ちます。低い詳細度、良い名前、注意深いファイル順序。ここでより深く行くにつれてもっと多くがあり、それは旅の方向を知る価値があります。モダンなCSSでは、ファイルが座っている場所に依存する代わりに、順序を直接制御し、より多くの人が同じスタイルシートで機能するにつれてカスケードを予測可能に保つ方法をあなたに与えます。あなたはプロジェクトが成長するにつれてこれらのツールに会い、上記の習慣がそれらの準備をするものです。