Css utils class performance [closed] - html

Question

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this 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
}

Answer 1

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.