Inheritence - CSS-модули в реактиве и веб-пакете

Question

Скажем, у меня есть модуль React, называемый nav, который содержит несколько меток <li> и <a>, вложенных внутри. С модулями CSS, как я могу иметь «наследственные» или «каскадные» правила, такие как это:

nav { 
    background: red; 

    > li > a { 
     background: green;  
    } 
} 

Кажется, я могу применить только один стиль непосредственно к одному элементу?

Answer 1

Это не inheritance или the cascade, что ваш пример кода демонстрирует, это использование селектора combinators.

Ваш пример показывает SCSS код, который поддерживает nesting так это:

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

является transpiled в:

nav { 
    background: red; 
} 

nav > li > a { 
    background: green; 
} 

CSS модули не мешает вам использовать эти комбинаторы - CSS модулей является надмножество CSS, поэтому второй пример будет работать из коробки. Первый пример будет работать, если он используется с SCSS.

Может быть, стоит отметить, что много рационального позади модулей CSS хотел бы предложить выше CSS плох, по крайней мере по двум причинам:

1. Таргетинг теги
   • nav, li и a являются все очень общее, поэтому невероятно вероятно, что они будут противоречить другим правилам во всех, кроме самых маленьких проектах.
2. Высокая специфичность
   • nav > li > a является излишне конкретным (и тесно связан с размеченной структурой). Для успешного масштабирования CSS обычно считается хорошей практикой для снижения специфичности, поэтому селекторы не должны конкурировать (важно).