A lot developers working in the front end have highlighted the fact that there has never been a better time to write CSS. The frequency of new features being introduced into browsers is done so at a relatively rapid pace compared to what it was before. There’s always a lot to learn and a lot to be appreciative of, but I thought it would be fun to reflect on what I’d like to see introduced that would make writing CSS even better.

Some of these ideas that I’m about to write are either already experimental features or planned for a future release, but I’m going to try to keep those types of items limited in order to keep this interesting; I’ll denote which items fall into this category as well. Here’s the list:

1. Separators between grid items

I absolutely love CSS grid, and I’m always finding new ways to use it that make layouts and my life as a developer easier. The one thing that it doesn’t do well that you think it would is handling separators between grid items. Getting a design of a grid with separators during a hand-off is kind of like getting the proverbial spoke in the wheel. There are ways to accomplish this, but they always feel like hacks and limit the way you can use grid. The route you end up having to take usually depends on the design too, like if the grid items have a different color background than the grid container or parent body, and what kind of spacing is used in the grid layout.

Three grid columns with cards each separated by vertical borders

I’d love to see some kind of grid-separator or grid-border property that leverages the same functionality that the gap property uses. This way the separators can lie in the area reserved for the gap, without appearing at the end or beginning of each column or row where they don’t belong or are not desirable. It would alleviate the need to have to do :nth-child adjustments, which add up at multiple breakpoints. It would make using implicit auto-columns possible for these types of layouts too.

2. Margin trim

This is one of those experimental properties I was talking about. At the time of this writing it’s only available in Safari 16.4+. You can read more about it on MDN here.

Spacing in layouts is something that is difficult to nail down, especially in highly dynamic or component driven layouts. As developers we are prone to getting stuck in our own dogmatic ideologies, sometimes even coined as “best practices”, such as “bottom margin only” or “negative margins are a code smell”. Before I digress into something that really could be its own blog post, let’s simply agree there are many approaches to addressing spacing, but none are without their drawbacks or complications.

Margin trim looks like something that could really help in alleviating this. And even if it isn’t, it would be really nice to have something like this instead of > :first child and > :last child selectors manually removing margin each time.

3. Scope

This is a bit of a tricky one, since the introduction of the :where pseudo-class really helped with giving the ability to scope styles, but it doesn’t prevent styles from leaking into child components. We also have the shadow DOM that encapsulates styles, however I’d really like to not have to use web components just to scope my styles.

All front end frameworks also seem to have their own way to handle this, which alleviates the overall need quite a bit.

4. Selector aliases

I’m calling this one “selector aliases”, since it can be reduced to that. The idea came from wanting a single selector for all headings (h1, h2, h3, etc), but also a selector for all input types that have the generic “appearance” of a text field (text, password, date, etc). This would help a lot with long lists of selectors and avoiding to have to track them down, copy and then paste.

5. Expanding a link hit area

Often we’re confronted with a choice whether or not to make an entire component into a link or button, such as a card or a callout. In the case of links, it is valid HTML to wrap an anchor tag around a div and call it a day. Adrian Roselli dove into this topic in great detail, and it turns out this approach is a pretty terrible experience when using a screen reader.

Andy Bell wrote a great article describing a similar solution to this problem, and it’s one that I often use so I wanted to highlight it. Eventually with complex use cases you might find that your code using the ::before selector in order to expand the hit area might be colliding with the parent’s ::before, or you need to use position: relative; on an inner wrapper, making this all fall apart.

All of this could be fixed by a property on a parent element of a link denoting that the entire group should be clickable. I’m sure this is easier said than done though. What happens when the group has other links or buttons? Maybe it would simply not work in that case.

6. State queries

I’m no expert on how styles are parsed and painted, but it seems pretty obvious that the browser knows whether a sticky element is “stuck”, or a container is “scrollable”. If these could be translated into selectors to tap into, it would be really helpful in creating pages and UIs. I’d even extend this to things like “nth grid column/row”. There’s probably even more examples that I’m not imaginative enough to think of right now.

That’s the list! This is the kind of article that I’ll probably end up updating as time goes on, hopefully with resolutions or more items, but possibly from putting my foot in my mouth too. If you have something that you think is missing, I’d love to hear what you all think. I’d also like to drop this 2023 state of CSS survey here, in case you’re interested in seeing what other developers are using and where we’re at as a community.