今回の記事では、WEB制作・開発の現場において、注意すべきCSSの破綻について解説をしていきます。
CSSの破綻とは
CSSの破綻は、細かく例を挙げるとキリがありませんが、
制作現場で特に注意しなければならないCSSの破綻については下記のように思います。
(私がこれまでしてきたCSS記述ミスのTOP3です)
- セレクタの詳細度による破綻
- セレクタの多重定義による破綻
- セレクタの影響範囲による破綻
サンプルコードやローカルで作るペライチのサイトであれば、
1つのHTMLファイルと1つのCSSファイルで構成されているので、CSSの破綻は起きにくいでしょう。
しかし、実際に運用されているWEBサイトは、複数のCSSファイルやJavaScriptファイルが動いています。
同時に、ページ数も数ページ ~ 数百ページに及ぶ大規模なものまで存在します。
CSS設計やルールが存在しない状態でCSSを記述する際には、他のファイルに記述されているCSSの影響範囲を考慮しながらコーディングを行う必要があります。
それでは実際に、注意すべきCSSの破綻について解説をしていきます。
セレクタの詳細度による破綻
先日CSSが効かない時にチェックする項目の記事で、詳細度をチェックする必要があることを書きました。
興味がある方は閲覧してください。
まず初めに、このような記述を見かけた事はありませんか？
.header .header-inner .logo .logo-image {
max-width: 250px;
}記述自体に異常はなく、コードは動きます。
しかし、これだけ詳細度高く記述されている場合、
CSSを変更する場合は、さらに詳細度を挙げる or !importantを使用することになります。
既存のスタイルを強制的に上書きをして、優先度のコントロールが困難になる状態は、
詳細度の設計ミスであり、CSSの破綻を誘発します。
この場合、当該箇所に対しては下記のようにスタイルを当てるのが適切です。
この記述だと、変更する際にも強烈な上書きをしなくて済みます。
.logo-image {
max-width: 250px;
}セレクタの多重定義による破綻
CSSは同じ詳細度の場合に、後から記述したCSSが優先されます。
そのため、多重定義をしてもJavaScriptのようにエラーになることはありません。
つまり、気づかないままにCSSの多重定義が発生している可能性があります。
少し大袈裟ですが、事例として下記のような記述は、サイト内に多く存在しています。
<h2 class="item-title">タイトル</h2>.item-title {
font-size: 24px;
}
.item-title {
font-size: 18px;
}CSSのファイルを複数に分けて管理している場合によく発生する現象なのですが、
多重定義に気づかずにCSSの変更を行った際、CSSの変更が反映されないケースがあります。
これは、後から定義されたCSS(多重定義された記述)が優先されるために、
先に読み込まれるファイル内のCSSを変更しても、スタイルは変更できないことを意味します。
この場合は、スタイルを変更したい要素にユニークなclassを当てることで、多重定義によるCSSの破綻を回避することができます。
<h2 class="item-title smaller-title">タイトル</h2>.item-title {
font-size: 24px;
}
.item-title.smaller-title {
font-size: 18px;
}セレクタの影響範囲による破綻
これはCSS設計の醍醐味であり、大きなリスクでもあります。
下記のような現象に遭遇したことはないでしょうか？
- 商品ページを一部変更したのに、関係ないはずのコンテンツページのレイアウトも変わってしまった
- 会社概要のレイアウトを変更したら、トップページが崩れた
サイト制作を行う際に、CSS設計が適切に行われていないと、このような現象が発生することがあります。
つまり、セレクタの影響範囲が、対象箇所を飛び越えて、他の箇所にも影響を与えてしまったということです。サイト構築でCSS設計を行う際は、変更時の影響反映を考慮して、コンポーネント設計を行う必要があると実感させられる事例です。
下記のようにページの目的に合わせてclassを設計しておけば、他のページに対して影響が出ることはなくなります。
<!-- 商品ページの場合 -->
<div class="l-item"></div>
<!-- コンテンツページの場合 -->
<div class="l-page"></div>まとめ
いかがでしょうか。
今回の記事では、WEB制作・開発の現場において、注意すべきCSSの破綻について解説をしてきました。
これから数回に分けて、今回の記事で解説した「CSSの破綻」を防ぐためのCSS設計手法について解説していきます。
私が実務で使用しているBEMやSMACSSを紹介予定です。
