Maneiras de estilizar componentes React
Existem muitas maneiras diferentes de estilizar componentes React. Aqui veremos algumas das principais.
A abordagem padrão que podemos aplicar, assim como na estilização comum de páginas web, é o uso de CSS global. Aqui criamos um arquivo CSS externo compartilhado com os estilos. Com essa abordagem, todos os nomes de classes ficam no escopo global, o que pode levar a conflitos entre eles. Também é possível criar muitos arquivos CSS pequenos. Essa abordagem é pouco eficiente na criação de aplicações grandes e escaláveis.
A próxima abordagem - estilização em linha,
usando-a, podemos adicionar estilos CSS inline,
da mesma forma que é feito no HTML comum. Nesse
caso, trabalharemos com o atributo
style, passando a ele as
propriedades CSS necessárias. A aplicação de tal estilização
é considerada uma má prática e é recomendada
apenas para adicionar estilos calculados dinamicamente
durante a renderização. Essa
maneira é boa para a prototipagem rápida
da interface de um componente individual.
Os próximos pares de maneiras que veremos são modernas, estão ganhando popularidade e são eficazes para estilização. São precisamente essas as maneiras que são recomendadas para a estilização de grandes aplicações React escaláveis.
A primeira delas - é a aplicação da biblioteca Styled Components, que usa literais de modelo (template literals) para estilização. Esse método nos permite escrever CSS normal no código JavaScript, usando toda a sua funcionalidade.
A segunda maneira - é a aplicação de Módulos CSS. Nesse caso, um módulo CSS é um arquivo CSS no qual, por padrão, todos os nomes de classes e animações estão no escopo local, ou seja, estão disponíveis apenas dentro do componente que o utiliza.
Nas duas últimas maneiras, não precisamos temer conflitos entre os nomes de classes, pois eles são únicos - é usada a conceito de escopo local. Além disso, ao usá-las, a necessidade da metodologia BEM desaparece.
Nas próximas lições, veremos todas as maneiras apresentadas aqui com mais detalhes.
