Em 2018 eu comecei a trabalhar com Styled Components. No começo eu tive muito preconceito, sempre ficava reclamando, dizendo que não entendia bem como usar e hoje em dia eu praticamente não me imagino fazendo um projeto novo utilizando React sem usar essa belezura.
A ideia desse post é compartilhar um pouco da minha experiência e tentar ti convencer a testar essa lib que pode ti ajudar a resolver vários probleminhas comuns que temos.
Para quem já trabalha a um tempo com Front End, é bem comum já estar acostumado a pensar em trabalhar com o CSS focando em reuso em cima de algum padrão, seja ele BEM, SMACSS…
O que para concluir as tarefas do dia a dia nos leva a escrever um código que segue essa linha:
E isso faz todo sentido funciona super bem e muitos projetos são estruturados assim, esse estilo de organização ganhou muita força quando logo que o SASS e sua trupe de pré processadores foram sendo lançados.
Porém no mundo do desenvolvimento nada para e as coisas seguem evoluindo e nesse ritmo de lançamentos essa estratégia foi portada para os Single File Components do Vue.js.
https://vuejs.org/v2/guide/single-file-components.html
O mais legal dessa abordagem, é que destruimos tudo o que aprendemos nas bases do Front End que é deixar cada coisa em seu canto e juntamos tudo em uma coisa só. Porém muitas vezes acabamos não refletindo o por que disso ser algo tão difundido.
O estalo pra mim veio quando eu fiz um componente de acordeon, e vi que era muito fácil de ver toda a lógica do componente, seu estilo e qual era o markup (html) que estava servindo de base para o componente.