Responsive type scales with composable CSS utilities

With the help of calc(), clamp() and CSS vars, we can create composable, responsive, and fluid type scales that smoothly adapts to viewport and container widths.

Hiding empty elements with CSS :empty and :has()

You might be used to toggling classes on elements to handle state styles. What if we could just write CSS that reflected the state of the DOM?

Selecting previous siblings with CSS :has()

Selecting a previous sibling was for long impossible, but is now a breeze with the has() pseudo-class

Chaining styles with a JavaScript Proxy

If you miss method chaining from Ruby or jQuery when working with styles in JavaScript, you can recreate the pattern with a few lines of code

Smoother & sharper shadows with layered box-shadows

With a simple CSS trick, we can get fine-tuned control over how shadows are rendered, and create richer and more realistic 3D effects

Breaking to a new row with flexbox

You can break to a new flexbox row or column without setting the size of an item: add a collapsed flex item between two flex items

CSS masonry with flexbox, :nth-child(), and order

Creating a masonry (or mosaic) layout with flexbox produces a grid with a seemingly shuffled and obscure order, but we can achieve a natural ordering by using :nth-child() and the order property