Beto Muniz
  • Share

JS-in-CSS: Houdini

tech

Marca do CSS Houdini

Velhos tempos aqueles em que as discussões sobre CSS eram apenas sobre como compactar um arquivo .css ou sobre o uso de !important.

Hoje, com demandas mais complexas na web, torna-se cada vez mais complicado escolher o caminho correto para resolver as coisas.

Seja para quem está iniciando ou para quem já é experiente.

Dias passados...

Com o sucesso da componentização na web através dos conceitos propostos pelos Web Components, React.js, Vue.js, Angular.js entre outros, é possível afirmar que hoje também pensamos assim enquanto estamos trabalhando com CSS.

Até pouco tempo atrás, não faltavam palestras e artigos sobre BEM, SMACSS, OOCSS, Atomic CSS, que por sua vez, apenas otimizam a escrita do CSS, falhando bastante, e por limitações técnicas, na melhoraria da própria dinâmica do CSS.

Hoje…

O tempo passou, e evoluímos ainda mais a forma de escrever CSS, focando inclusive em tentativas de resolver essa falta de dinâmica do mesmo.

Com isso, hoje o mercado caminha com três vertentes principais:

_Scoped CSS_, _CSS Modules_ e _Styled Components_.

E veja só, não estou falando de técnica A ou biblioteca B, muito menos que uma é melhor do que a outra ou que existem somente estas abordagens, estou apenas citando as com conceitos mais sólidos e aceitos.

Mas para além destes conceitos, há algo mais inovador surgindo e que promete dar um passo definitivo no dinamismo do CSS.

Estou falando do CSS Houdini.

CSS Houdini

Já pensou em poder ter a mesma capacidade do Browser de controle do CSS? É isso que o Houdini quer oferecer.

E não se deixe enganar pela definição simples, pois o suporte vai desde a criação de propriedades para extender o CSS até a possibilidade de escrever blocos de lógica dentro so próprio CSS, indo bem além de que uma CSS Variable ou uma função calc() faz atualmente.

.el {
--color: cyan;
--multiplier: 0.24;
--pad: 30;
--slant: 20;
--background-canvas: (ctx, geom) => {
let multiplier = var(--multiplier);
let c = `var(--color)`;
let pad = var(--pad);
let slant = var(--slant);
ctx.moveTo(0, 0);
ctx.lineTo(pad + (geom.width - slant - pad) * multiplier, 0);
ctx.lineTo(pad + (geom.width - slant - pad) * multiplier + slant, geom.height);
ctx.lineTo(0, geom.height);
ctx.fillStyle = c;
ctx.fill();
};
background: paint(background-canvas);
transition: --multiplier .4s;
}
.el:hover {
--multiplier: 1;
}

E para conceitualizar, CSS Houdini é um conjunto de especificações desenvolvidas por uma força de trabalho da W3C que visa corrigir limitações impostas ao CSS no passado pelos browsers devido a falta de segurança, más escolhas e incapacidades tecnológicas da época.

Portanto, se hoje gastamos tempo definindo a melhor escolha para modularizar nosso código CSS, espere por discussões baseadas em onde iremos adicionar lógica de manipulação CSS.

Ah! E se você quiser ver na prática e até saber como utilizar as propostas do CSS Houdini desde já, acesse este link.

Conclusão

E com isso, encerro essa reflexão de onde viemos e para onde vamos com o CSS, pois mesmo com as especificações do CSS Houdini ainda em definição, todas visam apresentar um futuro concreto do CSS, e por consequência, do desenvolvimento web. Sendo assim, vamos ficar atentos nessa novidade.

💧 Gostou desse drop? Compartilhe-o. 🤩

E para receber meus conteúdos assim que eu publicar, me segue lá no Telegram 😋

  • Share It!
Copyright Beto Muniz © 2010-2020. All rights reserved.