combinação
Você não precisa repetir vários seletores com os mesmos atributos, basta separar os seletores com vírgulas (,).
Por exemplo, você tem o seguinte código:
h2 {cor: vermelho};
.thisOtherClass {cor: vermelho};
.yetAnotherClass {cor: vermelho};
Então você pode escrever:
h2, .thisOtherClass, .yetAnotherClass { cor: vermelho }
Usando composição, você pode definir vários CSS de uma vez, economizando muitos bytes e tempo.
Aninhado
Se o CSS estiver bem estruturado, não há necessidade de usar muitas classes ou seletores de identificadores. Isso ocorre porque você pode especificar seletores dentro dos seletores. (Ou melhor dizendo, seletor de contexto - por tradutor)
por exemplo:
#top {cor de fundo: #ccc; preenchimento: 1em }
#top h1 { cor: #ff0 }
#top p { cor: vermelho; peso da fonte: negrito }
Isso elimina seletores desnecessários de classes ou identificadores se aplicados ao HTML assim:
<div id="topo">
<h1>Curry de chocolate</h1> <p>Esta é minha receita para fazer curry puramente com chocolate</p> <p>Mmm mm mmmmm</p>
</div>
Isso ocorre porque, usando seletores ingleses separados por espaço de meia largura, especificamos que h1 no ID ID tem a cor "#ff0", enquanto p é vermelho e em negrito.
Isso também pode ser um pouco complicado (já que pode haver mais de dois níveis, como dentro, dentro, dentro, dentro, etc.). Você precisa praticar mais.
Usar o aninhamento pode fazer com que seu código CSS seja lido com mais clareza e personalizar o CSS para os elementos que você especificar.