Beto Muniz

JS-in-CSS: Houdini

tech3 min read

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.