メンテナンスしやすいようにCSSの記述方法を変えてみた

メンテナンスしやすいようにCSSの記述方法を変えてみました。

なにも難しいことはしません。

いままではこんな感じ

タグを階層的に指定してCSSを記述。（子孫セレクタ）
pとかdivは広範囲すぎるのでh,liなどで使うことが多かったです。

最近は以下のとおり。

一個ずつ、個別にclassをつけ、CSSを記述。

メリット

HTMLの構造に変更を伴う修正に対応しやすい。

デザインの修正が入った時に、タグを増やしたり、減らしたり、HTMLの構造を変更せざるを得ない場合があります。この時、構造に依存しないCSSの記述方法だと非常にメンテナンスしやすくなります。

デメリット

classを多用するので、HTMLの記述が増えたり、class名が長くなったりしてソースが見にくくなります。ソースが見にくくなるということは、ミスが増える可能性を増やしてしまいます。なるべく誰がみてもわかりやすい命名規則を使うなどで対応します。

また、あまり小分けにclassを作りすぎると、修正箇所が逆に増えてしまい、修正忘れの原因になったり。CSSのメリットを削っている感は否めません。適材適所ですね・・

たとえWordPressなどのCMSを使っていたとしても、サイトを作ってから修正が入らないことなんてほとんどありません。ですので、この方法に変更してから修正のストレスが少なくなりました。
いろいろモジュール化してガチガチで完璧なCSSをつくるより、独立したclassでCSSを記述することがメンテナンスのしやすさにつながります。