Introdução / background: componentes CSS
Para um site relativamente grande, estamos trabalhando com o SASS e tentando gerenciar CSS em componentes. A idéia básica dos componentes é que um componente tenha a mesma aparência em todos os lugares, independentemente dos elementos do contêiner mais adiante no DOM.
Então, queremos evitar coisas assim (SASS):
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}Em vez disso, se quisermos que a imagem do usuário pareça diferente na primeira página, ela deverá ser um componente diferente. Por exemplo, com herança SASS, ou com um mixin:
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}Em seguida, precisamos ajustar o html na página inicial, para que ele use a versão diferente da imagem do usuário.
Por enquanto, tudo bem. Postei o exposto acima como uma ilustração do meu conhecimento atual sobre o que são os componentes CSS.
A pergunta: classes modificadoras - boas práticas?
Agora, estamos com um problema: algumas páginas têm um plano de fundo escuro (preto) e, portanto, o texto, as bordas e outras coisas precisam ser brancas.
De alguma forma, isso vai além dos componentes: o mesmo componente deve ter texto escuro por padrão, mas texto branco se estiver dentro de um contêiner com fundo escuro.
Então, temos essa ideia incrível:
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}Portanto, temos uma classe externa "modifier" ou "context" white-on-blackque modifica como os elementos internos são exibidos.
A motivação é que o componente em si não é responsável pelo plano de fundo de um elemento de contêiner mais adiante no DOM.
Isso funciona. O único problema é se tivermos um contêiner de fundo branco dentro do contêiner de fundo escuro. Mas isso de lado, funciona bem.
A questão é se essa é uma boa prática arquitetural, com o pano de fundo de tentar manter os componentes independentes um do outro.
Alternativa seria ter um componente diferente, por exemplo my-component-on-dark-bg, que herda my-componente tenha a cor diferente para texto e bordas. Mas aqui o código (por exemplo, PHP) que produz o componente html precisa saber sobre o exterior, ou seja, se é usada uma BG escura. Supondo que o código PHP que renderiza o componente seja separado do código PHP que renderiza o contêiner. O que ainda é gerenciável, mas pode ser um argumento para o padrão com uma classe modificadora, conforme descrito acima.
Notas
Na verdade, estamos prefixando nossas classes CSS com um prefixo específico do projeto. Acabei de deixar isso aqui por simplicidade, e porque não é da conta de ninguém que projeto estou trabalhando :).