Elise Hein compiled a few arguments in favor of using CSS attribute selectors more often. Two examples stood our for me.
Consider existing attributes. Whenever we add state we should take a step back and consider if we can leverage a standard. I often add an .is-active class to links in navbars. However, there’s an ARIA attribute for that. In addition to using a standard, our site becomes more accessible.
a[aria-current="page"] { }
Make invalid states impossible with data attributes. In HTML, we could accidentally end up with a card that .is-small.is-large. Using a data attribute enforces a single value for the attribute.
.card.is-small { }
.card.is-large { }
// vs
.card[data-size="small"] { }
.card[data-size="large"] { }
Read the full post on Elise Hein’s blog.
This blog’s design has remained roughly the same the past two years. I tweaked the style a lot, but changes were incremental and stay true to the neutral black and white style. Codebases rot over time, and small changes slowly but surely introduce technical debt. I started cleaning house, and before I knew it I was embarked in a full redesign.
Read more
Tl;dr: We use !important because it solves annoying specificity issues. Despite being overkill in most situations, we haven’t come across any practical drawbacks from globally enabling it.
If you want to learn more about how we came to that conclusion and how CSS specificity works, read on!
Read more
I haven’t used Google Fonts in production for a long time. I use the service for development, and strip out all references to Google before going live. I do this for performance, and my visitors’ privacy.
Read more
Masonry layout support has been added to the CSS grid specification! 🎉
Read more
There are a few fleshed-out articles about why utility-first CSS is a good thing. However, if you’re just a little curious and want a brief introduction, Chris Ferdinandi has your back.
In JavaScript, we create small, modular functions that can be reused throughout the code base to keep our code DRY. In CSS, for some reason, it’s not seen as weird in the slightest to repeat yourself a lot.
Utility classes help keep CSS DRY.
The stylesheet for my website is so small that I can inline all of my CSS still send most of the page in a single HTTP request.
Read the rest of Chris’ article on gomakethings.com.
Hungry for more? Check out In Defense of Utility-First CSS by Sarah Dayan or CSS Utility Classes and “Separation of Concerns” by Adam Wathan.