How I use utility classes to write more efficient CSS

Yo, web peeps! 🕸️ Today, I'm gonna spill the beans on my secret sauce for CSS. I've been honing this wicked method for over a decade, and it's been a game-changer in building and maintaining dope websites and apps. So buckle up, buttercup, and let's dive in! 🚀

Styling elements #

I usually go for the big guns when I want all elements of a certain type to look the same. You know, like a one-size-fits-all kinda deal. So, for example, if I want all my input, select, and textarea elements to be full-width and have a little margin at the bottom, I just style 'em directly. Easy peasy, lemon squeezy! 🍋

input,
select,
textarea {
    display: block;
    width: 100%;
    margin: 0 0 0.5em;
}

Same thing goes for elements like tables. I want every table to rock the same look. 🎸

table {
    border-collapse: collapse;
    border-spacing: 0;
    margin-bottom: 1em;
    max-width: 100%;
    width: 100%;
}

I could use a class for these things, but why bother? It's just extra code in my HTML for the same result. Ain't nobody got time for that! 🙅‍♂️

Classes for components #

Now, where I do bring out the big guns of classes is when I have a component that doesn't have a native element and uses a div or span styled a specific way. Grid layouts are the perfect example. Check out the HTML for a grid with three equally sized columns in my sites. 📏

<div class="row">
    <div class="grid-third">1</div>
    <div class="grid-third">2</div>
    <div class="grid-third">3</div>
</div>

I'm all about clear, obvious class names that scream what they do. As I always tell my co-workers, readability is the real MVP, not brevity. 🏆

And here's what the CSS for that bad boy looks like:

.row {
    display: flex;
    margin-left: -1.4%;
    margin-right: -1.4%;
    justify-content: space-between;
}

.grid-third {
    margin-left: 1.4%;
    margin-right: 1.4%;
    width: 33.33333%;
}

I'm using flexbox here, but CSS Grid would also be a killer choice, depending on what you're trying to do. 💪

Modifier classes #

Sometimes, I have a typical presentation for a component, but every once in a blue moon, I need to modify it slightly. That's when I whip out modifier classes. 🌙

For example, maybe I want the columns in my .row to have a specific markup order, but be displayed visually in reverse in the UI. I'd create a .row-reverse class for that and use it with my .row class.

<div class="row row-reverse">
    <div class="grid-third">1</div>
    <div class="grid-third">2</div>
    <div class="grid-third">3</div>
</div>

In this case, the columns are displayed as 3 2 1 in the UI, but are written as 1 2 3 in the source code. Sneaky, huh?

.row-reverse {
    flex-direction: row-reverse;
}

I use modifier classes for elements, too, not just components. For example, I style my table elements directly, but I've got this rad .table-striped class I can use to add zebra stripes to them. 🦓

<table class="table-striped">
    <!-- ... -->
</table>

The CSS for it looks a little something like this:

/**
 * Adds zebra striping
 */
.table-striped tbody tr:nth-child(odd) {
    background-color: #e5e5e5;
}

Modifier classes are designed to work with specific elements or components and usually won't work if applied to other parts of the design. But hey, they've got their own charm, right? 🌟

Utility classes #

Utility classes are the unsung heroes of my CSS. I use them to nudge-and-tweak my designs in very general ways for a variety of elements or components. They're like the Swiss Army knives of web design! 🗡️

They typically do things like…

• Modify margin or padding
• Adjust font-size
• Center and align things

For example, the .margin-bottom class adds or adjusts the bottom margin on an element.

<div class="row margin-bottom">
    <!-- ... -->
</div>

The CSS for it looks like this:

.margin-bottom {
    margin-bottom: 1em;
}

This could be used on a wide variety of elements and components, not just my grid layouts.

If I wanted to align my text to the right and display it in all-caps, I might do this:

<p class="text-right text-capitalize">Hello, world!</p>

And the utility classes used here look like this:

.text-capitalize {
    text-transform: capitalize;
}

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

I could create element or component styles to do the same thing, but these are little adjustments that I'd likely make across a wide range of stuff in my design. Utility classes help me keep my CSS lean and mean while maintaining design consistency. 💼

One last little trick! #

Using the right heading element is crucial for accessibility. If your last heading was an h2 and you're using a heading to show some content that's a subsection of it, you should use an h3.

<h2>Hip-Hop</h2>
<p>...</p>

<h3>Top 10 best rappers of all time</h3>
<p>...</p>

<h3>Bad rappers who are for some reason popular anyways</h3>
<p>...</p>

But sometimes, you want a heading that looks like a different heading level than it should be semantically. For example, I might want headings that look like h5 level headings, even though semantically they need to be h3.

Heading levels should never be used for style. They always convey semantic meaning.

I define heading classes alongside my element styles. Every heading level has a matching class.

h1,
.h1 {
    font-size: 1.5em;
    padding-top: 0.5em;
}

h2,
.h2 {
    font-size: 1.3125em;
    padding-top: 1em;
}

h3,
.h3 {
    font-size: 1.1875em;
}

h4, h5, h6,
.h4, .h5, .h6 {
    font-size: 1em;
}

h4,
.h4 {
    font-size: 0.8125em;
        text-transform: uppercase;
}

Thanks to classes having more specificity than elements, I can use them to modify the appearance of a heading element while keeping its semantic meaning intact. It's like having your cake and eating it too! 🍰

<h2>Hip-Hop</h2>
<p>...</p>

<h3 class="h5">Top 10 best rappers of all time</h3>
<p>...</p>

<h3 class="h5">Bad rappers who are for some reason popular anyways</h3>
<p>...</p>

What is this approach called? #

I don't have a cute name for how I write CSS, but I should probably come up with one! Any suggestions? Drop 'em in the comments below. I'll give you a virtual high-five if I pick yours! 🙌

And that's a wrap, folks! I hope my little CSS adventure has given you some food for thought and inspires you to try new things in your own projects. Keep it real, and happy coding! 🎉