Convenções de nomes em CSS: kebab-case, BEM e além
CSS é insensível a caixa nos seletores, mas os nomes de classe devem bater exatamente. A comunidade padronizou kebab-case porque é legível, seguro em URLs e consistente com atributos HTML.
Notação BEM
Block__Element--Modifier estende kebab-case para arquitetura de componentes:
.card {} /* block */
.card__title {} /* element */
.card--featured {} /* modifier */
.card__title--large {} /* element modifier */