Bootstrap includes a collection of utility classes (eg. flex-column
, mb-2
, d-block
). These are the classes used to apply single line CSS rules and are used throughout Joomla's views. Utility classes in practice are a good thing. They promote modular CSS and allow somewhat easier application of basic rules to markup.
The problem is Bootstrap obviously doesn't know what utility classes are needed. It therefore has taken the blanket approach of mapping a large chunk of the entire CSS spec to utility classes. That translates to close on 3000 lines of render blocking CSS, roughly a third of the entire framework (https://github.com/joomla/joomla-cms/blob/4.0-dev/media/vendor/bootstrap/css/bootstrap.css#L6002-L8901). Each rule using the frowned upon !important. I'll be hugely generous and say that in Joomla we use about 5% of these. That is a lot of dead weight and is contrary to the benefits of modular CSS. This list of utility classes appears to be extended with every new version of Bootstrap.
The solution is to either stop using them or have an environment where we control the utility classes (#20623).
or to submit an issue upstream with bootstrap?