Nos outros cursos os arquivos CSS foram usados de forma direta. Neste foi usado este formato de modulos, que o nome do arquivo fica .module e no classname é utilizado chaves e o prefixo styles para cada classe. Quero saber qual o benefício em fazer desta forma? Pra mim só aumento o número de letras para digitar.
1
resposta
resposta
Porque foi escolhido usar módulos nos arquivos CSS
Oi, Turi, tudo bem?
Entendo que a mudança para o uso de módulos CSS pode parecer um pouco confusa no começo, especialmente se você estava acostumado a usar CSS de forma direta. No entanto, essa abordagem traz algumas vantagens significativas.
- Escopo local: em vez de lutar contra a cascata de CSS, os módulos CSS permitem que você escreva estilos que têm escopo local por padrão. Isso significa que você não precisa se preocupar com conflitos de nomes de classes, pois cada componente terá seus próprios estilos que não afetarão outros componentes.
- Reutilização de código: com os módulos CSS, você pode reutilizar seu código CSS em vários componentes sem se preocupar com a possibilidade de estilos conflitantes.
- Manutenção de código: como os estilos são específicos para cada componente, é mais fácil manter e atualizar o código. Você não precisa percorrer arquivos CSS extensos para encontrar os estilos que deseja alterar.
- Melhor performance: como os estilos são aplicados apenas onde são necessários, você pode acabar com um arquivo CSS menor e mais eficiente.
No exemplo do curso, você pode ver que o arquivo CSS é importado como um módulo no arquivo JavaScript do componente (import styles from './inicio.module.css'). Isso permite que você use os estilos como um objeto JavaScript, onde as chaves são os nomes das classes e os valores são os nomes gerados automaticamente que garantem que os estilos não entrem em conflito com outros estilos no aplicativo.
Espero ter ajudado. Caso tenha dúvidas, conte com o fórum. Abraços!
Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!