デバッグの時間を節約するCSS命名規則

多くの開発者がCSSが嫌いだと聞いたことがあります。私の経験では、これはCSSを学ぶのに時間をかけなかった結果です。

韓国語?

説明:한국인위해본사는한국어로번역되었으며、한국어버전은여에서에서있습니있습니

CSSは最も美しい「言語」ではありませんが、20年以上にわたってWebのスタイリングに成功しています。ひどいことをしていませんか?

ただし、CSSをさらに記述すると、大きな欠点がすぐにわかります。

CSSの保守は非常に困難です。

うまく書かれていないCSSはすぐに悪夢に変わります。

以下に、少しのストレスと数え切れないほどの時間を節約できる命名規則をいくつか示します。

あなたは以前にそこに行ったことがありますか?

ハイフン区切り文字列を使用

多くのJavaScriptを記述する場合、キャメルケースで変数を記述するのが一般的です。

var redBox = document.getElementById( '...')

いいですね

問題は、この形式の命名がCSSに適していないことです。

こんなことしないで:

.redBox {
  境界線:1pxの赤一色;
}

代わりに、これを行います:

.red-box {
   境界線:1pxの赤一色;
}

これは非常に標準的なCSS命名規則です。間違いなく読みやすいです。

また、CSSプロパティ名と一致しています。

//正しい
.some-class {
   フォントの太さ:10em
}
// 違う
.some-class {
   fontWeight:10em
}

BEM命名規則

チームには、CSSセレクターを記述するためのさまざまなアプローチがあります。ハイフン区切り文字を使用するチームもあれば、BEMと呼ばれるより構造化された命名規則を使用することを好むチームもあります。

一般に、CSS命名規則が解決しようとする3つの問題があります。

  1. セレクターの名前を見て、セレクターが何をするかを知る
  2. セレクターを見るだけで、セレクターを使用できる場所を把握する
  3. クラス名を見ることで、クラス名間の関係を知る

次のように書かれたクラス名を見たことがありますか?

.nav--secondary {
  ...
}
.nav__header {
  ...
}

これがBEMの命名規則です。

5歳のBEMの説明

BEMは、ユーザーインターフェイス全体を小さな再利用可能なコンポーネントに分割しようとします。

以下の画像を検討してください。

それは棒人間の賞を受賞した画像です:)

