Skip to content
Web Dev

CSS Utility Classes

Utility classes are very useful to streamline styling.

What are CSS utility classes?

CSS utility classes are predefined styles you can quickly apply to HTML elements.

For example this could be the CSS for a flex container that aligns its items to the middle. So that we don’t have to repeat this code multiple times we define a .flex-container-center one time in our .css file and now we can apply it whenever needed.

CSS utility classes collection overview

This is a collection of CSS utility classes I like to frequently use:

utility.css
.height-smart-fill-screen {
    min-height: calc(100svh - var(--navbar-height) - var(--footer-height));
}


.flow > *:not(:first-child){
    margin-block-start: var(--flow-space); /* --flow-space defined in var, is 1em*/
}


.visually-hidden {
  position: absolute;
  clip: rect(0, 0, 0, 0);
  height: 1px;
  width: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  white-space: nowrap;
  border-width: 0;
}


.margin-inline-auto {
    margin-inline: auto;
}


.base-layout {
  display: grid;
  grid-template-columns: minmax(var(--side-gap-padding), 1fr) min(var(--max-width-smart-container), 100% - (var(--side-gap-padding) * 2)) minmax(var(--side-gap-padding), 1fr);
  & > * {
    grid-column: 2 / 3;
  }
  & > .full-width {
    grid-column: 1 / -1;
  }
  /* Add additional breakout areas to make breakouts or place asides inside; Use @container query to get size, then place either to the left or right, or below/above if not enough size*/
}


.main-header-element {
    padding-top: max(8svh, var(--navbar-height) + 2rem);
}


.side-gap-padding {
    padding-inline: var(--side-gap-padding);
}


.inverted-colors {
  /*Invert colors here*/
}

Fill Height 10svh

.height-smart-fill-screen {
    min-height: calc(100svh - var(--navbar-height) - var(--footer-height));
}

This class is used to vertically fill the viewport height, the screen that’s actually shown to the user. 100svh is the screen height between the top and bottom browser bars you might see on your phone, it will automatically adjust depending on whether the bars are shown or not.
Since additionally to the UI that every browser app has we also display a header and probably footer on our own page we also subtract these.

I use this to make sure that my footer on pages with almost no content is still at the bottom so it looks consistent throughout the pages.

You could also use this for a hero section, but make sure to reduce the height a bit so part of the next section gets shown to the user, you want to hook the user into starting to scroll on your page.

Flow

.flow > *:not(:first-child){
    margin-block-start: var(--flow-space); /*1em*/
}

Flow adds margin-top to all its direct children, which is great if you have something like a longer blog text that you want to make more readable. Because we use em the gaps become bigger for bigger elements and smaller for smaller elements, making the content flow much better.

Visually Hidden

A very useful utility class to make things more accessibility friendly, especially for screen readers.1

Margin-inline: auto

.margin-inline-auto {
    margin-inline: auto;
}

The easiest way to center an element horizontally. Sets margin-left and margin-right to auto, thus both trying to take up space making the element land in the center.

Base Layout

My favorite way to make a common layout with modern CSS. Allows us to easily center content, having breakout elements or creating asides. Kevin Powell talks about it in his video on using container and wrapper classes.

Side-gap-padding

I like to use this to apply the padding I have defined earlier which is usually relevant for mobile views. For some pages I do not want to use the .base-layout class but I want to keep the same distance to the end of the screen on both sides.

Inverted-colors

I use inverted-colors to invert colors. Just redefining the inverted colors through variables is enough for it to work. So depending on which colors I am using for my main design I apply the opposite colors here, useful to make the design look more visually interesting.

Helpful Sources & References

Footnotes

  1. .visually-hidden explained by Kevin Powell: https://youtu.be/fyuao3G-2qg?t=256 ↩