Skip to content

Latest commit

 

History

History
267 lines (205 loc) · 22.8 KB

README.md

File metadata and controls

267 lines (205 loc) · 22.8 KB

Expert CSS

License Github Contributors Github Forks Awesome

Uma lista de leituras de conceitos, tecnologias, padrões de arquitetura e práticas modernas de CSS muito além do básico.

Uma caixa com fundo transparente e outline preto com os dizeres expertCss vazando pra fora dela. Declarações de CSS aparecem, ajustam a largura da caixa, centralizam o texto e, por último, aparece um emoji de joinha sinalizando que está tudo certo - Feito por Camilo Micheletto, via figma

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




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 Heydon Pickering
A Whole Cascade of Layers (the path to SBRDFLT) Mirian Suzanne
CUBECSS Andy Bell
Smashing Podcast Episode 36 With Miriam Suzanne: What Is The Future Of CSS? (transcrição) Mirian Suzanne
Modern alternatives to BEM Dave Rupert
Why is CSS so Weird? (video) Mirian Suzanne
Everything You Know About the Web Just Changed (video) Jen Simmons

 

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 Stephanie Eckles
Contextual Callouts with CSS Grid Jonathan Harrell
The Flexbox Holy Albatross Heydon Pickering
The Flexbox Holy Albatross: Reincarnated Heydon Pickering
Tetris And The Power Of CSS Heydon Pickering
Faster Layouts with CSS Grid (video) Mirian Suzanne
Subgrid for Better Card Layouts (video) Mirian Suzanne
Designing With Grid (video) Jen Simmons
CSS Grid Basics playlist (video) Jen Simmons
(Layout) Core Concepts Jen Simmons
Designing Intrinsic Layouts (video) Jen Simmons
Modern Layouts: Getting Out of Our Ruts” by Jen Simmons (video) Jen Simmons

 

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 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

 

Cores e CSS

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

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

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

 

Cascade Layers

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

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 1pode 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 e CSS

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

 

Propriedades e conceitos aprofundados

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

 

Mídias, Ferramentas e Fontes

  • 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.