How should class naming be in HTML? — Clean Code.
記事は上記記事を意訳したものです。
※当ブログでの翻訳記事は元サイト様に許可を得て掲載しています。
多くの開発者は開発フェーズでネーミングに多大な時間を費やすことがあります。実際、場合によっては、コーディング自体よりも名前付けに多くの時間を費やしてしまうこともあります。これは、クラス、ID、関数、変数、ファイルなどの要素に名前を付ける際、プロジェクト内での目的を正確に反映した、説明的で意味のある、簡潔で一貫性のある名前を使用することが不可欠だからです。
しかし、なぜ物事にこのように名前を付けるべきなのでしょうか?
- 書かれたコードがより読みやすく、理解しやすくなります。チームメンバーや他のチームの開発者がコードブロックを簡単に理解でき、協力とメンテナンスプロセスが向上します。
- 適切な命名は、プロジェクトで一貫性を確保し、プロジェクトが成長するにつれて、名前付けプロセスが容易になります。
- CSSファイルがより整理されます。意味のある名前が付けられたクラスを管理・検索することは常に簡単です。
- 外部ライブラリを使用する際の名前の衝突を防ぎます。
- SEO(検索エンジン最適化)とアクセシビリティに役立ちます。
- DRY(Don't Repeat Yourself)の原則に従い、コードの重複を防ぎます。
- 大規模プロジェクトでは、新しい領域、機能、デザインの改訂が常に追加されます。適切な命名によって、これらの変更に柔軟に対応でき、コードの更新がスムーズに進行します。
- ソフトウェア開発には、コードの読みやすさ、理解しやすさ、持続可能性、整理を重視するClean Codeという重要な概念があります。適切な命名はClean Codeの大きな部分を占め、正確な命名からClean Codeの原則の遵守が始まります。
それでは、Webサイトの構造を構築するためのHTMLのクラス名を付ける際、どのようなルールがあるのでしょうか?
- クラス名は小文字で記述し、ハイフン(-)またはアンダースコア(_)で区切ります。
<div class="header-block"></div> <div class="header_block"></div>
<div class="header block"></div>
- 英語以外の言語は使用せず、camelCaseの命名規則は避けるべきです。camelCaseとは、最初の単語の最初の文字は小文字で、それ以降の単語の最初の文字は大文字になる命名規則です。
<div class="başlık-alanı"></div> <div class="headerBlock"></div> <div class="başlıkAlanı"></div>
<div class="header-block"></div>
- IDの割り当てにcamelCaseの命名規則を使用します。
<div id="sendButton"></div>
- 適用される領域の目的を明確に定義し、具体的で説明的な名前にする必要があります。
<article class="article-content"></article> <nav class="menu-block"></nav> <div class="post-date"></div>
- 短くて簡潔にし、極端に長い命名規則は避けます。
<div class="authentication-block-container-area"></div> <div class="frequently-asked-questions-area"></div>
<div class="authentication-block"></div> <div class="auth-block"></div> <div class="faq-area"></div>
- 文脈を共有していない開発者が理解するのが難しいほど短すぎる命名規則は避けます。
<div class="lg-cn"></div> <div class="ar-co"></div>
<div class="login-content"></div> <div class="article-content"></div>
- 多くの場所で使用できる一般的な名前は単独で使用しません。
<div class="blue"></div> <div class="right"></div> <div class="back"></div>
<div class="blue-btn"></div> <div class="content-right"></div> <div class="back-item"></div>
これらの推奨事項の根底にあるのは何でしょうか?なぜ要素にこのように名前を付けるべきなのでしょうか?
- 一部のブラウザやプラットフォームでは、大文字と小文字の区別がある場合があります。そのため、クラス名に一貫して小文字を使用すれば、予期せぬ問題を防ぐことができます。
- ソフトウェアの言語は普遍的で英語であるため、命名にトルコ語の名前を使用しません。英語以外の言語を使用すると、前述した大文字小文字の区別や文字の違いに関連する問題が発生する可能性があります。
- camelCaseは、クラス名だけでなく、ID、変数、関数名でも広く受け入れられている命名規則です。
- 特に大規模プロジェクトでCSSと併せて使用する場合、長い命名規則はファイルサイズを増大させ、パフォーマンスに悪影響を及ぼします。また、長い名前はコードの理解を難しくし、開発プロセスを遅らせます。
- 文字数が少なすぎて非常に短い名前は混乱を招き、開発プロセスで一貫した使用ができないため、実用性が低くなります。
- ".left .red"のような命名規則は、単独で使用すると意味が明確でなく、また、異なるコンテキストで使用される可能性があるため、CSSコードが複雑になります。
上記のような状況はすべて、Web開発コミュニティの習慣、特定のライブラリの期待に応じて確立されたルールであり、HTMLおよびCSSの標準に準拠しています。一般的な使用方法はこれらの規則に沿っていますが、これらは義務ではありません。
命名規則は、コードの読みやすさを向上させ、プロジェクトで一貫性を維持し、整理を行い、エラーの可能性を減らし、チーム内での効果的な協力を促進するために設定されています。
Webの世界の基準を定義しているHTML関連のW3Cドキュメントは、こちらでアクセスできます。
これらすべてを説明した後、簡単な例のコードブロックで記事を締めくくりましょう。
<header class="header-container"> <div class="logo-block"> <h1>World of the Web</h1> </div> <nav class="menu-block"> <ul> <li><a href="/">Subscribe</a></li> <li><a href="/">My</a></li> <li><a href="youtube.com/@worldoftheweb">Youtube</a></li> <li><a href="/">Channel</a></li> </ul> </nav> <div class="login-btn"> <span>Subscribe</span> </div> </header>
