css(3)

Cross-referencing custom CSS properties are the most exciting feature of CSS3 in my eyes. They make these (hard-to-read) SCSS mixins almost obsolete and reduce the need for complex CSS-Build-Pipelines. I use them a lot for examples in my Gutenberg Plugins.

An other exiting feature is clip-path which can be use for things like these text replacement animations.

Self-Selecting Style-Selectors

in CSS its is possible to select nodes via selectors targeting inline style attributes. So an element like:

<div class="wp-block-heading" style="--d_t_m:2">
...
</div>

can be selected with the following rule.

// only 24 CSS rules

*[style*='--d_t_m'] {
    margin-block-start: calc( var(--d_t_m) * var(--size, 1rem) );
}

This rule says, that elements containing a style-attribute with --d_t_m (read like desktop_top_margin) have a margin-top of 2 times 1rem.

Think this is an elegant way to reduce the amount of code. Not sure if these selectors are quick, but they reduce the amount of css code drastically.
In a WordPress plugin I made (a gutenberg sidebar panel plugin) which allows users to set margins and paddings for different screen-sizes, for each side separately and from -20 to +20 sizes (rem), these selector allows to write only 3 x 8 (3 screen-sizes, 2 * 4 = 8 sides) CSS-rules.

This is a drastic reduction compared to adding classes for each of the possible ‘sizes’ (-20 to +20 in steps of 0.5 of a rem), resulting in 960 CSS-rules.

// too much CSS classes (3x8x40=960 class based selectors) for coarse steps of 0.5

.desktop-margin-top-minus-1-5 {
    margin-block-start: calc( -1.5 * var(--size,1rem) );
}