Modern CSS is incredible. It has come so far in the last 10 years and the toolbox has something I can reach for for nearly every tricky situation I come across these days. It’s a breath of fresh not having to think about hacky work-arounds. Here’s a list of features I think are critical when building a modern app, and I find my self reaching for a lot.
min(), max(), clamp()
These CSS functions are super useful when building responsive UI. Say you want a modal to be auto-width up to 500px wide, but no larger than the viewport if its less than 500px? This use to be a tricky problem to solve. Now you can use max-width: min(500px, 95vw)
which will pick a max-width of either 500px or 95vw, whichever fits within the viewport.
MDN: min()
MDN: max()
MDN: clamp()
color-mix()
I use this all the time for creating transparent versions of a color:
background: color-mix(in srgb, var(--some-color), transparent 85%);
Logical Properties
These are an absolute must if you are building a localised app. Replace any use of left/right with inline-start/inline-end and your app will be 99% ready for right-to-left reading modes. Combine this with Grid and Flexbox layouts and you are sweet.
MDN: CSS logical properties and values
View Transitions
I only recently starting using these as a progressive enhancement. Really useful for animating the position of things in a list when items are added, removed or sorted. Here is an example using animations in combination with view transitions to animate when items are added:
Grid
Typically I reach for Flex Box for most layout requirements, however I’m finding Grid is useful in cases where you need to shift the position of named areas for a responsive layout, or displaying a fluid auto-filled grid of items.
Container Queries
The best use case I have found for container queries is for widgets on a dashboard. By making each widget a container, you can build the widget to respond to the space it has been given on the dashboard – that could be full width, or in a multi-column row. This isn’t possible to do with media queries or without some JavaScript to measure the size and add or remove classes. Using container queries makes it really simple.
Nesting
Mostly a convenience and probably the last reason to use a preprocessor like SASS or LESS. Now we can nativaley nest selectors which is super useful for simple scoping of component styles.