CSS Nesting

...

I have a project where I can now use CSS Nesting in production and oh, it makes so many things nicer!

There are a lot of cases where you’d normally have to duplicate many class names for child selectors, which can now just be wrapped by one selector.

It also makes the structure of the rules more logical/clearer to read and can help group things together in a CSS file.

The implementers did a great job removing the requirement of nested selectors starting with a symbol, too 👌

#CSS #CSSNesting

#Development #Overviews
Think you know media queries? · “Get ahead of the curve and start putting them to use.” https://ilo.im/1679ci

_____
#MediaQueries #FeatureDetection #Devices #Browser #Accessibility #WebDev #Frontend #CSS #CssNesting

How much do you really know about media queries? – Frontend Masters Blog

There are a ton more @media queries than

#Development #Launches
CSS Boilerplate · A default CSS structure for projects of any size https://ilo.im/163i67

_____
#Boilerplate #CSS #CssReset #CssNesting #WebPerf #WebDev #Frontend #HTML

CSS boilerplate | fokus

UA+ (User agent plus), a different type of reset style sheet

fokus.dev

#Development #Techniques
Approaches to the ‘&’ selector in CSS · More maintainable, readable, and clever CSS nesting https://ilo.im/1628p2

_____
#ModernCSS #Maintainability #Readability #Ampersand #CssNesting #Framework #WebDev #Frontend #CSS #Sass

Three Approaches to the “&” (ampersand) Selector in CSS – Frontend Masters Boost

The & is a powerful addition to CSS, allowing us to craft selectors without repetition and helping organization and understanding.

#Development #Techniques
Approaches to the ‘&’ selector in CSS · More maintainable, readable, and clever CSS nesting https://ilo.im/1628p2

_____
#ModernCSS #Maintainability #Readability #Ampersand #CssNesting #Framework #WebDev #Frontend #CSS #Sass

Three Approaches to the “&” (ampersand) Selector in CSS – Frontend Masters Boost

The & is a powerful addition to CSS, allowing us to craft selectors without repetition and helping organization and understanding.

#Development #Techniques
Conditional CSS grid template areas · A magic formula to “open the gates to layout heaven.” https://ilo.im/161t0f

_____
#Layout #CssGrid #CssNesting #ContainerQueries #LogicalProperties #ResponsiveDesign #WebDesign #WebDev #Frontend #CSS

Conditional CSS grid template areas / Marijke Luttekes

Use a combination of CSS named grid areas and `display: contents;` for ultimate layout flexibility.

LWS Feb 2025 | London Web Standards

Our February event is talking place Wednesday 19 Feb at Greenwich University with talks about new HTML attributes and Monetizing the Web.

Thanks @barcamplondon for giving me my first chance in over five years to give a talk. #CSSNesting and thanks to all the attendees for the great feedback.
Fun with Custom Cursors

Two ways to change the default mouse cursor appearance.

Let's Build UI