CSS 命名: BEM、スコープ付き CSS、CSS モジュール、CSS-in-JS の説明

CSS の適用範囲はグローバルです。プロジェクトがどんどん大きくなり、参加する人が増えるにつれて、命名が問題になります。命名の問題に対する解決策をいくつか紹介します。

1. 境界要素法

名前は .block__element--modifier の形式です。名前には意味があります。ブロックはモジュールとみなされ、一定のスコープを持ちます。

例

.dropdown-menu__item--アクティブ

2. スコープ付きCSS

参考: vue-loader.vuejs.org/zh/guide/sc…

目標: 現在のコンポーネントスタイルは他のコンポーネントに影響を与えません

コンポーネントのDOMノードに固有の属性を追加し、スタイルタグのCSSをその属性に合わせて変換し、CSSのスコープを制限します。

例

<スタイルスコープ>
。例 {
  色: 赤;
}
</スタイル>
 
<テンプレート>
  <div class="example">こんにちは</div>
</テンプレート>

変換結果:

<スタイル>
.example[データ-v-f3f3eg9] {
  色: 赤;
}
</スタイル>
 
<テンプレート>
  <div class="example" data-v-f3f3eg9>こんにちは</div>
</テンプレート>

3. CSSモジュール

参考: vue-loader.vuejs.org/zh/guide/cs…

CSS セレクターを一意の文字列に変換し、DOM に適用します。アルゴリズムによって命名され、人間による命名からアルゴリズムによる命名へのマッピングテーブルが記録される。

例

<スタイルモジュール>
。赤 {
  色: 赤;
}
</スタイル>
<テンプレート>
  <p :class="$style.red">
    これは赤であるべきだ
  </p>
</テンプレート>

変換結果:

<スタイルモジュール>
._1yZGjg0pYkMbaHPr4wT6P__1 {
  色: 赤;
}
</スタイル>
<テンプレート>
  <p class="_1yZGjg0pYkMbaHPr4wT6P__1">
    これは赤であるべきだ
  </p>
</テンプレート>

4. CSS-in-JS

参考: github.com/styled-comp…

固有のセレクターを使用して CSS コンテンツを表現します。 CSS モジュールと同じで、アルゴリズムを使用して名前が付けられます。 CSSをJSの文字列として扱い、CSSにより多くの機能を与える

例

<テンプレート>
  <css-in-js></css-in-js>
</テンプレート>
 
<スクリプト>
  'vue-styled-components' から styled をインポートします。
  エクスポートデフォルト{
    コンポーネント:
      cssInJs: styled.div `
                色: 赤;
            `
    }
  }
</スクリプト>

変換結果:

<テンプレート>
    <div class="gXTzCp"></div>
</テンプレート>
<スタイル>
.gXTzCp {
    色: 赤;
}
</スタイル>

V. 結論

1. BEM は命名規則を定め、意味のあるものにします。ブロックはモジュールとして考えられ、特定の範囲を持ちます。
2. スコープ付き CSS は、名前に関係なく、CSS のスコープを制限します。複数のテーマに適応できない
3. CSS モジュールはアルゴリズムによる命名を使用するため、名前の競合がなくなり、CSS の範囲が制限されます。複数のテーマに適応できない
4. CSS-in-JS はアルゴリズムによる命名を使用し、CSS モジュールの利点を備えています。同時に、CSSはJSの文字列とみなされ、CSSにより多くの機能を与える。

CSS 命名に関するこの記事はこれで終わりです: BEM、スコープ付き CSS、CSS モジュール、CSS-in-JS。CSS 命名に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。