クラス属性とメンテンナンス性について

コーディングをしていく中で、メンテナンス性を損なわないように無駄な記述を無くすというのを普段から心掛けているのですが、クラス名をつけなくてもcssを指定できるものはクラス名を付けない方が良いのでしょうか？使わないクラス名は無駄な記述ですか？
それともクラス名は全部の要素につけ、子孫セレクタなどではなくクラス名でcss指定をする方がメンテナンス性は高いのでしょうか？
現場での意見をお聞きしたいです

行動規範の内容に同意します

回答1件

ベストアンサー

場合にもよります。

メンテナンス性に関しては、
チーム内ないし、個人においても、このパターンは付ける、付けないを決めたり、パターン別にクラス名を統一するなど規定を定めることが大事かと思います。
そうすることによって、どこをどう修正すればいいか、など、迷わなくて済むようになり、結果、メンテナンス性の向上になります。

また、全ての要素につける必要性は全くありません。
スタイルを当てない、ないし、JavaScriptコントロールを行わない要素に対してクラスを付けるのは、はっきり言って無駄です。

そして、これは本質問に対して蛇足になりますが、
わずかな差ではありますが、
ページ表示のパフォーマンスに影響するパターンが存在します。

html
1<div class="wrapper">
2  <p></p>
3  <!-- 同じ要素が1000個並んでるとする -->
4</div>
5<div>
6  <p class="textRed"></p>
7  <!-- 同じ要素が1000個並んでるとする -->
8</div>

css
1.wrapper p { color: green;}
2.textRed { color: red;}

とした時、緑の文字の方の書き方の方が確実に描画が遅れます。
これはなぜかというと、CSSのセレクタは、右から検索するからです。
つまり、上の方の緑文字の方は、
下の方のp要素も検索対象に入ってしまうので、その分パフォーマンスが落ちるということです。
対して、赤文字の方は、そもそも、.textRedに対してのみなので、緑より描画パフォーマンスは当然上がります。

ただし、実務の上では、子孫セレクタは便利で、使わないとメンテナンス向上できない、などあるので、命名規則などのルールも加味した上で天秤かけて、付ける付けないを決められるとよいかと思います。

投稿2019/10/25 19:34