[richeyryan]

I think one of the biggest benefits, which I rarely see mentioned, is that all the class names are shared. When building your CSS for production, you can look at the classes you use and only add them to your CSS bundle. If you remove a class from somewhere in your HTML, the associated CSS gets dropped from your bundle. Your output CSS will shrink or grow with the classes that you use. Typically it's harder to remove dead CSS from traditional codebases.

Because the classes are shared to begin, there is less redundancy in the final CSS than using custom classes, perhaps with mixins to do standard flex or positioning patterns. So the resulting CSS file is typically relatively small and kept small by the dead code elimination. You can ship the entire CSS file to any page or on the initial page load for a SPA and not worry about code splitting your CSS, which can be troublesome in some builds.