node.js - 継承 - React と Webpack の CSS モジュール

Question

nav複数の<li>and<a>タグがネストされた React モジュールが呼び出されたとします。CSS モジュールを使用して、次のような「継承可能」または「カスケード」ルールを設定するにはどうすればよいですか。

nav {
    background: red;

    > li > a {
        background: green;    
    }
}

1 つの要素に 1 つのスタイルしか直接適用できないようです。

score 0 · Accepted Answer

コード例が示しているのは継承やカスケードではなく、セレクターコンビネーターの使用です。

あなたの例は、ネストをサポートする SCSS コードを示しているため、次のようになります。

nav {
    background: red;
    > li > a {
        background: green;
    }
}

変換されます:

nav {
    background: red;
}

nav > li > a {
    background: green;
}

CSS モジュールは、これらのコンビネータの使用を妨げるものではありません。CSS モジュールは CSS のスーパーセットであるため、2 番目の例はそのまま使用できます。最初の例は、SCSS で使用すると機能します。

CSS モジュールの背後にある合理的な理由の多くは、上記の CSS が少なくとも 2 つの理由で貧弱であることを示唆していることに注意してください。

ターゲティングタグ
- nav、liおよびaすべて非常に一般的であるため、非常に小さなプロジェクトを除いて、他のルールと競合する可能性が非常に高くなります。
高い特異性
- nav > li > a不必要に具体的です (そして、マークアップ構造と密接に結びついています)。CSS が正常にスケーリングするためには、セレクターが競合する必要がないように具体性を減らすことが一般的に良い方法と考えられています (!重要)。

1 に答える 1