CSSの修正時に影響範囲を限定させる方法

修正する時にHTMLとCSSのどちらを修正するべきか明確にルール化しておくと後工程でスムーズに進められます。修正時に困ってしまうのがCSSの内容を把握しなければならない時です。CSSの行数が1万もあると内容を把握するだけで一苦労です。ただフォントサイズを修正するだけで数時間かかってしまうこともあります。HTML・CSSをわかりやすく構築しておくと後が楽です。修正することを前提とした設計ができると数ランク上のコーディングとなります。

（再掲載）HTMLを修正する、CSSを修正する、HTML・CSS両方とも修正する

Webサイトはコーディング方法によって修正時のスピード感が変わります。修正がある場合、主にテキスト修正と見た目の修正と2パターンとなるでしょう。この場合、弊社では次のような修正で済むのが理想と考えます。

• テキスト修正（例：文字校正）→該当箇所のHTMLを修正
• 見た目の修正（例：文字サイズ変更）→該当箇所に効いているCSSを修正

対して見た目の修正でHTMLの修正が必要なコーディングの場合、次のような問題が生じます。

• 修正対象が複数ある場合、修正箇所もその分増えてしまう
• 修正後に設定したい内容がCSSに存在していない場合、HTMLとCSSの両方修正が必要となる

運用フェーズでは対応箇所が少ない方がスピード感もありますし、ミスの可能性も減ります。コーディングは修正時の対応も踏まえて設計すべきです。

CSSパーツ化のデメリット

CSSをパーツ化することで一つの設定を色々な箇所で使用することができます。例えば文字サイズや文字色を設定ごとに用意しておく形です。

.fs14 {
font-size:14px;
}
.fs16 {
font-size:16px;
}

文字サイズを14pxから16pxへ変更指示があったとします。

<p class=“fs14”>テキスト</p>

HTMLに記述されているPタグのCLASSを次のように変更します。

<p class=“fs16”>テキスト</p>

すると文字サイズが16pxになります。ただし、修正箇所が複数あった場合は全て修正する必要があります。対してCSSを変更するというやり方もあります。

<p class=“fs14”>テキスト</p>

CSSの記述内容を次のように変更します。

.fs14 {
font-size:16px;
}

こうすると「class=“fs14”」で設定されている箇所が全て16pxに変更できます。複数箇所を一括で変更できることがメリットなのですが、「class=“fs14”」なのに文字サイズが16pxとなるのでわかりづらくなります。HTML・CSS両方を修正するとなると修正ステップが増えるので手間が多い運用となります。なのでCSSをパーツ化するというのは大局的に考えて運用しづらい構成であると弊社は考えています。

また、CSSをパーツ化すると普段使用しないCSSも記述することになるのでファイルサイズが肥大化しがちです。不要な記述はしない方が運用効率が良いと経験から考えます。

CSSの範囲指定（子孫セレクタ）とは

CSSは設定次第で対象を限定させることができます。その一つ、子孫セレクタは使用頻度が高いです。子孫セレクタとは次のような設定です。

p span {
color:rgb(0,0,255);
}

Pタグ内のSPANタグだけ色が青になります。これを#wrapper内に限定させると他の要素内には影響しなくなります。

#wrapper p span {
color:rgb(0,0,255);
}

子孫セレクタを使用すると読み込みが若干遅くなります。しかし、CSSの影響範囲を限定させた方が管理しやすくなるので、弊社は子孫セレクタの使用を選択します。

修正時に素早く対応できるCSS設定とは

CSSの影響範囲を限定させておくと修正時に該当ページ以外を気にする必要がなくなります。対象箇所だけ考えれば良いので修正スピードを速めることができます。また、新規ページを追加する時も既存設定を気にする必要がなくなります。ちょっとしたことですが、この差も大きいです。わかりやすさと対応スピードの観点から、弊社ではCSSは子孫セレクタを多用して構築します。