CSS em JS > CSS ?
Enquadramento
No âmbito da unidade curricular de Tecnologias e Desenvolvimento Web, foi proposto a escrita de um mini artigo relacionado com algum potencial complemento para o conteúdo lecionado. Visto que a otimização do desenvolvimento front-end é um dos fatores mais importantes para a nossa evolução, o uso de novas ferramentas e métodos de estilização captou a minha atenção. Deste modo, a discussão entre utilizar ou não CSS em JavaScript e os seus prós e contras em relação ao CSS vanilla pareceu-me um tema pertinente e uma questão colocada por muitos developers ao iniciar os seus projetos.
Porquê CSS em JS?
CSS é de fácil aprendizagem e estará sempre presente. Mas à medida que as aplicações Web escalam e aumentam de complexidade, esta forma de estilizar deixa de ser suficiente e pouco eficaz.
Após a necessidade de uma ferramenta que conseguisse lidar com aplicações de grandes dimensões, surgiu o CSS em JS para resolver os problemas de reutilização e efeitos secundários do CSS puro.
O que é CSS em JS ?
Este método utiliza o JavaScript para descrever os estilos de uma forma mais flexível e de fácil manutenção. Algumas das bibliotecas mais mainstreams e utilizadas hoje em dia são styled components, emotion, linaria, entre outras. Umas das grandes vantagens da utilização destas ferramentas é o foco que estas têm em cada componente, sendo assim possível otimizar e gerir a experiência dos developers que o desenvolvem e dos utilizador finais.
É necessário realçar o poder do JavaScript que pode ser utilizado nesta ferramenta: criação de variáveis, funções, etc.
De forma a exemplificar como o CSS em JS funciona, segue-se uma das ferramentas mais utilizadas hoje em dia, styled components, juntamente com uma breve descrição e demonstração.
Styled components
Styled components é uma framework baseada em CSS em JS que combina as clássicas tags do JavaScript com a estilização do CSS, para que seja permitido utilizar CSS para customizar componentes React. De uma forma resumida, esta ferramenta utiliza a mesma abordagem da criação de componentes mas para os elementos da página em questão, onde são estilizados com CSS simples dentro deste código JavaScript.
Uma página de CSS normalmente é escrita da seguinte forma:
title {
font-size: 30px;
color: orange;
}
_______________________________<h1 className="title"> Hello </h1>
Enquanto que em styled componentes a abordagem é ligeiramente diferente:
const Title = styled.h1`
font-size: 30px;
color: orange; `_______________________________<Title> Hello </Title>
Em vez de criar estilos, onde temos de manualmente introduzi-los no componente, criamos um diretamente. Desta forma, os estilos tornam-se uma parte integral do componente, eliminando a necessidade de indicar a sua classe CSS e evitando o mapeamento entre os estilos e elementos. Tirando a inserção de funções, é tudo construído com CSS puro, o que permite haver um sentido de familiaridade que esta ferramenta preservou para os seus utilizadores desde o seu lançamento.
Pros e Contras do CSS em JS
De forma a debater as qualidades e os defeitos que esta abordagem fornece, segue-se uma breve listagem de pros e contras.
Pros
- CSS simples
Como estas frameworks utilizam CSS simples para a estilização, não há necessidade de aprender uma nova biblioteca específica. Desta forma é possível personalizar livremente os componentes apenas com CSS vanilla.
- Fácil manutenção
Visto que os componentes são redigidos separadamente dos componentes gerais e focados numa elemento específico, facilmente é possível alterar, eliminar e adicionar o conteúdo.
- Reutilização
Quase todas as aplicações Web repetem ao longo das suas páginas conteúdo como botões, inputs, modais, entre outros. CSS em JS permite evitar a repetição do CSS destes elementos para que a sua manutenção seja fácil e de rápido acesso, uma prática essencial para uma boa gestão e limpeza do código.
- Ligação com suporte mobile
Para projetos que utilizam React e React Native para o desenvolvimento mobile e onde a consistência entre os plataformas é uma prioridade, este formato de estilização é uma das melhores soluções.
- Scoped styles
Uma das principais dificuldades para utilizadores de CSS que não tenham muita experiência consiste na alteração de um estilo de uma classe ou de um elemento específico. Por vezes quando efetuam estas mudanças, alguns items ou comportamentos do DOM que estejam minimamente relacionados, são afetados e modificados de maneira invertida.
- Sintaxe clara
Um código legível e de fácil compreensão é importante, especialmente quando envolve mais do que um developer. Por este motivo, algumas ferramentas de CSS em JS recorrem à utilização de uma tag nomeada consoante o conteúdo que irá ter, como <Title> em vez de <h1 className={style.title}> por exemplo, pois é semanticamente mais satisfatório e decifrável para quem lê e analisa o código, além de poupar palavras e linhas desnecessárias.
Contras
- Performance
Visto que cada componente tem as suas propriedades de CSS, o bundle de JS cresce facilmente. Além disso, o JavaScript tem de ser processado pelo browser para que o CSS seja aplicado, enquanto que usando CSS simples, este está pronto quase ao mesmo tempo que os componentes HTML.
- Difícil reutilização/manutenção
Apesar da reutilização ser uma vantagem, ocorre um paradoxo pois as regras aplicadas a um componente específico “vivem” apenas neste. Devido a esta particularidade, pode ser difícil reutilizar ou alterar as regras aplicadas noutros componentes. O ideal seria utilizar não só um padrão específico mas sim adaptar as técnicas ao conteúdo que estamos a desenvolver e às preferências pessoais.
- Lock in
Com o objetivo de experienciar as potencialidades do CSS em JS, é necessário estar confortável não só com CSS mas principalmente com JavaScript, de seguida com React e só após CSS em JS, criando assim uma prisão que não deixa fugir muito destas linguagens. Esta condição torna este estilo menos versátil em relação à sua utilização com outras ferramentas.
- Cache
A ausência de ficheiros CSS significa que não é possível armazenar a cache do CSS separadamente.
Perspetiva de designer
Nem todos os UI/UX designers sabem desenvolver front-end ou algum tipo de linguagem para a web, mas para os que sabem, a simplicidade e intuição na sintaxe é essencial. Neste aspeto, CSS simples é direto e fácil de aplicar em pequenos projetos, pelo que ainda é bastante utilizado. Contudo, projetos com maiores dimensões por norma reutilizam muito conteúdo em diferentes áreas, e é aí que CSS em JS mostra o seu potencial.
Um design coerente ao longo de todas as suas páginas é uma condição para todos os designers. Por este motivo, a reutilização de código é fulcral para que este objetivo seja atingido.
Reflexão crítica
Em suma, ambas as abordagens, CSS e CSS em JS, são boas opções que irão depender da dimensão do projeto e dos seus requisitos. O principal problema do CSS em JS é que é um código de difícil manutenção e de lenta produção comparativamente ao CSS puro. Por outro lado, este minucioso trabalho pode ser uma boa solução para equipas de front-end que estejam a desenvolver projetos de grandes dimensões, que utilizem JS e desenvolvam o seu CSS de raiz.
Pessoalmente, o melhor procedimento é uma combinação dos dois formatos em que se utiliza o melhor de cada abordagem, onde um fortalece as fraquezas do outro. Afinal de contas, o CSS em JS não descarta o CSS, mas sim adiciona as habilidades do JavaScript para o seu aperfeiçoamento.
