O CSS do Futuro

Já existem especificações garantindo funcionalidades incríveis para o CSS: variáveis; uma nova sintaxe para media queries; nesting; novos seletores, valores e propriedades. E você pode usá-las, hoje.

Neste artigo, introduzo uma série de artigos relacionados às principais funcionalidades do CSS do futuro, além da ferramenta CSSNext, que permite que você as utilize sem esperar o suporte do navegador.

(A fins didáticos, é possível assemelhar o CSSNext ao Babel, que, por sua vez, também permite desenvolver com o JavaScript do futuro ao transpilar o código JavaScript da próxima geração para um código suportado pelos navegadores atuais.)

Ao final desse artigo, você saberá como desenvolver, hoje, com o CSS do futuro.


Introdução ao PostCSS

O CSSNext está relacionado com PostCSS. Mas o que é o PostCSS, afinal?

O PostCSS é apenas uma ferramenta que permite (pré ou pós) processar o CSS através de plugins em JavaScript. Um desses plugins é o CSSNext – assim como, por exemplo, o Autoprefixer, que trabalha na etapa de pós-processamento do CSS, adicionando vendor prefixes.

A transformação de estilos é viabilizada de forma integralmente agnóstica: nada é dito sobre como e com o que será feito. Com o PostCSS, você é responsável pelo workflow de processamento do estilo. É possível utilizar funcionalidades pré-processadas e/ou sintaxe do Sass, minificar e adicionar vendor prefixes – tudo de forma “plugável”!

Como o PostCSS nunca é utilizado sozinho, o próximo passo é plugar o CSSNext a ele.

Como usar o CSSNext

Se você quiser apenas testar as funcionalidades dos novos módulos do CSS, você pode brincar com o CSSNext no navegador.

No workflow

Em um ambiente de desenvolvimento, é necessário usá-lo com o PostCSS. A documentação do CSSNext guia você para configurá-lo em seu workflow, seja com Webpack, Browserify, Gulp, Grunt, […], ou interface de linha de comando.

Em todos os casos, a configuração se resume a passar um array com os processadores desejados para o PostCSS. Nesse caso, o processador a ser plugado é apenas o postcss-cssnext:

$ npm install postcss-cssnext --save-dev

Principais Funcionalidades

Aprofunde-se nas principais funcionalidades do CSS do Futuro através dos artigos abaixo. Abra o playground do CSSNext e bons estudos!