What is Utility-First Approach – Pros & Cons

The utility-first approach is very popular these days in web designing. Let’s understand what exactly it is and how can you benefit from this amazing approach.

When you write custom CSS in your projects, 99% of the time, you will be writing to design a button, styling a link or div, and working with layouts. Let’s say, you are going to design a simple button that has 10px padding, blue background color, and a 5px border-radius. You will end up writing like the following.

Now, at some point, you want the same button but with 10px of border-radius and black background color. What you will do? What most people will do is create another button like the one below.

Now, your project is scaling after you add more features and you need a third button with no border-radius but with 20px of padding and red background. What you will do? A good solution would be to create a button with generic properties and then style 3 different buttons with 3 different classes like the example below.

This is what bootstrap used to style buttons but what if you need 5 different buttons instead of 3? Are you going to add more CSS to create more buttons? What are you going to name the classes? What properties you will keep in the generic .btn class? 

Small and Reusable Utility Classes

Here comes the utility-first approach to solving these problems. You don’t need to worry about naming your classes and what properties you should keep in the generic button. In the utility-first approach, you will write small reusable classes that will help you add padding, margins, colors, and almost everything. These small utility classes, when combined, can design buttons of your choice. This is not limited to buttons but can be used in other places like cards, nav menus, etc.  Here is a simple example of what a utility-first approach will look like.

So, in the above example, we don’t style a button directly by adding CSS to a button, instead, we combine different utility classes to create a button. These small and reusable classes are not only for buttons but can be used for other elements. For example, if you want to add blue background to a div element, the class ‘bg-blue’ can be applied. The modern framework TailwindCSS is getting more popular day by day because of this utility-first approach.

Pros and Cons of Utility First CSS Approach

Pros

  • Reusability
    You can reuse classes like p-4 m-10 to anything like links, div, nav item, h1
  • No class names issue
    You don’t have to worry about naming classes every time you add some styles
  • Less Code More Work
    With a utility-first approach, your code will be less than the traditional approach because of reusable classes
  • No switching from HTML files to CSS files
    With the utility-first approach, you will be just adding classes again and again because they are declared in CSS. This will increase productivity in your development.

Cons

  • Ugly looking HTML
    With a utility-first approach, your HTML may look ugly because you apply 10 different classes to design a button.

Conclusion

Using a utility-first approach in CSS has a lot more benefits than writing traditional CSS. By using the utility-first approach, you can reuse almost every class in your HTML again and again. This approach will free you from worrying about naming classes when designing web pages and you will not have to switch back to the CSS files to change styles.

 

 

Latest articles

Leave a reply

Please enter your comment!
Please enter your name here

Related articles