class属性とid属性、使い分けていますか？

　前ページでは、CSSのコンポーネント化についてご紹介しましたが、CSSでよく使う装飾定義もコンポーネント化してみましょう。

　装飾定義のコンポーネントは、class属性とid属性を使い分けることで可能になります。基本的には、ページ中に何度も指定するものは「class属性」を使用し、ページ中に一度しか指定しないものは「id属性」を使用しますが、ここで重要なことは、要素の指定回数ではありません。どんな目的によってclass属性を指定するかid属性を指定するかということです。

　class属性もid属性も指定することで装飾定義を適応できるところは同じですが、class属性は「分類・区別する」、id属性は「固有の識別子を与える」とまったく異なる役割があります。

　つまりclass属性は分類分けするのに使用しますが、id属性はその要素を唯一無二の存在にするために使用します。さらにid属性はCSSのみに適応される属性ではありません。JavaScriptやHTMLもアンカーリンクとして使用されます。class属性とid属性は併用して使用することも可能です。

　しかしclass属性とid属性の使い分けの方針に正解は無く、Webコンテンツを構成するコンテキストに依存する問題ですので、制作者の定義次第となります。また両属性どちらも多くなるとCSSの汎用性を失ってしまうことになるので注意が必要です。子孫セレクタなどを使用し、class属性とid属性の指定は最小限にしましょう。

今後の拡張性を考慮したコーディング

　制作後運用していくWebサイトなどは、基盤のコーディングを的確に行わないと、タグが無秩序に拡張して更新に時間がかかってしまったり、制作者しか理解できないソースコードになってしまうことがあります。

　また分かりやすくコーディングする以外にも、用途に合わせて簡単なコーディングのルールなども作っておくことが望ましいです。プロジェクトを引き継ぐことになってしまった場合にも、ガイドラインやレギュレーションなどのルールセットがあると大変便利です。命名規則やディレクトリマップなどの取り決めを最初からまとめておくことで、チームの作業効率の向上が期待できるだけでなく、新規スタッフでも一定のクオリティを保つことも可能になります。

　しかし更新性や拡張性を考慮したメンテナンス性の高い設計には、経験とセンスが要求されます。内容の正確性だけでなく、見た目の美しさをも追求することがプロフェッショナルの仕事と評されることにつながるのではないでしょうか。