A slippery slope towards Tailwind?

Sam’s full-width utility does only one thing. It breaks an element out of its container to fill the width of a page.

.full-width {
position: relative;
right: 50%;
left: 50%;
margin-right: -50vw;
margin-left: -50vw;
width: 100vw;
max-width: 100vw; }

I include a few helper classes in my own stylesheets, for example to centre-align text:

.align--center {
text-align: center; }

And for exceptions to other margin styles. And for floating images right or left. And for screen-reader only content. And, I use these helpers as infrequently as I possibly can.

CSS-in-HTML

Conversations about CSS-in-JS are often polarised and Tailwind’s CSS-in-HTML is just as divisive. For me, the concept of utility-first makes sense on one level and I can see how it might appeal to people who work on products packed plenty of components.

The idea of tying HTML and styling so closely together—even if we choose elements for their semantics and visual data is only present in attributes—is something I’m uncomfortable with. I’ve written HTML and CSS for a long time and spent years influencing people to keep markup free from presentational information.

So where does this leave me and my helpers? And aren’t these classes just a slippery slope towards Tailwind?

I think the answer is in the degree to which I use these utility classes. They’re fine when used infrequently. They’re OK to use for adding exceptions to already specified styles—like when I need that alternative text alignment or extra margin between elements. But utility-first? I still maintain that’s contrary to the way meaningful markup and CSS for presentation should remain separate. And it’s going to take a very strong argument to change my mind.

---

Layout Love

Using modern CSS Grid, I developed four sets of reusable layout components to make prototyping and site development work simpler. I call these Layout Love and rather than keeping them to myself, I’m offering them for everyone to use. You can use Layout Love’s HTML and CSS for any personal or commercial design project. Each set is just £2.99 and all four together are £9.99 which could save you many hours or work.