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

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

韓国語 ??

알 림 : 한 국 인 독 자 분 들 을 위 해 본 기 사 는 한 국 어 로 번 역 되 었 으 며 、 버 전 은 한 국 어 여 기 에 서 보 실 수 있 습 니 다

CSSは最も美しい「言語」ではありませんが、20年以上にわたってWebのスタイリングを強化してきました。悪くないですよね?

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

CSSを維持するのは非常に困難です。

不十分に記述されたCSSは、すぐに悪夢に変わります。

ここに、少しのストレスと数え切れないほどの時間を節約するいくつかの命名規則があります。

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

JavaScriptをたくさん書く場合は、キャメルケースで変数を書くのが一般的です。

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

素晴らしいですよね?

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

こんなことしないで:

.redBox { border: 1px solid red;}

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

.red-box { border: 1px solid red;}

これはかなり標準的なCSSの命名規則です。それは間違いなくより読みやすいです。

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

// Correct
.some-class { font-weight: 10em}
// Wrong
.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を表します。

デザインの全体的なブロックが孤立して存在することはめったにありません。

たとえば、スティックマンにはhead、、 2つのゴージャス、、armsがありfeetます。

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

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

例えば:

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

修飾子のM

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

棒人間が変更され、棒人間blueまたは棒人間がいる可能性がある場合はredどうなりますか?

現実の世界では、これはredボタンまたはblueボタンである可能性があります。これらは、問題のコンポーネントの変更です。

BEMを使用すると、修飾子クラス名は、2つのハイフンの後に要素名を追加することによって導出されます。

例えば:

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

最後の例は、変更されている親コンポーネントを示しています。これは常に当てはまるわけではありません。

headサイズの異なるスティックメンがいたらどうなるでしょうか。

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

.stick-man表しBlock.stick-man__head要素を。

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

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

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

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

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

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

あなたはBEMについてもっと読むことができます。

BEM-ブロック要素修飾子

BEM-Block Element Modifierは方法論であり、再利用可能なコンポーネントとコード共有を… getbem.comで実現するのに役立ちます。

命名規則を使用する理由

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

名前を付けるのは難しいです。私たちは物事をより簡単にし、より保守しやすいコードで将来の時間を節約しようとしています。

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

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

自信がありますか?

JavaScriptフックを使用したCSS名

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

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

Johnはこの記事を読み、これがで名前を付けるのに最適な方法ではない可能性があることを認識していますCSS。そこで彼は先に進み、次のようにコードベースをリファクタリングします。

よさそうだね?

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

どうやって?

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

//the Javasript code
const nav = document.querySelector('.siteNavigation')

したがって、クラス名の変更に伴い、nav変数はになりましたnull

なんて悲しい。

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

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

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

例えば:

そしてJavaScriptコードでは:

//the Javasript code
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フックとして使用します。これは正しくありません。定義上、データ属性はカスタムデータを格納するために使用されます

編集#1:コメントセクションで驚くべき人々が述べたように、人々が「rel」属性を使用する場合、特定の場合にはデータ属性を使用しても問題ない可能性があります。結局のところ、それはあなたの呼び出しです。

ボーナスのヒント:CSSコメントをもっと書く

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

多くのWeb開発者はJavaScriptコメントを書かないか、いくつかに固執しようとしますが、CSSコメントをもっと書くべきだと思います。

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

痛くはありません。

Bootstrapソースコードがどれだけコメントされているか見てみましょう。

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

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

私はあなたのCSSスキルをすぐに燃やすための無料のCSSガイドを作成しました。無料の電子ブックを入手してください。