The wasted potential of attribute selectors in CSS

Representing native state

Aleksandr Hovhannisyan makes the case that classes are too often used to style different states or variants of an element, where that state might — or, critically, should — already be semantically represented by other properties such as ARIA attributes or pseudo selectors.

<a href=”/page2/” class=”nav-link nav-link--is-active”>Page 2</a>.nav-link.nav-link--is-active { }
<a href=”/page2/” class=”nav-link” aria-current=”page”>Page 2</a>.nav-link[aria-current="page"] { }

Representing custom state

Aleksandr Hovhannisyan explains well how the use of attribute selectors can result in better UX. I find it a satisfying coincidence that Keith Cirkel reaches the same conclusions coming from a place of developer experience. He highlights the DX issue with classes:

.Card { /* ... */ }
.Card[data-size=big] { width: 100%; }
.Card[data-size=medium] { width: 50%; }
.Card[data-size=small] { width: 25%; }

.Card[data-align=left] { text-align: left; }
.Card[data-align=right] { text-align: right; }
.Card[data-align=center] { text-align: center; }
.Card[data-border-collapse~="top"] { border-top: 0 }
.Card[data-border-collapse~="right"] { border-right: 0 }
.Card[data-border-collapse~="bottom"] { border-bottom: 0 }
.Card[data-border-collapse~="left"] { border-left: 0 }
<article class="card" data-loading="true" data-variant="primary" data-size="large" data-border="top right" data-elevation="high" />
<button aria-label="Toggle menu" aria-controls="navbar-menu" aria-expanded="true" disabled />

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Elise Hein

Elise Hein

99 Followers

I’m a designer and software engineer building products for medical research at London-based Ctrl Group.