Apresentar sobre os 3 pilares da arquitetura CSS no Front in Sampa de 2024 me deu a oportunidade de ler muita coisa sobre CSS do ponto de vista teórico, o que sinto que me deu uma visão mais madura, holística e estratégica do desenvolvimento de CSS em escala.
Nesse rolê descobri pontos de vista sobre o CSS que além de reacenderem minha curiosidade me deixaram empolgado pra tomar novas decisões com essas novas visões de mundo.
Cyclomatic Complexity: Logic in CSS de Harry Roberts
Complexidade ciclomática é uma métrica de complexidade de um programa - cada controle de fluxo e cada saída aumenta a complexidade de um método, classe ou aplicação.
No CSS complexidade pode significar seletores lentos, pouco reutilizáveis e excessivamente específicos.
div.sidebar .login-box a.btn span {}
/*
Pode ser lido como
IF (inside .btn)
AND IF (on a)
AND IF (inside .login-box)
AND IF (inside .sidebar)
AND IF (on div)
*/
"Think of your selectors as mini programs"
Link do artigo no blog CSSWizardry, em inglês
Conditional CSS por Ahmad Shadeed
Ainda sobre o valor de ver CSS como uma linguagem com operações lógicas, não apenas falando de media queries que fazem avaliações lógicas pra tornar código disponível de acordo com as condições do contexto, mas todo estado interativo, a presença ou não de um próximo seletor, de um índice de seletor ou da presença de um filho específico (com :has).
É um artigo que é extremamente atual com as novas propriedades e a mudança de paradigma causada por :has, container queries e as já existentes mas não tão exploradas support queries.
Link do artigo no blog do Ahmad Shadeed, em inglês
The CSS Cascade por Amelia Wattenberger
Cascade Stylesheets, e ainda assim é muito comum ver erros de CSS que envolvem a forma e ordem que o CSS é escrito. Nesse blog post lindo da Amelia Wattenberger de forma simples e visual ela demonstra como a cascata funciona e trás insights de como pensar seu CSS com ela em consideração.
Link do artigo no blog da Amelia Wattenberger, em inglês
A Brief History of CSS-in-JS: How We Got Here and Where We're Going por Dan Ward
Quanto mais precisei usar CSS-in-JS mais me incomodavam os seus pontos negativos, como bundle size, alterações runtime e uma arquitetura de reuso versus co-locação confusa. Com variáveis CSS se torna ainda mais obsoleto preferir arrow function versus injetar variáveis via styles - é muito mais simples e o CSS lida bem com esse tipo de escopo.
É nesse artigo que passamos entender porque e como existe, com links incríveis citados por todo ele.
Link do artigo no medium, em inglês
CSS and the critical path por Stoyan Stefanov
CSS é o maior ofensor na lentidão de carregamento web, de CSS não utilizado e excessivo, seletores e operações que na interação afetam mais nodes que deveriam até seletores complexos e lentos que demandariam menos overwork e mais arquitetura.
Nesse artigo você vai entender como o navegador funciona no carregamento, compliação e priorização desse asset crítico e como tornar o caminho até ele menos pesaroso pro usuário final.
Link do artigo no blog do Stoyan Stefanov, em inglês
Após ler, assista esse vídeo do Harry Roberts sobre performance CSS no Frontend United
Responsive Web Design
Ethan Marcotte cunhou o termo "responsividade" com base em montagens arquitetônicas que de certa forma respondiam à ocupação do seu espaço, esse vislumbre inspirado no texto de John Alsopp no ano 200 que clamava uma Web mais livre e que ditasse menos regras pros usuários em um mundo numa crescente de dispositivos mudou a forma como escrevemos interfaces e vai mudar sua forma de vê-las também.
Link do artigo no blog A List Apart, em inglês
Após ler, assista esse vídeo da Jen Simmons com um olhar moderno da responsividade - os layouts intrínsecos
Pra fechar
The future of loading CSS por Jake Archibald
Conheci o Jake assistindo HTTP 203 no canal do Google e sigo o blog dele desde então. Nesse artigo ele explora a possibilidade de incluir links nas dobras do <body> pra carregar de forma progressiva os estilos do que está abaixo da "dobra".
Não sabia que era possível? É, TIL também!
Link do artigo no blog do Jake, em inglês
Após ler, assista o show HTTP 203 no canal Chrome for Developers, aprendo muito com o Jake e seus convidades
Top comments (7)
Serio, adorei as indicações! Eu ando muito por fora do CSS e muito focada em angular, ja vou separar aqui pra ler
Pensa em falar sobre Angular no futuro?
Principalmente pq é sintomático banco escolher Angular ou o combo de angular e Java que é tão comum
Acho que vai acabar acontecendo, porque é o meu dia a dia de trabalho (não só isso, mas também isso) so que vou fazer mais na maciotinha, não estou com planos de ganhar algum prêmio ou sei lá. Mas, acho que eu já estou tão acostumada a produzir conteúdo do que estou trabalhando ou estudando que é estranho pra mim não faze-lo hahahah
Complexidade Ciclomática é um baita tema! Voce falou sobre na palestra da frontin, amei
Quero fazer algo só disso com mais exemplos de estratégias, o Harry Roberts andou, quero muito correr!
Eu gosto muito dessa ideia de explorar assuntos já trabalhados, dar continuidade na bola que alguém lançou e não temos alguém que vimos cortando ela hahaha eu super apoio!!!