A primeira pergunta que eu faço é se você já começou a utilizar PostCSS em seus projetos? Se você respondeu “sim”, parabéns!
Caso ainda não tenha começado a utilizar, não se preocupe, vamos começar a aprender agora. PostCSS, como ele mesmo se define, é uma ferramenta para transformar CSS com JavaScript.
O PostCSS é diferente dos pré-processadores que existem no mercado como Sass, Less e Stylus, ele apenas transforma o CSS acessível ao JavaScript e, assim, torna possível a escrita de novos plugins, ou deixa disponível a utilização/contribuição de algum plugin já existente.
Instalação
PostCSS é um utilitário de linha de comando e pode ser instalado através do npm.
shell
$ npm install -g postcssConfiguração
O PostCSS pode ser utilizado de diversas maneiras, como por exemplo:
- Adicionado aos nossos Task Runners;
- Utilizando um Loader do webpack;
- Através da linha de comando (CLI).
Não explicaremos como fazer a utilização através de cada uma das possíveis configurações, mas, caso seja necessário ou haja alguma dúvida, podemos sempre consultar a documentação de utilização no site do PostCSS.
Conceitos
Depois da instalação e configuração, é hora de codificar. Vamos conhecer alguns dos conceitos utilizados no PostCSS e como aplicá-los:
- Variáveis
- Importações
- Seletores Aninhados
Variáveis
Variáveis servem para armazenar valores, que muitas vezes se repetem. Com a utilização de variáveis, podemos reaproveitar o código e prover uma fácil manutenção. Você pode usar variáveis dentro de valores, seletores e parâmetros da regra.
Exemplos:
Declaração e utilização de uma variável
$colorRed = red;
p {
color: $colorRed;
}Interpolação de Variáveis = Injeção de variáveis em strings
$side: top;
$offset: 15px;
.button {
padding-$(side): $offset;
}Vejamos uma possível solução que faz a otimização do seguinte trecho de código, utilizando o conhecimento sobre variáveis.
Ruim
.nav {
width: calc(6 * 120px); /* número de .nav-item na tela * largura de cada item. */
border-bottom: 1px solid #056ef0;
}
.nav-item {
color: black;
padding-top: 30px; /* o padding é a largura do item / 4; */
transition: color .3s ease-in-out;
}
.nav-item:hover {
color: #056ef0;
}Bom
$navItem: 120px;
$colorBlack: black;
$colorBlue: #056ef0;
nav {
width: calc(6 * $navItem);
border-bottom: 1px solid $colorBlue;
}
.nav-item {
color: $colorBlack;
padding-top: calc($navItem / 4);
transition: color .3s ease-in-out;
}
.nav-item:hover {
color: $colorBlue;Plugins utilizados
Para este conceito, fizemos a utilização de um plugin conhecido como simple-vars.
Importações
As importações são bastante utilizadas pois trazem diversos benefícios, como, por exemplo, o reaproveitamento de código e estruturação/separação dos arquivos de uma forma bastante flexível.
Cada equipe define as suas preferências e metodologias a serem utilizadas em seus projetos, sendo assim, manter os arquivos separados contribui para uma boa manutenção do código.
Ao utilizarmos o plugin postcss-import o PostCSS irá utilizar as regras do plugin ao utilizarmos o @import e não mais as regras nativas do CSS.
Exemplos
Declaração de variáveis em um arquivo específico de variáveis:
/* variables.css */
$colorPrimary = black;
$colorSecundary = #056ef0;Utilização do @import e respectivamente das variáveis
/* main.css */
@import 'variables'
body {
background-color $colorSecundary;
}
h1 {
color $colorPrimary;
}
.button {
border-radius 5px;
}É possível fazer a importação utilizando o conceito de módulos do NodeJS com o nosso plugin. Podemos navegar pelos diretórios do projeto, e até mesmo no node_modules para importarmos um arquivo de estilos.
Vejamos uma possível solução que faz a separação dos arquivos de uma forma interessante, utilizando o conhecimento sobre imports.
Ruim
/* main.css */
$colorPrimary = black;
$colorSecundary = #056ef0;
$colorTertiary = #fff;
$buttonWidth = 100px;
$buttonPadding = 15px;
body {
background-color $colorSecundary;
}
h1 {
color $colorPrimary;
}
.button {
border-radius 5px;
width: $buttonWidth;
padding: $buttonPadding;
color: $colorPrimary;
border: 2px solid $colorPrimary;
}
.button:hover {
border: 2px solid $colorTertiary;
}Bom
/* variables.css */
$colorPrimary = black;
$colorSecundary = #056ef0;
$colorTertiary = #fff;
$buttonWidth = 100px;
$buttonPadding = 15px;
/* buttons.css */
@import 'variables'
.button {
border-radius 5px;
width: $buttonWidth;
padding: $buttonPadding;
color: $colorPrimary;
border: 2px solid $colorPrimary;
}
.button:hover {
border: 2px solid $colorTertiary;
}
/* main.css */
@import 'buttons'
body {
background-color $colorSecundary;
}
h1 {
color $colorPrimary;
}Plugins utilizados
Para este conceito, fizemos a utilização de um plugin conhecido como postcss-import.
Seletores Aninhados
Este conceito apresenta como aninhar uma regra de estilo dentro de outra, com o seletor da regra filho relativo ao seletor da regra pai. Além de aumentar a modularidade e a capacidade de manutenção dos nossos arquivos de estilo, esse recurso permite que estilos relacionados sejam agregados em uma única estrutura dentro de um arquivo CSS, melhorando a legibilidade e a facilidade de manutenção.
A W3C tem uma especificação própria de como utilizar o nested CSS Nesting Module Level 3, e há um plugin conhecido CSS Nestingpara PostCSS que segue essa especificação. Todavia utilizaremos o plugin conhecido como PostCSS Nested que segue as regras do Sass.
Exemplos
Declaração de um bloco com seletores aninhados:
.nav {
background: black;
&__list {
background: red;
&__item {
background: white;
}
}
&__link {
background: blue;
&--active {
background: green;
}
}
}Após processado, teremos o seguinte resultado:
.nav {
background: black;
}
.nav__list {
background: red;
}
.nav__list__item {
background: white;
}
.nav__link {
background: blue;
}
.nav__link--active {
background: green;
}É possível fazer diversas combinações capazes de trazerem diversos benefício, mas é claro que há alguns problemas. Vejamos uma possível solução para otimizar o código aninhado abaixo, utilizando o conhecimento sobre Nested.
Ruim
.form {
background-color: #ddd;
}
.form .button, .form .input {
width: 50%;
display: block;
}
.button {
background-color: #06f;
color: #fff;
font-size: 1.000em;
font-weight: 500;
}
.input {
border: 1px solid #fff;
color: #000;
font-weight: 500;
}
.button:hover, .input:hover {
opacity: .75;
}Bom
.form {
background-color: #ddd;
& .button,
& .input {
width: 50%;
display: block;
}
}
.button {
background-color: #06f;
color: #fff;
font-size: 1.000em;
font-weight: 500;
&:hover {
opacity: .75;
}
}
.input {
border: 1px solid #fff;
color: #000;
font-weight: 500;
&:hover {
opacity: .75;
}
}Plugins utilizados
Para este conceito, fizemos a utilização de um plugin conhecido como PostCSS Nested.
Conclusão
Essa foi uma breve introdução sobre alguns conceitos básicos e importantes do PostCSS.
Sabendo que o PostCSS “apenas” torna o CSS acessível em JavaScript, podemos compreender que ele nos trás inumeras possibilidades em forma de plugins e ferramentas personalizadas. Em resumo, o PostCSS é mais bem definido como um ecossistema de plugins e ferramentas.
Como sabemos, não existe bala de prata, e cada equipe pode ter uma ou diversas soluções para seus problemas, mas não deve ser responsabilidade de uma única ferramenta resolver todos os problemas.
Então, agora que chegamos até aqui, será que você se sentiria confiante para utilizar ele em seus projetos?
Espero que sim!
Se você ficou curioso e quer aprender mais, o primeiro passo recomendado é seguir a documentação oficial e começar a codificar 🙂