# LinkedIn anuncia CSS Blocks, o novo otimizador de CSS > Descubra CSS Blocks da LinkedIn: tecnologia que otimiza automaticamente seu CSS. Aprenda como reduzir drasticamente o tamanho dos arquivos CSS. Revolucionário! URL: https://dpw.dev/css/css-blocks-linkedin-otimizador-css/ Publicado em: 2018-04-27 Categoria: css Tags: analise, ferramentas, performance, react, series Autor: Tárcio Zemel ![CSS Blocks logo](/images/blog/css-blocks-linkedin-otimizador-css/wordmark-animated.012177e4.svg) Há poucos dias atrás, [a LinkedIn surpreendeu a comunidade front-end com uma excelente notícia](https://engineering.linkedin.com/blog/2018/04/css-at-scale--linkedins-new-open-source-projects-take-on-stylesh): o lançamento de uma ferramenta que promete melhorar bastante a qualidade/performance de estilos, chamada **CSS Blocks**. O [CSS Blocks](http://css-blocks.com/) é um compilador inspirado em CSS Modules, BEM e Atomic CSS que, usando o [OptiCSS](https://github.com/linkedin/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](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/jsx) e [Glimmer](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/glimmer) (com [Webpack](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/webpack), [Broccoli](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/broccoli) ou [Ember-CLI](https://github.com/linkedin/css-blocks/blob/master/packages/@css-blocks/ember-cli)); [por se tratar de um projeto open source](https://github.com/linkedin/css-blocks), 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](https://github.com/JedWatson/classnames) e [css-modules](https://github.com/css-modules/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) > **Dica:** Para alcançar os ambiciosos objetivos de desenvolvimento/performance elencados, entra em cena também um outro projeto da LinkedIn, **OptiCSS**. O [OptiCSS](https://github.com/linkedin/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](/images/blog/css-blocks-linkedin-otimizador-css/1524792225-css-blocks-input-output.webp) ## 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](https://twitter.com/desenvolvweb). Até lá, visite o site oficial do CSS Blocks; se possível, [contribua com o projeto](https://github.com/linkedin/css-blocks) e; como sempre, a gente se vê pela web! --- Fonte: [dpw - desenvolvimento para web](https://dpw.dev/) (pt-BR). Guia para agentes: https://dpw.dev/llms.txt Índice completo: https://dpw.dev/sitemap-index.xml Feed: https://dpw.dev/rss.xml