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!
- A Cascata das Variáveis do CSS
- Uma Nova Sintaxe Para Media Queries
- Seletores CSS em Um Novo Nível
- Manipulando Cores Com CSS