(855)-537-2266 sales@kerbco.com

A Few Ways CSS Is Easier To Write In 2023 A little while back, I poked at a number of “modern” CSS features and openly evaluated whether or not they have really influenced the way I write styles. Spoiler alert: The answer is not much . Some, but not to the extent that the styles I write today would look foreign when held side-by-side with a stylesheet from two or three years ago. That was a fun thought process but more academic than practicum. As I continue thinking about how I approach CSS today, I’m realizing that the differences are a lot more subtle than I may have expected — or have even noticed. CSS has gotten easier to write than it is different to write. “ And that’s not because of one hot screaming new feature that changes everything — say, Cascade Layers or new color spaces — but how many of the new features work together to make my styles more succinct, resilient, and even slightly defensive. Let me explain. Efficient Style Groups Here’s a quick hit. Rather than chaining :hover and :focus states together with comma separation, using the newer :is() pseudo-class makes it a more readable one-liner: /* Tradition */
a:hover,
a:focus {
/* Styles */
}

/* More readable */
a:is(:hover, :focus) {
/* Styles */
}
I say “more readable” because it’s not exactly more efficient. I simply like how it reads as normal conversation: An anchor that is in hover or in focus is styled like this… Of course, :is() can most definitely make for a more efficient selector. Rather than make up some crazy example, you can check out MDN’s example to see the efficiency powers of :is() and rejoice. Centering This is a classic example, right? The “traditional” approach for aligning an element in the center of its parent container was usually a no-brainer, so to speak. We reached for some variety of margin: auto to push an element from all sides inward until it sits plumb in the middle. That’s still an extremely effective solution for centering, as the margin shorthand looks at every direction. But say we only need to work in the inline direction, as in left and right, when working in a default horizontal left-to-write writing mode. That’s where the “traditional” approach falls apart a bit. /* Traditional */
margin-left: auto;
margin-right: auto;
Maybe “falls apart” is heavy-handed. It’s more that it requires dropping the versatile margin shorthand and reaching specifically for two of its constituent properties, adding up to one more line of overhead. But, thanks to the concept of logical properties , we get two more shorthands of the margin variety: one for the block direction and one for the inline direction. So, going back to a situation where centering only needs to happen in the inline direction, we now have this to keep things efficient: /* Easier! */
margin-inline: auto;
And you know what else? The simple fact that this example makes the subtle transition from physical properties to logical ones means that this little snippet is both as equally efficient as throwing margin: auto out there and resilient to changes in the writing mode. If the page suddenly finds itself in a vertical right-to-left mode, it still holds up by automatically centering the element in the inline direction when the inline direction flows up and down rather than left and right. Adjusting For Writing Modes, In General I’ve already extolled the virtues of logical properties. They actually may influence how I write CSS today more than any other CSS feature since Flexbox and CSS Grid. I certainly believe logical properties don’t get the credit they deserve, likely because document flow is a lot less exciting than, say, things like custom properties and container queries. “ Traditionally, we might write one set of styles for whatever is the “normal” writing direction, then target the writing mode on the HTML level using [dir=”rtl”] or whatever. Today, though, forget all that and use logical properties instead. That way, the layout follows the writing mode! So, where we may normally need to reset a physical margin when changing writing modes like this: /* Traditional */
body {
margin-left: 1rem;
}

body[dir=”rtl”] {
margin-left: 0; /* reset left margin */
margin-right: 1rem; /* apply to the right */
text-align: right; /* push text to the other side */
}
… there’s no longer a need to rest things as long as we’re working with logical properties: /* Much easier! */
body {
margin-inline-start: 1rem;
}
Trimming Superfluous Spacing Here’s another common pattern. I’m sure you’ve used an unordered list of links inside of a