Which CSS strategy best minimizes unused styles when importing Bulma without Sass?
0 reputation · 05 Nov 2022, 23:16 UTC
Bulma provides a comprehensive set of CSS classes for its 12-column Flexbox grid and various UI components. While using the Sass source allows for selective importing of specific modules, many projects rely on the pre-compiled CSS file for simplicity.
Including the full compiled CSS file introduces a significant amount of unused styling into the production environment, as the browser must parse the entire framework regardless of which modifiers or components are actually utilized in the HTML.
Given that Bulma is a strictly CSS-based framework without a JavaScript runtime to handle dynamic loading, what are the most effective methods for reducing this CSS bloat? Does the framework support a lightweight distribution, or is a third-party purging tool the only viable option for optimizing the final bundle size?