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.

Resumo

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%!

Leia o artigo completo em: http://desenvolvimentoparaweb.com/css/css-blocks-linkedin-otimizador-css/