VMware’s Clarity provides very nice and clean styles to typical HMTL components. In this topic we will focus only the CSS section of Clarity that can be used with vanilla JS, without the Angular components. It suits well if you want a common look and feel across your site or app, similarly to Twitter’s Bootstrap. Now there is small problem, the range of components the CSS covers is a lot, and even minified it is ~770KB. But for a small and medium websites most likely you would use just a fraction of what the whole library can provide. For example you would want to style the buttons and inputs, probably also include the responsive grid in place, but you would not want the card view or datagrid styles for example. So here will extract only the used styles reducing the size of the CSS we want to distribute, using the great tool https://github.com/giakki/uncss

So after I developed and tested my HTML site with the original CSS of Clarity, I am ready to optimize it

uncss welcome.html index.html ... any html and template files

The result of this would be the CSS containing only the rules that are used, i.e. that can be fined in the HTML elements.

And basically this is it! In my case I was able to reduce the size of the css from 770 KB to 200 KB, isn’t that sweet!

Want more?

Since Clarity also embeds the Metropolis font in the CSS, another 160KB-ish optimization that you may consider is to remove it and fallback to “Avenir Next” or “Helvetica Neue”. This however needs to be done by hand, in the clarity.css file find

“@font-face{font-family:’Metropolis’;src:url(data:” and remove the whole @font-face definition.

Now of-course it is questionable if you should remove the font, as Metropolis is really nice font and the Clarity team have picked it with a reason, to provide better UI. This is why I would stick with it.

Note: based on the dynamic nature of your application, there may be components or styles dynamically added that uncss cannot predict. Therefore it is good to have all styles defined in the input HTML files by default. For example if you have a element with “dropdown” class, it is nice to also specify it’s states, like “open”.