• Não precisa de nenhuma ferramenta nem configuração para funcionar • Para manipulação de diferentes estilos, é necessário alternar entre classes CSS • Utiliza-se de classes como: is-active, js-active • Adoção de padrões como BEM • Manutenção é bem difícil
• Não precisa de nenhuma dependência extra, ou processo de build • Javascript “puro" • Permite uma dinâmica entre CSS e JS • Não é uma prática recomendável • Não tem todos os recursos do CSS (hover, before) • Imagina a manutenção..
• Não precisa se preocupar com os nomes das classes • Altera as classes para terem nomes únicos (.khjen) • O componente é o escopo da classe • Permite a utilização de um processador CSS (pré/pós)
• Não precisa se preocupar com os nomes das classes • Altera as classes para terem nomes únicos (.khjen) • O componente é o escopo da classe • Permite a utilização de um processador CSS (pré/pós) • Só resolve um único problema do CSS que é não ter escopo para as classes • Para manipulação de diferentes estilos, é necessário alternar entre classes CSS
• O JS é transformado em CSS • Qualquer coisa que funcionar no CSS, funciona com styled-components (media-queries, hover, keyframes) • Será adicionada uma nova dependência ao projeto • Requer um investimento em estudo
Sobre • Funciona em projetos que já possuem um CSS • Você consegue aumentar a especificidade de um estilo existente • É compatível com o ecossistema React • Template literal ES6 é onde está o pulo do gato