More than 3 years have passed since last update.

BEM命名をルール化 & HTML5要素を正しく使う

Last updated at 2021-01-29Posted at 2021-01-27

はじめに

タイトルについて記事にしました。
この記事で得る内容は以下の通りです。

・ BEMで命名する名前の法則を予め考えておくことで、コーディングの質の向上と効率化を図る
・ HTML5要素を正しく理解し、適切に扱えるようになる

CSSでidを使用しない考え方が今の主流で、idで指定しなければならない理由がなく、
idかクラスにするかの迷いを一切なくしてコーディングスピードを上げることが目的です。

表以外にもたくさんあると思いますが、実際に使い勝手を確認して都度編集する可能性があります。

汎用的にコンテンツを包むものにはdiv要素を使い、他は目的に合った要素を使います。
以下の表は、<div class="クラス名">のように名前を入れる際に使います。

名前	用途	説明
wrapper	コンテンツを包む大きな要素	コンテンツを包んで整列や調整を行う
container	要素のグループ化	要素を視覚とスタイリング両方の意味でグループ化する
introduction	導入	introと略してもOK
description	概要	descと略してもOK
detail	詳細	-
feature	特徴	-
block	汎用的	囲うもの
box	汎用的	箱・入れ物
inner	汎用的	内側
module	汎用的	部品

wrapperとcontainerには、製作者の意図により使用する意味が異なるので正解がありません。
チームで決められているのであればそのルールに従い、個人であれば正しいと思う使い方を選択します。

名前	用途	説明
active / disabled	汎用的	有効 / 無効
open / close	汎用的	開く / 閉じる
show / hide	汎用的	表示 / 非表示
size	大きさ	small,middle,largeを使ってもOK
direction	方向	top,left,bottom,rightを使ってもOK
shape	形状	circle,squareを使ってもOK
reverse	Flexboxで並び替える	逆・反転

ネーミングツールcodicを利用しましょう。
例えば、要素を取得するクラスを何にしようか思い浮かばない時は、要素を取得すると入力すると
get_elementと提案してくれます。

数多くあるHTML要素の中でも、特に使用頻度が高いものをまとめました。
ルート要素や文書のメタデータは省略します。

文章やアプリケーションの一部分で、意味や機能のひとまとまりのことです。

要素	用途	説明
header	ヘッダ	文書・またはセクションのヘッダを表す
footer	フッタ	文書・またはセクションのフッダを表す
section	章や節	文章の論理構造を示すもので、要素内に見出し要素が必要コンテナ要素ではないので、レイアウト目的で使用することは不可
aside	補足セクション	補足情報・余談・用語説明・サイドバー・広告に使う
nav	ナビゲーション	サイト、またはページ内の移動で必要になるリンクメニューで使うヘッダやサイドバーのリンクメニューなど
h1〜h6	見出し	セクションの見出しを表す h1に近いほど見出しのランクが高くなり、h6に近いほど低くなる

要素	用途	説明
p	段落	文章中の1つのブロックを表し、文章に区切りを入れる時に使う
ul	順不同のリスト	リスト内の項目はli要素で示す
li	リスト内の項目	ul要素の子要素として使う
main	文書のメインコンテンツ	文書のメインコンテンツであることを示す
div	特定の範囲をグループ化	特定の意味はないが、グルーピングしたい時に使う他に適切な要素があればそちらを優先する