Há poucos dias atrás, a LinkedIn surpreendeu a comunidade front-end com uma excelente notícia: o lançamento de uma ferramenta que promete melhorar bastante a qualidade/performance de estilos, chamada CSS Blocks.
O CSS Blocks é um compilador inspirado em CSS Modules, BEM e Atomic CSS que, usando o OptiCSS, promete entregar estilos bem mais enxutos e performáticos.
No momento da publicação deste artigo, é possível usar a ferramenta nas templating languages JSX/React e Glimmer (com Webpack, Broccoli ou Ember-CLI); por se tratar de um projeto open source, a tendência é que mais e mais opções surjam bem rapidamente.
Justificativa do CSS Blocks
Analisando os trade-offs envolvidos com estilos em bibliotecas/frameworks recentes, principalmente as que ensejam à modularização, constata-se que os benefícios de isolar estilos em seus respectivos componentes têm seus lados negativos:
- Nomes de classe com hash não compactam (compress) bem
- Seletores com escopo (scoped selectors) são mais custosos para corresponder (match)
- Nomes de classes prefixados podem ser mais longos e repetitivos
Por estas e outras dificuldades que a equipe LinkedIn identificou, lançaram o assim chamado
ergonomic, component-oriented CSS authoring system that produces high-performance stylesheets
Ou, numa tradução livre, um sistema ergonômico autoral de CSS-baseado-em-componente que produz folhas de estilo de alta performance.
Princípios do CSS Blocks
A proposta do CSS Blocks — ou “filosofia”, como preferem alguns — pode ser condensada em alguns pontos-chave:
- 1 arquivo CSS por componente
- Estilos “escopados” (scoped styles)
- Tempos de execução minúsculos
- Folhas de estilo ultra-rápidas
- Otimização para todo o projeto (project-wide optimization)
- Erros de CSS em tempo de compilação
- Eliminação de código morto
- Herança orientada a objetos
E é com estes pontos em mente que o pessoal da LinkedIn afirma que CSS Blocks é uma evolução de muitas soluções e melhores práticas existentes no desenvolvimento front-end, em uma união que almeja alcançar uma ferramenta realmente única.
Tecnicamente falando…
Dentro do uso de CSS Blocks, espera-se que os estilos do projeto sejam organizados em blocos. Cada bloco contém seletores de classe que visam diferentes elementos que trabalham juntos para criar uma “unidade de design”; cada classe pode estar em um ou mais estados diferentes. As regras para seletores em um bloco CSS são baseadas na metodologia BEM — com o detalhe que conta com uma sintaxe mais amigável ao desenvolvedor e um escopo automatizado. Em desenvolvimento, as classes e os atributos de estado de um bloco CSS são compilados para nomes de classes no estilo BEM.
O JavaScript e/ou os templates que fazem referência aos estilos do bloco são analisados em build time, então torna-se possível saber exatamente quais estilos são usados em quais elementos. Cada estrutura de aplicativo pode ter sua própria sintaxe para referenciar e manipular estilos dinamicamente em um bloco, de modo que pareça natural e corresponda às convenções dessa estrutura.
Sempre que possível, CSS Blocks inspirara-se em soluções existentes para acessar estilos em componentes, como classnames e css-modules. Os estilos de bloco analisados e as informações de análise de template são transmitidos para o OptiCSS, onde várias otimizações são executadas:
- Identificadores são reescritos para serem menores e mais amigáveis para algoritmos de compressão
- Seletores e declarações que não correspondem (match) a nenhum elemento são removidos
- Declarações de estilo duplicativo são reunidas (coalesced) em um novo seletor de classe (estilos que usaram esse seletor agora usarão a nova classe quando apropriado)
Quando o OptiCSS termina seu trabalho, o arquivo CSS tem muitas classes que são usadas para atribuir (assign) eficientemente uma ou mais declarações repetidamente no projeto. É criado um conjunto ideal de classes CSS atômicas para a aplicação. O JavaScript e/ou templates são então processados para que os novos seletores sejam usados corretamente onde quer que os estilos originais sejam usados.
Veja um exemplo de código original (esquerda) e depois de passado pela otimização do CSS Blocks (direita):
Pronto para o CSS Blocks?
O lançamento do CSS Blocks é bem recente. Ainda há muito o que saber sobre o que a ferramenta realmente pode fazer e, claro, descobrir até que ponto a comunidade conseguirá “forçar” o projeto para extrair os melhores benefícios da ferramenta, fazendo-a consolidar seu potencial declarado e oculto.
Pegando um “exemplo oficial”, a página inicial do LinkedIn tinha 1,9MB de CSS (156KB comprimido). Depois de a refazerem usando CSS Blocks, conseguiram chegar a 38KB de CSS… Descomprimido! Pegando o tamanho comprimido, o peso de todo o CSS da home page ficou em 9KB. Valendo-se das capacidades de code-splitting do CSS Blocks, conseguiram uma redução da entrega de CSS de 94%!
Apesar de mostrando um exemplo, neste artigo não tratamos especificamente da escrita de códigos, servindo mais para o anúncio do otimizador. Mas, claro, teremos muito conteúdo sobre CSS Blocks em artigos vindouros, então fique atento às novidades do desenvolvimento para web.
Até lá, visite o site oficial do CSS Blocks; se possível, contribua com o projeto e; como sempre, a gente se vê pela web!