When I was building this site, I was keeping it lean but perhaps a bit messy. It’s not a big complex site and I didn’t need to write CSS to maintain a big complex site. As such, I even wondered if I’d stick to any kind of naming convention.
Old habits are hard to break and I found anytime I tried to get away with just element selectors for something, it was clunky as I continued to iterate. Sure enough, the more I worked on the site, the more I moved back to my modular ways. But ultimately, that’s neither here nor there. For a site like mine—written and maintained by one person—what kind of naming convention I use is nearly irrelevant. (I say nearly because I don’t want to be obtuse just for the sake of it!)
With my projects over the last few years, I’ve used a few different newer CSS features and have enjoyed what they can do. Here’s a few of the things I put into this site...
Clamp
I originally used clamp on The Snook Nook for the site title at the top of the page. I wanted it to feel balanced regardless of screen width. I adjust both the font size and letter spacing in this case, so that the title always looked proportional.
For Snook.ca, I wanted something that was big and bold on a large screen but wouldn’t fill up an entire phone screen. Again, clamp came in clutch.
font-size: clamp(2em, 4vw, 4em)
Clamp takes three values: the minimum, the preferred value, and the maximum. In this case, I wanted the font-size to be related to the screen width, which is where the vw units come in. The largest I wanted to go was 4em. This was eye-balled. There’s no special math here. Likewise, 2em still seemed reasonable on the bottom end and looked good for me.
Balanced Headings
I remember reading about this awhile back and it was a nice little thing to add to the site: text-wrap: balance. I just have it on the page title to avoid orphaned words and make them look a little more, well, balanced.
On the old site, I never loved how my headings looked over multiple lines because of the pencil lines I had on headings. As a result, I kept the titles shorter, on purpose. With this version, I wanted to get more creative with page titles, going longer if I needed to without it looking weird.
Grid
When Grid first came out, I was using it for larger, dynamic layouts like the restaurant grid on my Fifty site. Now, I find myself also using it for smaller elements. The article meta is a great example of this.
.meta {
display: grid;
justify-items: center;
}
Boom. All the items are center aligned and stacked. I probably would've defaulted to trying to use display: flex here but that would've required an extra declaration to adjust the flex-direction to column. (And using align-items instead of justify-items.)
.meta-before:before {
content: "";
display:block;
width:50px;
padding-bottom: 5px;
border-top: 2px solid var(--green);
}
The horizontal line is a pseudo-element that gets added into the grid stack before everything else. That border declaration leads me to the next thing.
CSS Custom Properties
The CSS isn’t large or anything but it was nice to use custom properties for easy colour management. I declared them on the root element. I could’ve probably just declared this on the html element itself just as easily.
:root {
--yellow: #FFCA00;
--green: #668800;
--white: #EFEFE6;
--black: #3C3C3C;
color-scheme: light dark;
}
Again, I didn’t need multiple levels of abstraction. I just wanted something that made it easier to remember these hex codes and spit them out where I need them.
Dark Mode
That last line in the previous example declares that my design supports light and dark mode and lets me use the light-dark function to easily declare colour options like this declaration for the body text.
color: light-dark(var(--black), var(--white));
Link Underlines
I’ve always just either toggled underlines on hover or toggled text colour. I don’t know when all the text-decoration options were added but I liked being able to do so.
a {
color: currentcolor;
text-decoration-thickness:2px;
text-decoration-color: var(--green);
}
a:hover { text-decoration-color: var(--yellow); }
I was able to adjust the thickness and then change the colour on hover. I haven’t used the ol’ LVHA format in years but I might come back to it to give more useful visual clues for visited and active links.
The link colour just picks up whatever the light-dark colour is currently set.
CSS has come a long way
I was really delighted by how easy it was to use all of these features and not have to be too concerned about cross browser issues. Looking through MDN was fun to discover what features I had missed over the years and could now implement reliably. Can I Use also continues to be a fantastic resource for verifying browser support.
/s3/static.nrc.nl/wp-content/uploads/2026/07/15162854/160726OPI_2035255501_Economist.jpg)
