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
Similar to parent selectors, has/contains selectors would allow you to target specific elements based on their relationship to other selectors (more examples here). This can be somewhat accomplished with JavaScript (e.g., jQuery’s “.has()” method), but I’d like to have a native CSS solution so that I don’t have to rely on JavaScript for styling.
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
I love creating design frameworks, and the challenge of trying to make something both as comprehensive and as flexible as possible. But then I get to form elements, and my enthusiasm dies a little. Because they’re used to gather user input, they’re some of the most important aspects of a website, but getting select menus, radio buttons, checkboxes, file inputs, date inputs, etc., to look both good and consistent often requires lots of convoluted CSS, some JavaScript, and even a hack or two that could leave your forms less accessible.
5) Nesting
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.