This "functional CSS" approach is obviously wrong. It causes repetition that would be avoided by defining a single CSS class (this can and probably should be d

This "functional CSS" approach is obviously wrong. It causes repetition that would be avoided by defining a single CSS class (this can and probably should be done inside in the file defining the component), and also prevents making appearance changes outside of the component (e.g. in non-component JavaScript or with a CSS-changing browser extension). If you want to obfuscate the semantics, then "minimized" class names are a better solution. If you don't care about repetition, then inline styles are just as good, and actually better since you can for instance use any of the 2^24 sRGB colors. None of the "downsides" listed in the document are reasonable arguments: > Inline styles don't respect media queries, which basically rules out responsive design "Utility classes" also don't, unless you define one for each possible media query and style (that's > 2^16 possible widths, > 2^16 possible heights, > 2^8 attributes...). > Inline styles aren't limited to pre-defined options, meaning you can still end up with 90 different shades of blue That's a downside, and also CSS has built-in color names. > Inline styles cause specificity issues, since they trump separate stylesheets. Use !important. > Inline styles don't support print-specific styles. True I suppose, but nobody cares about printing webpages nowadays, and those who are meticulous enough to care probably aren't choosing between inline styles and utility classes since they are both bad approaches. > Inline styles can't address pseudo-elements (such as ::before and ::after) You can just put the content in the HTML itself if you are explicitly specifying the appearance. > Inline styles can't apply to multiple elements. Utility classes can define .bg-blue once and have it apply to many things, which leads to shorter markup and quicker rendering speed. class="bg-blue" has to be repeated just as much as the equivalent background style... > Inline styles are a pain to type. Compare class="f-sm bg-blue" to style="font-size: 10px; background-color: #0000ff;". You should use IDEs with autocomplete, and then they are going to be easier to type, and most importantly developers already know them and can thus easily read and write them without consulting any documentation or CSS file.