📝 CSS-Tricks 262: CSS Nesting, Safari Drama, and the CSS Paint API

View this newsletter on the web.

👀

Nesting CSS classes is pretty handy. If you’re familiar with preprocessing languages like Sass and Less then you’re probably used to nesting like this:

.card { .card-text { font-size: 1em; } &.card-large { padding: 2em; } body.home & .card-title { font-size: 2em; } }

In fact, I’m so used to writing Sass like the above that I often forget nesting isn’t available in regular CSS. Well! Nesting like this is coming to a CSS file near you. That code above is equivalent to writing this…

.card .card-text { font-size: 1em; } .card.card-large { padding: 2em; } body.home .card .card-title { font-size: 2em; }

Using that & is a handy way to keep styles bundled together and is often easier to read than duplicating the .card CSS class over and over again. That’s why I’m pretty excited about this and I’d love to get to a place where for most projects I don’t need to use Sass (which is my preprocessor of choice). That’s not to say Sass is obsolete though, as Miriam writes:

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s