When it comes to styling, using utility classes is usually the best choice based on the examples provided.
Utility classes often have minimal styles and can be easily reused in HTML. They have little impact on performance thanks to efficient browser algorithms that can quickly apply styles.
On the other hand, utilizing @extend or similar features in tools like SASS can result in bloated files with overly complex selectors, which is generally not recommended. It's better to use mixins for creating styles instead of relying heavily on @extend.
If you've ever inspected the CSS of a website and noticed extensive use of extended selectors for grid elements, you may have experienced poor performance due to selector management issues.
While it's okay to use @extend, it should be done sparingly.
In situations where you frequently need utility classes and have access to a preprocessor, consider creating mixins like flex and textRight to efficiently include corresponding styles wherever needed. This approach helps optimize CSS output by reducing redundant rules.
For those not using a preprocessor, incorporating predefined utility classes directly in HTML is still preferable to inline CSS for applying minor rules such as text-align.