Syntax - Tasty Web Development Treats

CSS Nesting is Here!

24 snips
Sep 11, 2023
Discover the game-changing arrival of CSS nesting and its full browser support, making it ready for developers. Dive into comparisons with Sass, highlighting how nesting simplifies code and improves readability. Learn how to effectively use the ampersand selector and tackle challenges with deeply nested elements. The discussion also covers sibling selectors and media queries, emphasizing the organizational benefits of nesting. Finally, explore the evolution of JavaScript and CSS, underscoring the ongoing innovations in web development.
Ask episode
AI Snips
Chapters
Transcript
Episode notes
INSIGHT

CSS Nesting & Sass

  • CSS nesting closely resembles Sass syntax, making adoption easier.
  • The final syntax is intuitive and largely aligns with Sass, addressing prior concerns.
ADVICE

Nesting as Components

  • Treat nested selectors as components, styling the smallest possible unit.
  • Only nest elements exclusive to that component; avoid nesting reusable elements.
INSIGHT

Ampersand Functionality

  • The ampersand in CSS nesting represents the parent selector.
  • This allows for extending selectors, such as styling articles with a "wide" class using & .wide.
Get the Snipd Podcast app to discover more snips from this episode
Get the app