expert-css

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

Last synced: 17 days ago
JSON representation

<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.
- CSS specificity and the cascade
- The CSS Cascade
<a id="cascade-layers"></a>Cascade Layers
- Making Sense of CSS Layers and Scope (video)
- A Complete Guide to CSS Cascade Layers
- Making Sense of CSS Layers and Scope (video)
- 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 id="conceitos"></a>Conceitos
<a id="cores-e-css"></a>Cores e CSS
<a id="tipografia"></a>Tipografia
<a id="container-queries"></a>Container Queries
- Component-level art direction with CSS Container Queries
- Next Gen CSS: @container
- 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
- 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.
- CSS container queries are finally here
- CSS Style Queries
<a id="variáveis-css-custom-properties"></a>Variáveis CSS (Custom properties)
- Global and Component Style Settings with CSS Variables
- CSS Custom Properties In The Cascade
- Using Custom Property “Stacks” to Tame the Cascade
- Component Variants with Scoped CSS Variables
- 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
- CSS Variables for React Devs
- 10 powerful ways to use CSS variables
- Component Variants with Scoped CSS Variables
- Live Theming with CSS Variables
- Tailwind - props.style/) é um framework construído inteiramente de variáveis CSS.
- Unlocking the Benefits of CSS Variables
- The Power of Composition with CSS Variables
- Composing the Uncomposable with CSS Variables
<a id="logical-properties"></a>Logical Properties
- CSS Logical Properties
- Logical Properties Level 1 - logical-props) e deixará o seu layout extremamente resiliente de forma internacional.
- Digging Into CSS Logical Properties
<a id="core-web-vitals-e-css"></a>Core Web Vitals e CSS
<a id="propriedades-e-conceitos-aprofundados"></a>Propriedades e conceitos aprofundados
<a id="mídias-ferramentas-e-fontes"></a>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.
- 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.
- 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.
- 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).
- 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.
- The CSS Podcast - Jamais pensei que pudesse aprender tanto CSS apenas ouvindo. Disponível também nas principais plataformas de streaming de áudio.
- 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.
- The CSS Podcast - Jamais pensei que pudesse aprender tanto CSS apenas ouvindo. Disponível também nas principais plataformas de streaming de áudio.
- Aprenda CSS - Um curso de CSS muito completo desenvolvido pela Google.

ecosyste.ms

Data

Tools

Indexes

Applications

Experiments

Awesome

expert-css

<a id="layout"></a>Layout

<a id="especificidade"></a>Especificidade

<a id="cascade-layers"></a>Cascade Layers

<a id="conceitos"></a>Conceitos

<a id="cores-e-css"></a>Cores e CSS

<a id="tipografia"></a>Tipografia

<a id="container-queries"></a>Container Queries

<a id="variáveis-css-custom-properties"></a>Variáveis CSS (Custom properties)

<a id="logical-properties"></a>Logical Properties

<a id="core-web-vitals-e-css"></a>Core Web Vitals e CSS

<a id="propriedades-e-conceitos-aprofundados"></a>Propriedades e conceitos aprofundados

<a id="mídias-ferramentas-e-fontes"></a>Mídias, Ferramentas e Fontes