この記事は、Ateam Group U-30のカレンダー | Advent Calendar 2022 - Qiitaの19日目の記事になります。
CSSを保守運営するために、SassやCSS moduleなど便利な機能が生まれてきました。
ただ、使えないプロダクトで生のCSSを書く場合も少なからずあります。
そんなときに意識したいことをまとめます。
大枠では以下の３つになります。
- グローバルを汚染しない
- タグに直接スタイルを当てない
- 過度なスタイルの上書きをしない
グローバルを汚染しない
CSSはJavaScriptと同じように1つのランタイムで実行されます。
そのため、何も意識せずに書くと、セレクタの衝突やスタイルの上書きが発生します。その結果、意図しないページ崩れが発生します。
グローバルが汚染された状態で放置すると、その後の保守が大変になり、より開発に時間がかかるようになります。
タグに直接スタイルを当てない
CSSのスタイルの当て方には大きく4種類があります。
- タグにスタイル属性をつける
- クラス名でスタイルを当てる
- タグ名でスタイルを当てる
- Idでスタイルを当てる
この中で、タグ名にスタイル属性を当てることは初期化用のCSSの中で書かれていれば良いのですが、それ以外の箇所で使用するとページ崩れを引き起こす原因となります。特に部分的に提携サービスへ配信しているCSSで行うと、配信先のページを崩してしまいます。
どうしても当てなければいけない場合は、クラス名でスコープを絞りスタイルを当てるのが良いです。
.label-text span {
font-size: 12px;
}
過度なスタイルの上書きはしない
CSSは後に書かれたスタイルが優先されます。そのため、当てたく無いスタイルがあれば上書きをする場合があります。
スタイルの上書きは便利ですが、過剰に上書きをしてしまうと、どこでなんのスタイルが当たっているのか、変更の影響範囲を調べることも難しくなります。
極力上書きを避け、なぜスタイルを上書きする必要があるかに目を向け、クラス名を分けるや元のスタイルを書き換えるなど、なるべく根本的な対応をすると良いかとしましょう。
まとめ
今では生のCSSを書くことは減ってきています。ただ、少なからず書くこともあるので、後のことを考えながらメンテナンスしやすいCSSを書いていきたいです。