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. 結論
CSS 命名に関するこの記事はこれで終わりです: BEM、スコープ付き CSS、CSS モジュール、CSS-in-JS。CSS 命名に関するより関連性の高いコンテンツについては、123WORDPRESS.COM の過去の記事を検索するか、以下の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。 |
<<: デザイナーと開発者に役立つ 9 つの超実用的な CSS のヒント
>>: jsはブラウザを閉じるときにアカウントのログアウトを処理します
echartsワードクラウドはechartsの拡張版ですhttps://echarts.apache...
目次序文1. カスタムフォーカスコマンド1. 方法1 2. 方法2 3. 方法3 2. 入力ボックス...
方法1: MySQL では、次のコマンド ラインで MySQL サーバーを起動することにより、アクセ...
実装のアイデア一番外側は大きな円(グラデーションカラー)グラデーションの円を覆うように、内側に半円を...
最近私が学んでいるのは MySQL の知識なので、MySQL をインストールすることが非常に重要です...
最近Bステーションでスマートアンチブロッキング弾幕と呼ばれる弾幕エフェクトを見ました。これは伝説のマ...
序文最近 Linux を学び、その後 Win から Ubuntu に変更しました。以前インストールし...
目次1. なぜ vue3 が必要なのでしょうか? 2. vue3の利点3. 応答原則の違い4. ライ...
次のコードは、MySQL が 1 つのテーブルのデータに基づいて別のテーブルのいくつかのフィールドを...
導入: AD は Active Directory の略称で、中国語では Active Direct...
コードをコピーコードは次のとおりです。 <div スタイル="幅:630px;高さ:...
この記事の例では、検証コードのランダム生成を実現するためのJSの具体的なコードを参考までに共有してい...
ウェブページ上の画像が一般的に jpg、gif、png 形式であることは誰もが知っています。それらの...
MySQL自体は再帰構文をサポートしていませんが、自己接続を通じていくつかの単純な再帰を実現できます...
概要前の章では、クエリのフィルター条件について学習しました。MySQL では、like % ワイルド...