Utterly pointless, completely genius!

I haven't really played around with the new :has selector in CSS yet, but this example from Chris Coyier piqued my interest.

With this query, you can dynamically filter a list with pure CSS!

body:has([name="filter"][value="bakery"]:checked)
  .card:not([data-category="bakery"]) {
  display: none;
}

Last week I remembered the scroll-margin property existed.

I was adding anchors to the headings of a page so visitors can directly link to a section. However, when that link was visited, the heading was glued against the top of the viewport. I prefer some margin between the browser chrome and the text to let it breath.

There's a CSS property for that: scroll-margin. It does nothing in most cases, but when you visit a URL that points to an anchor on the page, it will offset the element from the viewport.

h2 {
  scroll-margin-top: 1rem;
}

You can read all about scroll-margin in the MDN docs.

Here's a quick trick with the :only-child selector to display an empty state in a list.

Read more

One of my favorite underrated (and underused!) CSS properties is font-variant-numeric: tabular-nums.

Tabular numbers are monospaced, which keeps their sizes consistent and keeps numbers with the same amount of digits aligned.

There are two common cases that warrant tabular numbers: tabular data and moving numbers.

Read more

I published an article on the Mailcoach blog explaining the setup around customizable themes for newsletter archives.

I relied on CSS custom properties and HSL colors to allow users to customize their newsletter archives without fiddling with too many options.

Colors are often defined in RGB, but RGB is difficult to transform without custom functions. We ask the user to define the primary color in HSL instead. The benefit of HSL is that it's easy to control a color by tweaking the parameters.

I was building wireframes for a website with HTML & CSS. Since it's a prototype, not all actions are functional. When a visitor reviewing the prototype tries to click something that isn't hooked up, I wanted to clarify what they could interact with. This also allows visitors to click anywhere on the page to highlight what they can click.

In the past, I've used JavaScript to add an outline to clickable elements when something non-interactive was clicked. But with the :has and :is selectors, this is doable with plain CSS.

html:active:not(:has(a:active, button:active, label:active)) :is(a, button, label) {
  outline: 2px solid blue;
}

How it works:

• html:active will match whenever you hold down your mouse on the page
• :not(:has(a:active, button:active, label:active)) will not match when you're holding down your mouse on an a, button, or label element, to avoid the outline from appearing when the user clicks something that is functional
• :is(a, button, label) matches all a, button, and label elements on the page

View a demo on CodePen.

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.