メンテナンス性が高いHTMLとCSSを書く

HTML と CSS のコーディングでは、メンテナンス性を高くすることが何よりも大切だと考えています。

メンテナンス性が高いHTMLとCSSとは

メンテナンス性が高いHTMLとCSSは以下のポイント!

  • 見やすい
  • 探しやすい
  • 使いまわせる
  • 応用しやすい

Qiitaにて紹介されている記事をまとめました。

規約は絶対に守らなければならないものではない

規約は絶対に守るべきことではないと考えています。時として理想とはいえない解決策をとる羽目になることもある、HTML と CSS のコーディングはそのようなものだとおもいます。

このような場合、全体に渡るコーディング規約の導入は難しくなります。まずは一部から、規約を導入すると良いでしょう。

今すぐ規約を試すには?

実は、すぐにコーディング規約を試す方法があります。
Google の HTML / CSS のコーディング規約が公開されているのでそのまま使ってください。
https://google.github.io/styleguide/htmlcssguide.xml

この規約をそのまま使えば、基本的には間違いありません。
また、当記事で紹介している規約は、Googleの規約をベースとしています。

その他にも大企業などがスタイルガイドを公開していることがあるので参考にしてください。

その他にもCSSの命名規則であるBEMという考え方があります。

クラスの命名に BEM を使う

CSS ではクラスの命名が、メンテナンス性に重要な影響を及ぼします。

クラスの命名に関しては、BEM というフロントエンドの設計手法が、CSS の厳格な命名ルールになっているので、BEM を採用します。

BEM って何?!という方には、BEM のコーディングについては以下を挙げておきます。参考としてご覧ください。

BEM ではクラスをBlock、Element 、Modifer の3つの分類で命名します。なるべく名前だけでHTML要素の内容を伝えられるようにします。

CSSはクラスに記述する

CSS は基本的にクラスのみに記述します。また、HTML エレメントに指定せず、クラスを制限する書き方を避けるようにします。

HTMLエレメントにCSSを書くと打ち消しのためのCSSが増えるのでおすすめではないです。が、時間が限りなく短い現場などではたまにhtmlに直書きしてしまう場合もあるかと思いますが、なるべく避けたいものです。

制限された CSS を書くと再利用性が下がる

改善余地あり
div.modal {text-align: left;}
p.content {padding: 10px;}
改善案
.modal {text-align: left;}
.content {padding: 10px;}

上記の例では、クラスのみでスタイルを指定したほうが短く記述できます。div .modalのようにdivに制限したクラスを書くと、.modalはdivタグでしか使用できなくなります。.modalの使用が制限されているため、再利用性が低下しています。例のようにdivやpなどタグ指定をすると、 CSS の再利用性が低下するのでタグの指定は避けるようにします。

CSSの命名規則は使いやすくですね。

クラス名をわかりやすくする

クラス名を単語から想像しやすいクラス名にします。

改善余地あり
.mf80 {margin-right: 80px;}
.bcg { background-color: gray;}
改善案
.mr-80 {margin-right: 80px;}
.bgc-gray {background-color: gray;}

mf80 や bcg というクラス名は、短すぎるために意味が予想しにくいです。クラス名から要素の意味や、スタイルが想像できるでしょうか?
今回はスタイルが想像できそうなクラス名に変更しました。

わかりやすくの部分ですね。上記のようにCSSの命名規則は

  • 見やすい
  • 探しやすい
  • 使いまわせる
  • 応用しやすい

事が大事になります。BEMやSmaCSSという入力規則を勉強することで上記の様な書き方ができるようになります。普段なかなか時間がなく入力規則がなぁなぁになってる方はぜひ一度時間をとって勉強し直してみてください。
QiitaのBEMとSMACSSを融合させる最も簡単な方法もおすすめです。