いいえ、受賞ではありません:(

棒人間は、デザインのブロックなどのコンポーネントを表します。

BEMのBは「ブロック」の略であると既に推測しているかもしれません。

現実の世界では、この「ブロック」は、サイトナビゲーション、ヘッダー、フッター、またはその他のデザインブロックを表します。

上記で説明したプラクティスに従って、このコンポーネントの理想的なクラス名はstick-manです。

コンポーネントは次のようにスタイル設定する必要があります。

.stick-man {
  
 }

ここでは区切り文字列を使用しました。良い!

要素のE

「BEM」のEはElementsを表します。

設計の全体的なブロックが孤立して存在することはほとんどありません。

たとえば、棒人間には頭、2本の豪華な腕、および足があります。

頭、足、腕はすべてコンポーネント内の要素です。それらは、子コンポーネント、つまり全体の親コンポーネントの子と見なされる場合があります。

BEMの命名規則を使用して、要素クラス名は、2つのアンダースコアとそれに続く要素名を追加することにより導出されます。

例えば:

.stick-man__head {
}
.stick-man__arms {
}
.stick-man__feet {
}

修飾子のM

「BEM」のMは修飾子を表します。

棒人間が変更され、青色または赤色の棒人間ができた場合はどうなりますか?

現実の世界では、これは赤いボタンまたは青いボタンです。これらは、問題のコンポーネントの修正です。

BEMを使用すると、2つのハイフンの後に要素名を追加することにより、修飾子クラス名が派生します。

例えば:

.stick-man--blue {
}
.stick-man--red {
}

最後の例では、親コンポーネントが変更されています。これは常にそうではありません。

さまざまな頭の大きさの棒人間がいたらどうなりますか?

今回は要素が変更されました。要素は、包含ブロック全体の子コンポーネントであることを忘れないでください。

.stick-manはBlockを表し、.stick-man__headは要素を表します。

上記の例に見られるように、二重ハイフンも次のように使用できます。

.stick-man__head--small {
}
.stick-man__head--big {
}

繰り返しますが、上記の例での二重ハイフンの使用に注意してください。これは、修飾子を示すために使用されます。

今、あなたはそれを持っています。

これが基本的にBEMの命名規則の仕組みです。

個人的には、単純なプロジェクトにはハイフン区切りのクラス名のみを使用し、より複雑なユーザーインターフェイスにはBEMを使用する傾向があります。

BEMの詳細を読むことができます。

命名規則を使用する理由

コンピューターサイエンスには、キャッシュの無効化と名前の付け方という2つの困難な問題しかありません— Phil Karlton

ものに名前を付けるのは難しいです。メンテナンスしやすいコードを使用して、物事を簡単にし、将来の時間を節約しようとしています。

CSSで正しく名前を付けると、コードの読み取りと保守が容易になります。

BEMの命名規則を使用することを選択した場合、マークアップを見るだけで、デザインコンポーネント/ブロック間の関係が見やすくなります。

自信がありますか?

JavaScriptフックを使用したCSS名

今日はジョンの仕事初日です。

彼は次のようなHTMLコードを引き渡されます。

ジョンはこの記事を読んで、これがCSSで物事に名前を付ける最良の方法ではないかもしれないことを認識しています。そこで彼は先に進み、次のようにコードベースをリファクタリングします。

よさそうですね?

ジョンには知られていないが、彼はコードベースを壊した

どうやって?

JavaScriptコードのどこかに、以前のクラス名siteNavigationとの関係がありました。

// Javasriptコード
const nav = document.querySelector( '。siteNavigation')

そのため、クラス名の変更に伴い、nav変数はnullになりました。

なんて悲しい。

このようなケースを防ぐために、開発者はさまざまな戦略を考え出しています。

1. js-クラス名を使用する

このようなバグを軽減する1つの方法は、js- *クラス名を使用して、問題のDOM要素との関係を示すことです。

例えば:

JavaScriptコードでは:

// Javasriptコード
const nav = document.querySelector( '。js-site-navigation')

慣例として、js-site-navigationクラス名を見る人は誰でも、JavaScriptコードにそのDOM要素との関係があることを理解するでしょう。

2. Rel属性を使用します

私は自分でこの手法を使用していませんが、人々がそうするのを見てきました。

これを認識していますか?

基本的に、rel属性は、リンクされたリソースと参照元のドキュメントとの関係を定義します。

ジョンの前の例では、この手法の支持者はこれを行います。

JavaScriptで:

const nav = document.querySelector( "[rel = 'js-site-navigation']")

この手法には疑問がありますが、いくつかのコードベースでこの手法に出くわす可能性があります。ここでの主張は、「まあ、Javascriptとの関係があるので、rel属性を使用してそれを示しています」です。

Webは、同じ問題を解決するためのさまざまな「方法」を備えた大きな場所です。

3.データ属性を使用しない

一部の開発者は、JavaScriptフックとしてデータ属性を使用します。これは正しくありません。定義により、データ属性はカスタムデータの保存に使用されます。

データ属性の適切な使用。 Twitterで見られるように

編集#1:コメントセクションで素晴らしい人々が述べたように、人々が「rel」属性を使用する場合、特定の場合にデータ属性を使用しても大丈夫でしょう。結局あなたの電話です。

おまけのヒント:CSSコメントをもっと書く

これは命名規則とは関係ありませんが、時間も節約できます。

多くのWeb開発者はJavaScriptコメントを記述したり、一部のコメントに固執しないようにしていますが、CSSコメントをもっと書く必要があると思います。

CSSは最もエレガントな「言語」ではないため、適切に構成されたコメントは、コードを理解しようとするときに時間を節約できます。

痛くない。

Bootstrapのソースコードがどれだけよくコメントされているかを見てください。

色を言うためにコメントを書く必要はありません:赤は赤を与えます。ただし、あまり目立たないCSSトリックを使用している場合は、気軽にコメントを書いてください。

プロになる準備はできましたか?

CSSのスキルをすぐに発揮できる無料のCSSガイドを作成しました。無料の電子ブックを入手してください。

知らなかった7つのCSSの秘密