My CSS Wishlist (2019 Edition)
In a recent CSS-Tricks article, Chris Coyier asks, “What do you wish CSS could do natively that it can’t do now?” While it’s true that CSS has had some pretty exciting developments in recent years — e.g., flexbox, CSS grid, CSS variables — there’s still plenty of room for improvement. The following are some of the features that I’d like to see added in the not-too-distant future.
1) Parent Selectors
Right now, it’s only possible to select the children of a particular element (e.g., all links contained within a
<div> that has a specific class). But there are times when you’d like that selection to go the other way. In other words, you want to select the parent(s) of an element instead of its children. For example, applying new styles to an element when one of its children is hovered over or styling only those links that contain images.
2) Has/Contains Selectors
3) Container Queries
Media queries are very powerful, and are the foundation of responsive web design. But they have one big limitation: you can only change an element’s styling based on the size of the entire viewport (i.e., breakpoints). It’d be nice to also be able to change an element’s styling based on the size of its containing element(s). Think of a sidebar, and being able to change the style of its children based on its size regardless of the viewport size. The capabilities of flexbox and CSS grid solve some of the use cases for container queries but others still remain.
4) Standardized Styling for Form Elements
One of the nice things about SASS is that you can nest your selectors, which — if used wisely (of course) — can greatly help with organizing your code and making hierarchies clear. Indeed, it’s one of my favorite aspects of SASS and I’d sure like to be able to do it in plain ol’ CSS, too.
This list is far from exhaustive. If you read the aforelinked CSS-Tricks article, you’ll see a bunch of other desired features, including subgrids, regions, exclusions, 0-to-auto transitions, and aspect ratios (to name a few).
All of this tells me three things:
- CSS is far from becoming dead or obsolete.
- Front-end developers are becoming savvier and more demanding of their tools.
- Even after all this time, we’re still just brushing the surface of what’s possible with website design.
That’s pretty exciting. But remember: if/when any of the above features arrive, it’ll be incumbent on us developers to use them wisely and not for their own sakes.