Uma lista de leituras de conceitos, tecnologias, padrões de arquitetura e práticas modernas de CSS muito além do básico.
CSS pode ser um pouco frustrante as vezes, principalmente porque ele demanda tanta dedicação quanto Javascript e seus frameworks. Visando entrega e funcionalidade, são poucas as oportunidades que temos de exercer práticas modernas de CSS, mesmo que em forma de melhoria contínua, então a leitura e a prática constante se fazem ainda mais importante.
Nesse repositório vou agregar leituras do que considero práticas avançadas de CSS - mas levem a palavra "avançado" não como uma tentativa de delimitar o que acredito ser complexidade, mas como uma sugestão pessoal com base em cursos que consumi e oportunidades que tive. Na minha experiência, talvez hajam pouquíssimos trabalhos que cobrem esse nível de CSS de você, arquitetura de CSS por assim dizer, então não se cobre tanto se o que você ler aqui parecer complexo, abstrato e talvez um pouco desnecessário. Dito isso, talvez muito do que você lerá aqui será um trabalho que talvez só a paixão e o entusiasmo justifique ter.
Todos os artigos citados aqui são de autores e autoras que acompanho, li e respeito o conteúdo. Se você ficou incomodade com a ausência de conteúdos em português, saiba que eu também estou, e estou ativamente aberto e a procura de conteúdo de CSS de alta qualidade, e eu tenho certeza que nós o temos, então peço encarecidamente sua ajuda pra furar essa bolha.
As atuais categorias listadas abaixo foram criadas e moldadas de forma a agrupar materiais com base no meu interesse pessoal, e minha intenção com esse repositório é fazer dessa lista muito mais do que isso por intermédio do Open Source. Se você conhece algum material de qualquer natureza que agregue nessa lista, dê uma olhada no nosso guia de contribuição e mande um PR! Será muitíssimo bem recebida.
Esse material é licenciado por Creative Commons Zero v1.0 Universal.
Quem quiser conhecer o que eu escrevo, por ora estou no DevTo, bora conectar por lá!
Esse repositório foi inspirado no trabalho incrível do Awesome-A11y do Bruno Pulis, recomendo muito conhecer.
Pra uma boa arquitetura CSS é necessário desenvolver uma clareza sobre como esse funciona conceitualmente. Essa sessão de artigos aborda e questiona conceitos que geralmente vimos de forma muito conceitual no início e que precisamos contantemente desafiá-los e aplicar eles de forma que faça sentido pro paradigma atual.
Padrões e conceitos de Layouts com CSS. Cada vez que o paradigma web avança, a comunidade desenvolve uma série de padrões de layout pensados em resolver os desafios daquele tempo. O Bootstrap popularizou muitos padrões importantes na época, voltado pra conceitos que eram modernos como mobile-first e responsividade. Essa sessão é interessante pra entender que padrões fazem sentidos no layout da web contemporânea, pensando também nas ferramentas novas e nos problemas que elas resolvem. Recomendo também todos os artigos do Advanced Layout Patterns e os artigos gratuitos do Every Layout.
Especificidade é um tópico muito importante pois molda a forma que você acessa elementos e declara suas regras no CSS. Metodologias como BEM, seletores como :has() e :where() e tecnologias como Cascade Layers são grandes avanços no controle da especificidade, principalmente em grande escala, mas o conhecimento do coneito básico de como o navegador calcula a precedência de CSS ainda se faz necessária pra usufruir de todo o poder dessas ferramentas.
| Artigo | Autor |
|---|---|
| The CSS Cascade | Amelia Wattenberger |
| CSS specificity and the cascade | Andy Bell |
| Specifishity | Estelle Weyl |
Variáveis CSS mereceram um tópico só pra elas pois são extremamente poderosas na criação de variantes, definição de design tokens, dark mode e muito mais. O Tailwind, por exemplo, conseguiu escalar o seu design system usando composição de variáveis, já OpenProps é um framework construído inteiramente de variáveis CSS.
| Artigo | Autor |
|---|---|
| Global and Component Style Settings with CSS Variables | Sara Soueidan |
| CSS Custom Properties In The Cascade | Miriam Suzanne |
| Using Custom Property “Stacks” to Tame the Cascade | Miriam Suzanne |
| Unlocking the Benefits of CSS Variables | Jonathan Harrel |
| CSS Variables for React Devs | Josh Comeau |
| The Power of Composition with CSS Variables | Maxime Heckel |
| Composing the Uncomposable with CSS Variables | Adam Watham |
| 10 powerful ways to use CSS variables | Adam Argyle |
| Component Variants with Scoped CSS Variables | Jonathan Harrell |
| Unlocking the Benefits of CSS Variables | Jonathan Harrell |
| Live Theming with CSS Variables | Jonathan Harrell |
CSS está progressivamente dando suporte pra diversas funções de cores, permitindo ainda mais fidelidade com designs, facilidade com acessibilidade em relação à cor e a construção de paletas e gradientes mais expressivas. De antemão, recomendo seguir o perfil do Twitter do Adam Argyle, DevRel no Chrome e membro do CSSWG pra se atualizar desse assunto.
| Artigo | Autor |
|---|---|
| Lights and Shadows | Bartosz Ciechanowski |
| Unlocking Colors | Brian Kardell |
| Calculating Color: Dynamic Color Theming with Pure CSS | Una Kravets |
| A color-contrast() strategy for complimentary translucent backgrounds | Adam Argyle |
| Gradient hue interpolation | Adam Argyle |
| LCH Luminance vs HSL Lightness | Adam Argyle |
| Improving Color on the Web | Dean Jackson |
Tipografia infelizmente é um campo pouco explorado, mas recheado de possibilidades. O conhecimento de fontes pode ampliar os limites da nossa criatividade a respeito do asset mais valioso de um site - o conteúdo.
| Artigo | Autor |
|---|---|
| Fluid typography with CSS clamp | Andy Bell |
| Pixels vs. Relative Units in CSS: why it’s still a big deal | Kathleen McMahon |
| Font Hacking | Heydon Pickering |
| Customizing Color Fonts on the Web | Myles C. Maxfield e David Jonathan Ross |
Container Queries mereceu um tópico só pra si por ser algo emergente que vai mudar completamente o paradigma de layout nos próximos anos. Não vale a pena dispensá-lo por não estar evergreen, pois observando os avanços do browser interop, é uma tecnologia que logo logo poderá ser massivamente adotada, mesmo apenas como melhoria contínua.
| Artigo | Autor |
|---|---|
| Component-level art direction with CSS Container Queries | Sara Soueidan |
| Next Gen CSS: @container | Una Kravets |
| CSS container queries are finally here | Ahmad Shadeed |
| CSS Style Queries | Ahmad Shadeed |
| A Primer On CSS Container Queries | Stephanie Eckles |
Apesar de não ter um suporte bom o bastante pra ser utilizada sem o preset-env do PostCSS, já tem suporte o bastante pra ser utilizada em projetos pessoais com alguma parcimônia. Sobre o tópico recomendo seguir a Miriam Suzanne, membra do CSSWG e do SassCSS.
| Artigo | Autor |
|---|---|
| A Complete Guide to CSS Cascade Layers | Miriam Suzanne |
| Making Sense of CSS Layers and Scope (video) | Miriam Suzanne |
Logical properties se referem a propriedades que já conhecíamos, como margin, width e border, mas orientadas de acordo com o eixo de leitura do site. Logical Properties Level 1 já pode ser progressivamente adotada e deixará o seu layout extremamente resiliente de forma internacional.
| Artigo | Autor |
|---|---|
| Digging Into CSS Logical Properties | Ahmad Shadeed |
| CSS Logical Properties | Andy Bell |
Core Web Vitals (CWV) é o conjunto de métricas que definem o estado da performance de uma página web. O CSS é um recurso crítico no carregamento de uma página, pois seu site é renderizado apenas após o DOM e o CSSOM serem lidos por completo, formando a render tree. Se você não conhece o conceito, recomendo comecar por Core Web Vitals e Critical Rendering Path. Nesse último tópico, a Google tem um nanodegree gratuito sobre o assunto ministrado por Ilya Grigorik e Cameron Pittman.
| Artigo | Autor |
|---|---|
| CSS para Web Vitals | Una Kravets e Katie Hempenius |
| Extraia CSS crítico | Milica Mihajlija |
| Defer non-critical CSS | Demian Renzulli |
| How to remove unused CSS from a site | Chris Coyier |
Nessa sessão coloquei artigos variados sobre propriedades e técnicas que expandiram a minha visão sobre a capacidade que certas propriedades tem quando você as entende um pouco melhor. Parecido com esse tópico, recomendo também a playlist Speedy CSS Tips do Jhey Thompkins.
| Artigo | Autor | Tema |
|---|---|---|
| Cubic Bézier: from math to motion | Maxime Heckel | Animação |
| What does 100% mean in CSS? | Amelia Wattenberger | Sizing |
| The master guide to smooth, realistic shadows in CSS | Devang Saklani | Shadows |
| Relative sizing with EM units | Andy Bell | Unidades |
| Dark Mode by Local Sunlight | Chris Nicholas | Dark Mode |
| Advanced CSS-Only HTML Form Styling | Jonathan Harrell | Forms |
| What’s the Deal with Margin Collapse? | Jonathan Harrell | Forms |
| Better Typography with Font Variants | Jonathan Harrell | Forms |
| CSS Nesting | Adam Argyle | Nesting |
| Thinking About The Cut-Out Effect: CSS or SVG? | Ahmad Shadeed | Masking / SVG |
- CSSStats - Audit de CSS que mostra um dashboard com suas regras, seletores e um score de especificidade.
- Yellow Lab Tools - Faz audit de performance da sua página, mas possui informações bem bacanas de performance CSS, dando uma nota pra complexidade e code smells de CSS do seu site.
- Project Wallace - De todas que já vi é a ferramenta de audit mais completa, mostra as at-rules, seletores, nível de complexidade, valores, tudo em um dashboard muito bonito e organizado.
- The CSS Podcast - Jamais pensei que pudesse aprender tanto CSS apenas ouvindo. Disponível também nas principais plataformas de streaming de áudio.
- Life of a Pixel (vídeo) - Documentário importantíssimo sobre o que acontece na engine do navegador pra um píxel renderizar na tela. Ministrado pela Chrome University.
- Aprenda CSS - Um curso de CSS muito completo desenvolvido pela Google.
- Component Patterns e Theming Patterns - Lista de padrões de desenvolvimento de componentes e temas criada pelo Adam Argyle. Todos os exemplos possuem repositório e vídeo. Você pode também acessar a playlist com apenas os vídeos.
- DevTools Tips (video) - Chrome é meu navegador favorito e nessa playlist a Jecelyn Yeen ensina tudo o que você precisa saber pra extrair o melhor dele.
- Design in the Browser (video) - Nessa playlist a Una Kravets ensina, entre outras coisas, uma série de ferramentas e práticas de layout com CSS.