Which CSS strategy best minimizes unused styles when importing Bulma without Sass?

Question

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?

Zoha · Answer

AnswerWith pre-compiled Bulma CSS and no Sass build step, the only production-ready way to remove unused styles is content-based purging of the static CSS file in your build pipeline. PurgeCSS or UnCSS scanning your HTML/JS templates and stripping selectors not found is the effective strategy. Bulma does not ship an official lightweight distribution or modular CDN splits for the compiled CSS.Confirmed factsBulma’s pre-compiled CSS includes all components, modifiers and utilities. Without Sass you cannot selectively import modules.There is no official lightweight distribution or per-component CDN file for the compiled CSS.Browsers parse the entire stylesheet before rendering; unused rules still cost parse time and memory.Likely explanationSelective importing requires the Sass source. When you are locked to the compiled file, runtime techniques are not available because Bulma is CSS-only. Post-build purging is therefore the runtime-agnostic approach: a build tool scans your source files for class names, keeps matches, and drops the rest. Manual custom builds via Sass would be smaller, but that adds a Sass step which you said is not in use.Steps needed for this caseKeep a local copy of Bulma CSS in your build, do not purge a CDN-hosted file.Add PurgeCSS to your build via PostCSS, Vite, webpack or CLI.Configure content globs to cover all templates that reference Bulma classes, e.g. HTML, JS, JSX, Vue, etc.Add a safelist for Bulma modifier patterns that are easy to miss statically, such as /^is-/, /^has-/.Run purge against the built HTML + bulma.min.css and output a purged stylesheet for production.Verify with DevTools Coverage to confirm unused selectors are removed.One diagnostic detail that changes the recommendation: are Bulma classes added dynamically at runtime via JavaScript, template literals or a classnames utility? If yes, you need custom extractors and a broader safelist, otherwise static scanning will remove classes that are only composed in code.

Which CSS strategy best minimizes unused styles when importing Bulma without Sass?

1 answer

Answer

Confirmed facts

Likely explanation

Steps needed for this case

Your perspective belongs here.

0 question comments