CSS Blocks logo

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:

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:

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:

Para alcançar os ambiciosos objetivos de desenvolvimento/performance elencados, entra em cena também um outro projeto da LinkedIn, OptiCSS. O OptiCSS é um otimizador que faz sua mágica em estilos acontecer usando uma série de APIs e bibliotecas (opticss, template-api, element-analysis, resolve-cascade, util), mais algumas dependências internas, claro.

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):

CSS Blocks: exemplo de input/output

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!