Post-Processors CSS para iniciantes Dicas e Recursos

Pré-processamento de CSS é um conceito que a maioria dos desenvolvedores da Web já aprendeu ou leu sobre. Cobrimos o pré-processamento de CSS em grande detalhe para ajudar os desenvolvedores a se familiarizarem com essa tecnologia predominante. Mas e sobre pós-processadores?

Essas ferramentas relativamente novas são semelhantes no sentido de que afetam o fluxo de trabalho de desenvolvimento da web, no entanto eles operam no outro lado do desenvolvimento de CSS (“postar” desenvolvimento).

Neste post, gostaria de apresentar o noções básicas de pós-processamento, como funciona, por que você o usaria e compartilhe algumas bibliotecas / ferramentas que você pode usar para aprimorar seu jogo CSS com pós-processamento.

Post vs. pré-processamento

o revolução de pré-processamento aconteceu quando Sass / LESS acertou a cena. Essas ferramentas permitem que os desenvolvedores usem variáveis, loops, funções e mixins dentro do CSS. Isso quase faz o desenvolvimento básico de CSS semelhante a uma linguagem de programação com funcionalidade estendida.

Pós-processamento acontece depois que você já produziu o CSS simples, e quer estender ainda mais através da automação. Isso pode incluir estendendo os seletores de classe, ou prefixos de anexação automática para determinadas propriedades CSS.

De um modo geral, o pré-processamento tem sua próprias linguagens de folha de estilo, como Sass e LESS, que converter em CSS puro. O pós-processamento usa esse CSS básico e aplica automação / repetição.

Aqui está uma citação de uma postagem que também é a fonte da imagem acima. Eu acho que o autor Stefan Baumgartner resume a diferença brilhantemente.

De certa forma, ambos parecem ferramentas de automação, apenas trabalhando de maneiras diferentes. Por exemplo, uma dor comum resolvida pelo pós-processamento é prefixos de adição automática para propriedades CSS3 mais recentes.

Mas isso também pode ser feito no Sass com extensões. Então, há realmente uma diferença? Aqui está outra ótima citação da mesma postagem:

Embora isso possa ser verdade em um sentido teórico, a comunidade de desenvolvimento da Web ainda cria uma divisão entre essas ferramentas. Por esse motivo, eu recomendo enfaticamente que os desenvolvedores, pelo menos, leiam sobre pós-processadores e saibam o que podem fazer.

Ajuste o pós-processamento em seu fluxo de trabalho

Quase todas as referências PostCSS como o recurso definitivo para pós-processamento. No entanto, a equipe do PostCSS admitiu abertamente no Twitter mudando seu título porque o palavreado não faz mais sentido.

O PostCSS não é mais apenas uma ferramenta pré-CSS ou pós-CSS. Pode realmente trabalho em ambas as áreas! Isso explica ainda mais a citação anterior afirmando que todas as ferramentas CSS se resumem a uma coisa - em processamento.

O PostCSS usa plug-ins de JavaScript para automatize seu fluxo de trabalho de CSS, e você pode até escrever seu próprio plugin JS para estender a biblioteca PostCSS. Se você quiser começar com o PostCSS, confira este tutorial de introdução na Smashing Magazine. Se você já usa e entende o Sass, então você vai pegar o Post CSS rapidamente.

Para criar seu próprio fluxo de trabalho de processamento de pré / pós CSS, comece por fazendo uma lista de seus pontos de dor, tal como:

• gradientes de CSS com prefixo automático
• auto-organização para regras CSS
• acrescentando polyfills para certas propriedades
• gerando dimensões de imagem para imagens de fundo

Note que todas essas coisas podem ser feitas em pré e pós-processamento. É importante perceber que o pré / pós processamento de CSS está se fundindo rapidamente para se tornar um na mesma coisa.

Em vez de dividir seus objetivos em diferentes estágios de processamento, é melhor liste-os como objetivos, então vá em um procure as ferramentas certas.

Melhores ferramentas de pós-processamento

Eu tentei evitar mencionar extensões nesta seção, já que o Sass & PostCSS tem tantas coisas para escolher. Honestamente você poderia conviver com apenas essas bibliotecas, mas também quero oferecer algumas alternativas para soluções mais específicas.

Pleeease

Se você já trabalha com o Node.js, então Pleeease parece uma escolha óbvia. Tem muitos recursos típicos de processamento de CSS, como importar arquivos, variáveis ​​/ funções, auto-minificação e suporte a fallback para elementos mais recentes, como SVGs.

O site também tem um playground interativo para quem quiser experimentar a biblioteca online sem baixar uma cópia localmente.

Abençoar

Eu me lembro quando o Internet Explorer 6 ainda era um incômodo, e é bom saber que o desenvolvimento do IE melhorou - mas não muito. Embora eu adoraria dizer que o uso do IE está basicamente acabado, isso não parece ser verdade.

Felizmente, o Bless CSS é uma solução que detecta possíveis problemas relacionados ao IE no seu CSS, e cria soluções com pós-processamento. Ele é executado no Node.js, então se encaixa bem no fluxo de trabalho típico do NPM / Gulp.

CSSNext

Aqui está uma biblioteca muito legal que permite que você Construa CSS com funcionalidades mais avançadas atualmente não é suportado. A biblioteca CSSNext inclui suporte para funções estranhas do CSS4, tal como cinzento(), que atualmente estão presentes apenas nos rascunhos do W3C.

Eu não acho que todo desenvolvedor precisará desta biblioteca. É muito específico e não resolve problemas do dia-a-dia, mas pode dar-lhe um gosto das próximas especificações do CSS4 durante a conversão da sintaxe para o moderno CSS3.

Stylecow

E se suporte ao navegador é um problema para você, então Stylecow é uma necessidade. Esta poderosa biblioteca permite desenvolver CSS apenas para o seu navegador favorito. Então, você pode executar a ferramenta de linha de comando através do Node, e seu CSS será atualizado para todos os navegadores que você deseja oferecer suporte.

Você pode baixar o Stylecow do GitHub e ele vem com uma documentação incrivelmente detalhada.

-sem prefixo

Por fim, quero compartilhar o -sem prefixo biblioteca que também é uma ferramenta amada para o desenvolvimento CSS, pois permite que você usar propriedades CSS não definidas. Todos querem usar as propriedades CSS modernas, como animações e gradientes, mas ninguém quer copiar / colar o código detalhado manualmente.

Com este plugin você nem precisa rodar seu CSS através de um pós-processador no seu computador. Ele também pode funcionar como um navegador que é executado no computador do usuário para atualizar automaticamente arquivos CSS.

Autoprefixer, que faz parte da biblioteca PostCSS, é provavelmente uma escolha melhor para pós-processamento local. É por isso que eu disse antes que se você usar o LESS ou o Sass junto com o PostCSS, você terá tudo o que precisa para um fluxo de trabalho de desenvolvimento de CSS impressionante.

Empacotando

O pós-processamento é mais um slogan do que uma tecnologia real, embora tenha seu lugar no fluxo de trabalho CSS, como todo o processo de escrever CSS moderno foi drasticamente aprimorado por essas ferramentas. Eu só posso recomendar que os desenvolvedores se aprofundem para encontrar o que funciona melhor para eles.

Se você está procurando ainda mais informações sobre o pós-processamento, dê uma olhada nestes artigos relacionados:

• O que nos salvará do lado negro dos pré-processadores CSS?
• Um olhar para escrever CSS futuro com PostCSS e cssnext
• Pré-processamento de CSS (SASS ou LESS) vs CSS Postprocessing