この記事では、CSSエンティティの命名規則について説明します。 それらを使用することで、第一に、より落ち着いて自信を持って作業できるようになり、第二に、スタイルの改良とデバッグに費やす時間を大幅に節約できます。
あなたはすでに同じような状況に陥っていますよね？
ハイフン付きの名前を使用する
JavaScriptで大量に記述する場合、ラクダスタイルの変数名に慣れていることを意味します。
var redBox = document.getElementById('...')
JSの観点からは、ここではすべて問題ありませんが、エンティティの命名に対する同じアプローチはCSSにはあまり適していません。
たとえば、これは行われるべきではありません：
.redBox { border: 1px solid red; }
代わりに、次のエントリを使用することをお勧めします。
.red-box { border: 1px solid red; }
CSSでは、名前に対する同様のアプローチが一般的です。 これらの名前はおそらく読みやすく、さらに、CSSプロパティ名と一致しています。
// .some-class { font-weight: 10em } // .some-class { fontWeight: 10em }
BEMの命名規則
さまざまな開発チームがCSSセレクターの形成にさまざまなアプローチを採用しています。 一部はハイフンで区切られた名前を使用しますが、BEMと呼ばれる構造化された命名規則を好む人もいます。
一般に、エンティティの命名規則が解決しようとする3つの問題があります。 つまり、ある種の規則を適用することにより、開発者はCSSセレクターを見るだけで次のことがわかります。
- セレクターの役割。
- セレクターのスコープ。
- エンティティ間の関係。
次のように書かれたクラス名を見たことがありますか？
.nav--secondary { ... } .nav__header { ... }
これらは、BEM命名規則を適用した結果です。
簡単な例によるBEMの基本
B「B」とは何ですか？
BEMの核心は、ユーザーインターフェイスを小さなコンポーネント、再利用に適した独立したブロックに分割することです。
次の画像をご覧ください。
この男性のイメージは、多くの権威ある賞を受賞しています。
まあ、この写真は賞を獲得しませんでしたが、私たちにとって非常に有用です。 だから、小さな男（スティックマン）はコンポーネント、つまり、デザインの特定のブロックです。
略語「BEM」の文字「B」が「ブロック」を意味することはすでに推測できます。 現実の世界では、「ブロック」は、ナビゲーションバー、ページのヘッダーまたはフッター、一般的にはユーザーインターフェースのフラグメントになります。
上記の原則に従って、
stick-man
はそのようなコンポーネントの理想的なクラス名になります。
コンポーネントのスタイルは次のとおりです。
.stick-man { }
そのため、ここでは名前が使用され、その部分はハイフンで区切られています。 これにより、コードに順序が追加されます。
男はCSSです。stick-man
E「E」とは何ですか？
略語「BEM」の文字「E」は「要素」を意味します。 設計のブロックが「モノリシック構造」を表すことはほとんどありません。
したがって、たとえば、私たちの小さな男（
stick-man
）には、頭（
head
）、2つの素晴らしい手（
arms
）、足（
feet
）があります。
小さな男の構成要素
エンティティ
head
、
feet
、
arms
は、メインコンポーネント（ブロック）内にある要素です。 これらは子コンポーネントと見なすことができます。つまり、親コンポーネントの子孫です。
BEMの命名規則を使用して、メインコンポーネントの名前に2つのアンダースコアを追加し、その後に要素名を追加することにより、要素クラス名が取得されます。 たとえば、次のように：
.stick-man__head { } .stick-man__arms { } .stick-man__feet { }
M「M」とは何ですか？
略語「BEM」の文字「M」は修飾子を表します。 私たちの小さな男が変更でき、彼が青（
blue
）または赤（
red
）のいずれかである場合はどうでしょうか？
ブルーマンとレッドマン
Webアプリケーションでは、これは赤いボタンまたは青いボタンのようなものです。 これらは、問題のコンポーネントのまさに修飾子です。
BEMを使用する場合、修飾子クラスの名前は、2つのハイフンをメインコンポーネントの名前に追加し、その後に要素の名前を追加することによって取得されます。 例：
.stick-man--blue { } .stick-man--red { }
最後の例は、ブロック全体が変更されることを示していますが、これは常に発生するわけではありません。 さまざまなサイズの頭を持つ男性の品種がある場合はどうなりますか？
さまざまなサイズの頭を持つ男性のためのオプション
今回は、メインブロックの要素のみが変更されます。 要素は、メインコンポーネントにネストされたコンポーネントであることに注意してください。
.stick-man
コンストラクトはブロックであり、
.stick-man__head
は要素です。
上記の例からわかるように、ハイフンは次のように使用できます。
.stick-man__head--small { } .stick-man__head--big { }
2つのハイフンの使用に注意してください。 このデザインは、修飾子を示すために使用されます。
これですべてが明確になったはずです。 これらはBEMの基本です。
個人的には、単純なプロジェクトではハイフンの形式で区切り文字を含むクラス名のみを使用する傾向があり、より複雑なユーザーインターフェイスではBEMを使用します。
BEMの詳細については、 こちらをご覧ください 。
命名規則を使用する理由
「コンピュータサイエンスには、キャッシュの無効化とエンティティの命名という2つの複雑なタスクしかありません」
フィル・カールトン
名前を見つけるのは難しい作業です。 プログラマは、将来問題のないサポートを備えたコードを作成するために、不必要な複雑さを伴わないように努めています。 CSSエンティティの適切な命名により、コードの読み取りと保守が容易になります。
BEMの命名規則を使用することにした場合、コードを見ると、コンポーネント間の関係がすぐにわかります。 これはあなたに自信と平和を与えます。
CSS名とJavaScript
JavaScriptでのCSS名の使用について話しましょう。 ここでは、初心者プログラマーのジョンが私たちを助けてくれます。 今日は彼の最初の営業日です。 彼は次のHTMLを実行するように求められました。
<div class="siteNavigation"> </div>
Johnはこの記事を読んで、
siteNavigation
はあまり良い名前ではないことに
siteNavigation
。 そこで彼は仕事に取りかかり、コードをリファクタリングしました。
<div class="site-navigation"> </div>
よくやったね しかし、驚いたことに、ジョンに委ねられたコードの一部であるプロジェクトは、正常に動作しなくなりました。 問題は何ですか？ 問題は、JavaScriptコードのどこかで、以前に使用されていたクラス名
siteNavigation
です。
// JavaScript const nav = document.querySelector('.siteNavigation')
その結果、クラス名を変更した後、値
null
は
nav
変数にあることが判明しました。 ジョンの最初の営業日はそれほど良くありませんでした。
このような事故を防ぐために、さまざまなアプローチを使用できます。 それらのいくつかを考えてみましょう。
jjs-で始まるクラス名の適用
このようなエラーに対処する1つの方法は、
js-*
パターンを使用して形成されたクラス名を使用することです。 このような名前は、問題のDOM要素がJSからアクセスされることを示しています。 例：
<div class="site-navigation js-site-navigation"> </div>
その結果、JavaScriptコードで次の構成を使用できます。
// JavaScript const nav = document.querySelector('.js-site-navigation')
この命名規則に精通し、
js-site-navigation
クラス名を見るプログラマーは、この名前がDOM要素を操作するためにJSコードで使用されることをすぐに理解し、絶対に必要でない限り（そして対応する修正を行わない限り）変更しないJavaScriptプログラムへ）。
rel rel属性の適用
私はこのアプローチを使用しませんが、それを適用する人を見てきました。 このデザインを知っていますか？
<link rel="stylesheet" type="text/css" href="main.css">
rel
属性は、参照されるリソースと現在のドキュメントの間の関係を定義します。 ジョンの前の例では、このアプローチの支持者はこれを行います。
<div class="site-navigation" rel="js-site-navigation"> </div>
JSでは、これを次のように操作できます。
const nav = document.querySelector("[rel='js-site-navigation']")
私はこのアプローチに疑問を持っていますが、いくつかのプロジェクトでそれを十分に満たすかもしれません。 この
rel
属性の使用の目的は、要素がJavaScriptで使用されていることを示すことです。
dataデータ属性について
一部の開発者は、
data
属性を使用して、JavaScriptのDOM要素での作業を整理します。 しかし、これは間違っています。 このような属性は、データを保存するために使用されます。 Twitterコードの
data
属性を正しく使用する例を次に示します。
データ属性の適切な使用
まとめ
今日は、エンティティに名前を付ける正しいアプローチが、Webページスタイルの作業を容易にするのにどのように役立つかについて話しました。 あなたがCSSを嫌う人の1人であるが、明白な理由でそれなしではできないわけではない場合、この物語があなたがCSSを新鮮に見て、この不可欠な技術と友達になるのを助け、同時にあなたのプロジェクトのコードを扱うスピードと利便性を高めることを願っています。
親愛なる読者！ CSSを使用するときに使用するエンティティの命名スキームは何ですか？
