CSS Custom Utility Class and SEO Compatibility

CSS utility classes assist you to increase your page’s SEO compatibility and performance.

I’m sure most of you first met utility classes with frameworks the same as I did. It allows you to design a page without passing your CSS document every time and keeping in mind the values such as padding, margin, and color of your growing website. It surely makes the coding process much easier.So how come it helps a page’s SEO performance?

The most important advantage of using the utility class over the inline style is that it reduces loading time on the browser by making the page load more HTML-oriented. Also, it simply allows you to avoid using frameworks by easily designing your page with your own custom utility classes. That way your page loads the code from local files instead of downloading from a CDN. These two are important factors to increase your page’s SEO compatibility. If your page downloads every file and code from the web during loading, that would cause a negative effect on search engines and your page would appear downwards in search results. Obviously, if your project would mostly depend on SEO performance, that would be unacceptable.

Creating Your Own Utility Classes

CSS allows you to specify properties in your page for a long time with root property. By using root, you can create your own utility classes very easily.

In the first step, you need to specify some properties in the root and create var by using them. Here is my example:

:root {
  --green: #61BE6B;
  --text-main: #456278;
  --bg-grey: #abbdd9;
  --bg-orange: #f0c22b;
  --color-main: #6b0e22;
  --color-secondary: #693a04;
  --div-height: 400px;
  --inner-height: 200px;
}

.green-bg {
  background-color: var(--green);
}
.grey-bg {
  background-color: var(--bg-grey);
}
.color-main {
  color: var(--color-main);
}
.color-secondary {
  color: var(--color-secondary);
}

As you can see, I specify some properties in the root and create variables based on them.

After that, I create a simple HTML layout:

<div>
  <div>
    <p>
      Lorem ipsum dolor sit amet.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste.
    </p>
  </div>
</div>

And I use my variables as custom utility classes and design my layout.

<div class="green-bg div-height">
  <div class="grey-bg inner-height">
    <p>
      Lorem ipsum dolor sit amet.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste.
    </p>
  </div>
</div>

I give both divs their own widths. The second thing is that I want to align them to the center with flex. For be able to do this, I add new properties in CSS as below:

.w-100 {
  width: 100%;
}
.w-50 {
  width: 50%;
}
.d-flex {
  display: flex;
}
.align-center {
  align-items: center;
}
.justify-center {
  justify-content: center;
}

New view of my layout:

<div class="w-100 green-bg div-height d-flex align-center justify-center">
  <div class="w-50 grey-bg inner-height">
    <p>
      Lorem ipsum dolor sit amet.
    </p>
    <p>
      Sed ut perspiciatis unde omnis iste.
    </p>
  </div>
</div>

It’s easier to give separate properties for each p element by adding different utility classes for every one of them.

.text-center {
  text-align: center;
}
.fontsize-1 {
  font-size: 36px;
}
.fontsize-2 {
  font-size: 18px;
}

As you can see below, each p has its own font size.

<div class="w-100 green-bg div-height d-flex align-center justify-center bg-color-mobile">
  <div class="w-50 grey-bg inner-height">
    <p class="text-center fontsize-1">
      Lorem ipsum dolor sit amet.
    </p>
    <p class="fontsize-2">
      Sed ut perspiciatis unde omnis iste.
    </p>
  </div>
</div>

Responsive Design With Utility Classses

You can also practically create your responsive design by specifying necessary classes in media queries. That helps you to minimalize your scrolling along with the documents, especially when your page gets grower.

For example, I want to create a different background color in 768px width. To add that property, first I want to specify it as a media query in CSS:

@media (max-width: 768px) {
  .bg-color-mobile {
    background-color: var(--bg-orange);
  }
}

To make it solid, I also have to add a new property to my root which I’ve written at the beginning:

--bg-orange: #f0c22b;

@media (max-width: 768px) {
  .bg-color-mobile {
    background-color: var(--bg-orange);
  }
}

Now our layout has different background colors on different page widths.

In my last example, I want to have two different divs in a row. When these divs are going to be next to each other in desktop view, they will look up and down in mobile view. To make it, first I have to add display flex and flex-direction properties.

--bg-blue: #144973;
--bg-yellow: #f0c22b;

/* two divs has their own bg colors */
.blue-bg {
  background-color: var(--bg-blue);
}
.yellow-bg {
  background-color: var(--bg-yellow);
}

/* flex properties */
.d-flex {
  display: flex;
}
.flex-row {
  flex-direction: row;
}

<div class="w-100 div-height d-flex flex-row flex-column">


  <div class="w-50 div-height blue-bg">
  </div>
  <div class="w-50 div-height yellow-bg">
  </div>


</div>

Flex direction will be as a column in mobile view:

@media (max-width: 768px) {
  .flex-column {
    flex-direction: column;
  }
}

To make it look and work like a framework, you can specify breakpoints in utility classes. That way it will be much easier to read your code. As can be seen below, I specify my classes in different page widths by giving them w-LG-50 and w-100 just like in Bootstrap.

@media (min-width: 992px) {
  .w-lg-50 {
    width: 50%;
  }
}

<div class="w-100 div-height d-flex flex-row flex-column">


  <div class="w-lg-50 w-100 div-height blue-bg">
  </div>
  <div class="w-lg-50 w-100 div-height yellow-bg">
  </div>


</div>

We created a simple layout just as we use a framework. It is enough to simply create a utility class that we will use in many sections of our page such as buttons, titles, cards, etc. So every design should be covered by roots and variables before starting to create your page.

Of course, we are going to have to use CSS when we’re going to use pseudo-classes or properties doesn’t take a part in DOM directly. Eventually, custom utility classes will make our CSS document simple and we will handle many properties on our page before starting to write code in our CSS file.

Advantages:

When you first decide on your page layout, all you have to do is specify utility classes and variables. With help of that, when you work on HTML you don’t have to switch to CSS documents every time. That may help you to avoid making simple mistakes that come with a lack of focus.
Due to using utility classes rather than inline styling, your documentation becomes appropriate according to SEO principles.
You have a chance to avoid using CDN for not using any framework. This way your page’s SEO compatibility increases and protects you from performance loss.
During the rendering process, the browser reads and creates most of the layout before stepping into the CSS document. With help of that, the page’s performance increases.

Disadvantages:

Especially when you design responsive layouts, sometimes you have to use so many utility classes to make slight changes in every corner of your page. That makes your HTML document hard to read and follow.

To see this code in Codepen, click here.