Making use of CSS attributes

I’ve been looking into this site’s CSS and thinking of ways of improving its efficiency; I’m especially struggling with making it DRY. It’s not like I have some super complex and professional styling going on here but the behind the scenes of this thing is as much a personal project as the actual content on it.

What I did figure out, though, was how to take advantage of ARIA attributes in my stylesheet which means I am killing two birds with one stone by:

• Improving accessibility
• Doing away with code redundancy

An example: styling the currently active link in the main navbar. Previously, I was using the following class:

.nav-active-link {
    color: var(--main-text-color);
    pointer-events: none;
}

<a href="#" class="nav-active-link" aria-current="page">Link</a>

The purpose of the aria-current attribute is to provide context for assistive technology (in this case, screen readers). By targeting it directly, I have absolutely no need for an additional class:

a[aria-current='page'] {
    color: var(--main-text-color);
    pointer-events: none;
}

<a href="#" aria-current="page">Link</a>

It’s a pretty minute change, but I just think it’s really cool how much you can do with so little when it comes to modern CSS.

On that note, I can’t wait until the :has() pseudo-class receives widespread browser support. The wheels inside my brain are spinning just thinking about the cool shit you can do with it.