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

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 をよろしくお願いいたします。

<<:  デザイナーと開発者に役立つ 9 つの超実用的な CSS のヒント

>>:  jsはブラウザを閉じるときにアカウントのログアウトを処理します

推薦する

echarts ワードクラウドチャートを使用した Vue の実践記録

echartsワードクラウドはechartsの拡張版ですhttps://echarts.apache...

Vue プロジェクトでよく使用されるツール機能の概要

目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...

MySql ログイン パスワードを忘れた場合とパスワードを忘れた場合の解決策

方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...

円形グラデーションプログレスバー効果を実現する CSS サンプルコード

実装のアイデア一番外側は大きな円(グラデーションカラー)グラデーションの円を覆うように、内側に半円を...

MySQL 8.0.15 のインストールと設定方法のグラフィック チュートリアル (Windows 10 X64)

最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...

CSS3はマスク連打機能を実現する

最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...

Ubuntu 18.0.4 は mysql をインストールし、エラー 1698 (28000): ユーザー ''root''@''localhost'' のアクセスが拒否されましたを解決します

序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...

Vue3とVue2の利点のまとめ

目次1. なぜ vue3 が必要なのでしょうか? 2. vue3の利点3. 応答原則の違い4. ライ...

MySQL は、あるテーブルのデータに基づいて別のテーブルの特定のフィールドを更新します (SQL ステートメント)

次のコードは、MySQL が 1 つのテーブルのデータに基づいて別のテーブルのいくつかのフィールドを...

Windows Server 2016 AD サーバーをセットアップする手順 (画像とテキスト)

導入: AD は Active Directory の略称で、中国語では Active Direct...

ウェブサイトのコンテンツの一部を傍受するための iframe を実装するためのアイデアとコード

コードをコピーコードは次のとおりです。 <div スタイル="幅:630px;高さ:...

JSは検証コードのランダム生成を実装します

この記事の例では、検証コードのランダム生成を実現するためのJSの具体的なコードを参考までに共有してい...

JPG、GIF、PNGなどのさまざまな画像形式の詳細な説明

ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの...

MySQLの再帰問題

MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...

MySQL 完全折りたたみクエリ正規マッチングの詳細な説明

概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...