Css utils class performance

Question

I see the trend of css utils class and I am wondering if there is an impact on performance for this style.

What will be a better way?

One - make your html element with bunch of utils classes like:

<div class="padding flex justifyCenter alignCenter textRight"></div>

Two - make your css ( with preprocessor like sass ) like this:

%flex {
  // code
}

%textRight {
  // code
}

div {
  @extend %flex;
  @extend %textRight;
}

 h1 {
   @extend %flex;
   @extend %textRight;
 }

Will output:

div, h1 {
 // with flex and text right 
}

score 4 · Accepted Answer · answered Dec 26 '15 at 16:38

Utility Classes will almost always be the optimal solution based off of the two examples you've provided.

The corresponding styles for the utility class tend to be quite small and the reference from HTML promotes reuse of these definitions. From a performance perspective they will have negligible impact since complex algorithms implemented in browsers and hashing allow them to reference rules and apply styles extremely quickly.

Using @extend or an equivalent can lead to huge files when generated from e.g. SASS since the selectors for the rules become massive with many clauses. It is generally bad practice to use @extend a lot when creating styles as mixins are typically favourable.

If you've ever opened developer tools on a site with CSS where e.g. the grid elements all comprise of extended selectors then the performance is horrible as the browser tries to manage the selectors.

I'm not saying not to use extend but it should be used sparingly.

If you are in a situation where you need to use these utility classes often and have a preprocessor at your disposal you might be best making flex and textRight mixins and just @include them where you want those corresponding styles. This will give you the optimal CSS output since a preprocessor can condense the rules and prevent repetition.

If you are not using a preprocessor you're also fine using the defined utility classes in your HTML. It still beats inline css to apply a small rule e.g. text-align.

An important point to remember when considering optimisations is that code readability and maintainability is usually a priority over a marginally small performance gain. This also speaks for the utility classes. — Tuure, Dec 26 '15 at 16:51

Css utils class performance

1 Answers1