CSS Nesting: Minha Opinião Sincera

CSS Nesting é a nova feature de CSS que chegou com tudo! Conheça os macetes, pegadinhas e marotagens de Aninhamento CSS. Uma das features preferidas de quem usa pré-processadores CSS, como Sass, é a capacidade de usar regras CSS aninhadas. A boa notícias é que agora isso também é possível usando CSS puro! ⭐ Aprenda CSS profissional para turbinar sua carreira front-end! https://www.cssalemdosensocomum.com.br/ Ou seja, agora é possível aninhar uma regra de estilo dentro de outra regra de estilo, permitindo que o seletor da regra interna faça referência aos elementos correspondentes à regra externa. Esse recurso permite que estilos relacionados sejam agregados em uma única estrutura dentro do documento CSS, melhorando a legibilidade e a manutenção. Este novo módulo CSS traz a capacidade de aninhar uma regra de estilo dentro de outra, com o seletor da regra filho relativo ao seletor da regra pai. Isso aumenta a modularidade e a capacidade de manutenção das folhas de estilo CSS, melhorando: - Organização - Facilidade de leitura - Manutenção - Refatoração - Redução do tamanho e peso dos arquivos Mas nem tudo funciona como a maioria de nós, front-end designers, poderíamos supor. Existem muitas diferenças entre o aninhamento nativo de CSS e aninhamento de pré-processadores. É por isso que você deve assistir esse vídeo sobre CSS Nesting, para conhecer as diferença, regras de uso, macetes, pegadinhas e marotagens do tão esperado aninhamento nativo de CSS. 💬 Entre na comunidade exclusiva dpw para conversar sobre o conteúdo deste vídeo https://discord.gg/vDd34XbyQr ✏️ Combinação de seletores CSS https://desenvolvimentoparaweb.com/css/combinacao-seletores-css/ ✏️ A maneira 100% correta de fazer breakpoints em CSS https://desenvolvimentoparaweb.com/css/css-breakpoints-maneira-correta/ 🌐 CSS Nesting Module | W3C https://www.w3.org/TR/css-nesting-1/ ========== ⏱️ Timestamps 00:00 Intro 00:25 Uso básico de CSS Nesting 03:16 The Inception Rule 04:03 Nesting Selector (Seletor de Aninhamento) 06:41 Aninhamento, at-rules e media queries 07:56 Sintaxe válida de aninhamento 09:36 Segredo para entender CSS Nesting 12:31 Macete para regras aninhadas 14:31 Seletor de Aninhamento e pseudo-elementos 15:19 Aninhamento e interpolação de caracteres 17:07 Minha conclusão sobre CSS Nesting ========== 📷 Equipamentos usados para gravar este vídeo - Sony Alpha a6400: https://amzn.to/3LZ9Zkv - Cartão 128GB Extreme PRO SDXC: https://amzn.to/3rqVPRg - Tripé Weifeng WT6734: https://amzn.to/3LYWUb4 ========== Assine o canal! http://bit.ly/dpw-youtube - Facebook: https://www.facebook.com/desenvolvweb/ - Instagram: https://www.instagram.com/desenvolvweb/ - Twitter: https://twitter.com/desenvolvweb Conheça o blog desenvolvimento para web: https://desenvolvimentoparaweb.com/