expert-css

Repositório contendo materiais de estudo de CSS avançado
https://github.com/Allyhere/expert-css

Last synced: about 14 hours ago
JSON representation

<a id="mídias-ferramentas-e-fontes"></a>Mídias, Ferramentas e Fontes
- 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.
- The CSS Podcast - Jamais pensei que pudesse aprender tanto CSS apenas ouvindo. Disponível também nas principais plataformas de streaming de áudio.
- CSSStats - Audit de CSS que mostra um dashboard com suas regras, seletores e um score de especificidade.
- 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.
- 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](https://www.youtube.com/playlist?list=PLNYkxOF6rcICgS7eFJrGDhMBwWtdTgzpx).
- Component 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](https://www.youtube.com/watch?v=MR7dClW6iBg&list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ&ab_channel=GoogleChromeDevelopers).
- 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.
- 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.
- Aprenda CSS - Um curso de CSS muito completo desenvolvido pela Google.
- 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.
- 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](https://www.youtube.com/playlist?list=PLNYkxOF6rcICgS7eFJrGDhMBwWtdTgzpx).
- Component 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](https://www.youtube.com/watch?v=MR7dClW6iBg&list=PLNYkxOF6rcIAaV1wwI9540OC_3XoIzMjQ&ab_channel=GoogleChromeDevelopers).
- 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.
<a id="variáveis-css-custom-properties"></a>Variáveis CSS (Custom properties)
- Tailwind - props.style/) é um framework construído inteiramente de variáveis CSS.
- Global and Component Style Settings with CSS Variables
- CSS Custom Properties In The Cascade
- Using Custom Property “Stacks” to Tame the Cascade
- Unlocking the Benefits of CSS Variables
- CSS Variables for React Devs
- The Power of Composition with CSS Variables
- Composing the Uncomposable with CSS Variables
- 10 powerful ways to use CSS variables
- Component Variants with Scoped CSS Variables
- Live Theming with CSS Variables
- Unlocking the Benefits of CSS Variables
- Component Variants with Scoped CSS Variables
- Live Theming with CSS Variables
<a id="conceitos"></a>Conceitos
<a id="propriedades-e-conceitos-aprofundados"></a>Propriedades e conceitos aprofundados
<a id="cores-e-css"></a>Cores e CSS
<a id="layout"></a>Layout
<a id="especificidade"></a>Especificidade
- Specifishity
- Especificidade - has-parent-selector/) e [:where()](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) e tecnologias como [Cascade Layers](https://ishadeed.com/article/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.
- The CSS Cascade
- CSS specificity and the cascade
- Especificidade - has-parent-selector/) e [:where()](https://developer.mozilla.org/en-US/docs/Web/CSS/:where) e tecnologias como [Cascade Layers](https://ishadeed.com/article/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.
- CSS specificity and the cascade
<a id="container-queries"></a>Container Queries
- A Primer On CSS Container Queries
- evergreen - platform-tests/interop/blob/main/2023/README.md#focus-areas), é uma tecnologia que logo logo poderá ser massivamente adotada, mesmo apenas como melhoria contínua.
- Component-level art direction with CSS Container Queries
- Next Gen CSS: @container
- CSS container queries are finally here
- CSS Style Queries
<a id="tipografia"></a>Tipografia
<a id="cascade-layers"></a>Cascade Layers
- preset-env do PostCSS - cascade-layers) pra ser utilizada em projetos pessoais com alguma parcimônia. Sobre o tópico recomendo seguir a [Miriam Suzanne](https://twitter.com/TerribleMia), membra do CSSWG e do SassCSS.
- A Complete Guide to CSS Cascade Layers
- Making Sense of CSS Layers and Scope (video)
- Making Sense of CSS Layers and Scope (video)
- Making Sense of CSS Layers and Scope (video)
<a id="logical-properties"></a>Logical Properties
- Logical Properties Level 1 - logical-props) e deixará o seu layout extremamente resiliente de forma internacional.
- CSS Logical Properties
- Digging Into CSS Logical Properties
- CSS Logical Properties
<a id="core-web-vitals-e-css"></a>Core Web Vitals e CSS

Categories

<a id="layout"></a>Layout 40 <a id="conceitos"></a>Conceitos 24 <a id="propriedades-e-conceitos-aprofundados"></a>Propriedades e conceitos aprofundados 17 <a id="mídias-ferramentas-e-fontes"></a>Mídias, Ferramentas e Fontes 15 <a id="variáveis-css-custom-properties"></a>Variáveis CSS (Custom properties) 14 <a id="cores-e-css"></a>Cores e CSS 10 <a id="core-web-vitals-e-css"></a>Core Web Vitals e CSS 7 <a id="container-queries"></a>Container Queries 6 <a id="especificidade"></a>Especificidade 6 <a id="cascade-layers"></a>Cascade Layers 5 <a id="tipografia"></a>Tipografia 5 <a id="logical-properties"></a>Logical Properties 4

Sub Categories