idとclassの使い分け｜WDSG策定チーム［#02］

みなさんは普段、idとclassの使い分けはどんなルールで行っていますか？

WDSG策定チーム専用Slackにて、メンバー間で談義を行い［idとclassの使い分け］のガイドラインを作成しました。

WDSG（Web Developer's Sharing Guidelines）とは、Webサイト制作関係者がガイドラインを共有することで、クリエイティブに集中できる環境を作るプロジェクトです。

１．idとclassの使い分け

１）基本的にスタイルの適用を目的とする場合は［class］を利用します。

意図１：
［id］は文書内（ページ内）で1度しか利用できず、使い回しができません。

意図２：
［id］と［class］を併用すると、cssの詳細度が複雑化します。

２）［id］を利用する場面

・ページ内リンクを配置する場合
・JavaScriptなどで処理を行う場合

２．策定までの流れ

［idとclassの使い分け］について行ったSlackでの流れを、公開議事録として掲載します。

ヒカル：
htmlでidとclassはどう使っていますか？
僕は基本的にidは使わずに、classで設計しています。idは詳細度が高く、cssでは使いにくいため、ページ内リンクで利用する以外では使いません。

桑島さん：
idとclassどちらにするか迷うのがいやなので、idはあまり使っていません。
ページ内リンクの時に使うことがほとんどです。

SMICHRさん：
スタイルの適用にclass
一意なコンテンツであることが明確で、スクリプトにより何かしらの制御をする場合にidを指定してますね。
id属性は文書内で使い回せない上に詳細度の制御が煩雑になるので使わないようにしてます。

以上が、Slackでの流れです。

実際はZoomMTGでもう少し議論を行っていたり、ドキュメント化する時に調査を行いました。

３．WDSG策定チーム専用Slack

WDSG策定チームは、専用Slackで一緒に意見交換をしてくれるメンバーを募集しています！

意見出しチャンネルで制作方法について質問したり、判断に迷っていることや制作の悩みなど、自由な雰囲気で意見交換を行いながら、少しずつガイドライン化を進めています。

この活動が気になった方は、是非とも僕のTwitter（@design_hikaru）へご連絡ください！

最後までお読み頂き、ありがとうございました！