Expert CSS

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.

---

Índice

• Expert CSS
  • Índice
  • Conceitos
  • Layout
  • Especificidade
  • Variáveis CSS (Custom properties)
  • Cores e CSS
  • Tipografia
  • Container Queries
  • Cascade Layers
  • Logical Properties
  • Core Web Vitals e CSS
  • Propriedades e conceitos aprofundados
  • Mídias, Ferramentas e Fontes

---

Conceitos

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.

Artigo	Autor
Understanding Layout Algorithms	Josh Comeau
You Don’t Need A UI Framework	Josh Comeau
Chasing the Pixel-Perfect Dream	Josh Comeau
The State Of Pixel Perfection	Ahmad Shadeed
Every Layout - Rudiments	Andy Bell e Heydon Pickering
Mobile-First CSS: Is It Time for a Rethink?	Patrick Clancey
The Guide To Responsive Design In 2023 and Beyond	Ahmad Shadeed
Conditional CSS	Ahmad Shadeed
Inside the mind of a frontend developer: Article layout	Ahmad Shadeed
Tweaking In The Browser	Ahmad Shadeed
Defensive CSS	Ahmad Shadeed
The State Of Mobile First and Desktop First	Ahmad Shadeed
Critical CSS? Not So Fast!	Harry Roberts
CSS: A New Kind Of JavaScript

 

Layout

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.

Artigo	Autor
Don't use flexbox for overall page layout	Jake Archibald
An Interactive Guide to Flexbox	Josh Comeau
Full-Bleed Layout Using CSS Grid	Josh Comeau
Practical CSS Grid: Adding Grid to an Existing Design	Eric Meyer
The Story of CSS Grid, from Its Creators	Aaron Gustafson
Grid for layout, Flexbox for components	Ahmad Shadeed
Laying out Forms using Subgrid	Mirian Suzanne
Learn CSS Subgrid	Ahmad Shadeed
Using Position Sticky With CSS Grid	Ahmad Shadeed
Create a split, faux-container layout with CSS Grid and Flexbox	Andy Bell
The new responsive: Web design in a component-driven world	Una Kravets
min(), max() e clamp(): três funções CSS lógicas para usar hoje	Una Kravets
Modern CSS Solutions	Stephanie Eckles
Style Stage

 

Especificidade

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 (Custom properties)

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