Repensando CSS em JS
(dev.to)CSS é um elemento essencial para tornar interfaces de usuário bonitas e funcionais, mas, à medida que a escala cresce, gerenciar CSS se torna uma tarefa cada vez mais difícil.
Conflitos de estilo, queda de desempenho e dificuldades de manutenção atormentam muitos desenvolvedores.
Este artigo explica em detalhes uma nova abordagem para resolver esses problemas, especialmente o CSS in JS.
Partindo do contexto histórico do CSS, ele aborda uma ampla gama de temas, desde métodos modernos de estilização até sistemas de design do futuro.
A estrutura do texto é a seguinte.
- Definição e contexto do CSS em JS
1. O que é CSS em JS?
2. Contexto do CSS em JS - Contexto histórico do CSS e do design
3. Contexto do CSS
4. Contexto do design
5. Contexto dos sistemas de design - Análise de métodos de gerenciamento de estilo e uma nova proposta
6. Como o gerenciamento de estilos foi feito até agora?
7. Como os estilos devem ser gerenciados? - Plano concreto de implementação de CSS em JS
8. Por que existe CSS em JS?
9. Apresentando o projeto mincho
10. CSS amigável ao CSS em JS
11. CSS escalável em JS - Integração com sistemas de design
12. CSS em JS para sistemas de design
Em especial, este artigo apresenta a metodologia SCALE CSS e um novo conceito chamado StyleStack, e propõe o projeto mincho com base nisso. O objetivo é implementar em JS um CSS amigável ao CSS e escalável.
O objetivo final deste artigo é apresentar a desenvolvedores, designers e outras partes interessadas em projetos web a possibilidade de soluções de estilização melhores.
Embora seja um texto longo, obrigado pela leitura.
3 comentários
Desculpe por não estar apoiando o projeto, mas acho que a indústria de front-end deveria adotar uma visão mais de longo prazo e criar ferramentas ou convenções amplamente consensuais. Para quem já tem alguma experiência com stacks como SCSS, LESS, AngularJS, Angular 2.0 e React, as novas tecnologias de front-end parecem ser mais superengenharia do que o necessário e acabam soando desgastantes.
Se existe um consenso na web, ele são os padrões web. No CSS, seguem sendo discutidas e adicionadas continuamente funcionalidades como aninhamento, como no SCSS, classes, métodos de programação funcional, Web Components e outras.
Na minha opinião, como o próprio frontend não se diversificou há tanto tempo, parece que ainda estão testando de tudo um pouco.
Desde bibliotecas como React e Vue até bundlers, linters e tooling no geral.
Além disso, diferente da área de apps, não é como se uma única empresa definisse as melhores práticas e as espalhasse, então acho que a confusão é maior mesmo!!