ブログについて
高品質なcssを書くためには？
2025.01.30
制作
こんにちは、クリエイティブ制作部です。
皆さんはコードを書く際にどのようなことを意識していますでしょうか。
コーディングは分かりやすさや、綺麗さ、保守性などが求められると思います。理由として、webサイトなどを作成した場合、作成して終わりではなくその後も修正や更新作業を続ける必要があるため、誰が見ても分かりやすいコードを書くことが重要になるからです。
そのため、今回はcssを綺麗に書くためのポイントを紹介したいと思います。
css設計を取り入れる
見やすく、修正作業などがしやすいcssにはcss設計を取り入れることが重要です。特に、大規模なサイト制作や複数人での作業時のクオリティが担保されます。
css設計とはcssのメンテナンス性や作業効率化のための「コードの管理方法」と「クラス名の命名規則の考え方」です。
よいcss設計とは
よいcss設計には以下の4つが重要であるといわれています。
1.予測しやすい
2.保守しやすい
3.拡張しやすい
4.再利用しやすい
1.予測しやすい
誰が見てもどこに使われているのか予想しやすいクラス名をつけることが大切です。例えば、画像のクラス名に「button」と命名すると画像なのかボタンなのか分からなくなってしまいます。クラス名のつけ方には明確な規則があるわけではありませんが、誰が見てもクラス名からその要素の機能・構造がわかるような名前にすると良いでしょう。
2.保守しやすい
機能の追加や更新、修正などがあった場合、既存のルールやcssに影響がなく変更できることを示します。
3.拡張しやすい
規模にもよりますがwebサイトは複数人で作成することが多くあります。そのため、誰が見ても問題なく管理できる状態であることを示します。修正が広範囲に及ばず、既存のcssに影響がなく修正できると良いでしょう。
4.再利用しやすい
同じパーツや要素が複数個所で必要になった場合、書き直しや上書きなどの必要がなく簡単に再利用できるかどうかを示します。
classの命名規則はBEMを参考にする
企業や案件などによってルールなどがある場合がありますが、特になければBEMを参考にするのがおすすめです。BEM (Block Element Modifier) はBlock、Element、Modifierの3つの要素から構成するCSS設計手法です。知名度も高いため統一性を持たせることに効果的です。
Block：独立した意味を持つ要素
Element：Block要素の子要素（Block要素を構成する部品の一つ）
Modifier：Block要素またはElement要素の状態を表す修飾子
以下がBEMを使用したコード例です。
<div class="block">
<div class="block__element"></div>
<div class="block__element--modifier"></div>
</div>
書き方は「block__element--modifier」の形で命名し、それぞれアンダースコア2つとハイフン2つで区切ります。クラス名が長くなってしまうデメリットがありますが、各要素の役割が明確化しコードの保守性が向上することや、知名度もあるため見やすいコードを書く上では推奨されています。
セレクタの階層は深くしすぎない
管理のしやすいcssを書くためにはcssの詳細度を上げすぎないことが重要です。cssの詳細度とは同じ要素に複数のスタイルが適用される際の優先度を決めるものになります。
cssの詳細度
| セレクタ | 点数 |
| ID | 1.0.0 |
| クラス | 0.1.0 |
| 要素 | 0.0.1 |
例えば以下のようなコードがあるとします。
.sample .sample__button {
color: blue;
}
.sample__button {
color: red;
}
上下のそれぞれの詳細度は上：0.2.0、下：0.1.0となります。通常であればcssは後に書いたプロパティが優先されますが、この場合、より詳細に指定している一番上の記述が最も高い詳細度となり、color: blueが適用されます。
このように、階層の深いセレクタがあると、スタイルが適用されなかったり修正する際に元の詳細度を確認する必要があるため修正に時間がかかってしまいます。セレクタの階層は深くしすぎないよう気を付けて書くようにしましょう。
最後に
いかがでしたでしょうか。今回は高品質なcssを書くためのポイントを簡単にまとめました。今回紹介したポイント以外にも、「クラス名はなるべく省略しない」「!importantはなるべく使用しない」など気を付けるべきことがありますのでぜひ調べてみてください。
また、綺麗に書くことを重要視しすぎると保守性が悪くなり、結果としてコード全体が分かりづらくなってしまいます。一番は保守性を高めることを最優先で考え、誰が見ても分かりやすく問題が起きにくい設計を目指していきましょう。