Framework Comparison
A CSS framework is a set of decisions made for you: naming, specificity, theming, and browser support.
The frameworks below embody genuinely different philosophies. Compare them on mechanism, not popularity —
and learn raw CSS first, because every framework resolves down to it.
The landscape
Four philosophies
| Framework | Mechanism | Best fit | Link |
|---|---|---|---|
| Bootstrap | Prebuilt components + utilities | Admins, dashboards, fast MVPs | getbootstrap.com |
| Tailwind CSS | Utility-first: thousands of single-purpose classes | Custom design systems with strict tokens | tailwindcss.com |
| Bulma | Component classes, CSS-only (no JS) | Simple marketing and documentation sites | bulma.io |
| Foundation | Enterprise component suite | Teams with mature, legacy component patterns | get.foundation |
The real differences
- Where styles live: Bootstrap and Bulma put them in component classes; Tailwind puts them in the markup as utility stacks. The first keeps templates clean and stylesheets coupled; the second keeps styles local and templates verbose.
- Customization model: Bootstrap themes through Sass variables and CSS custom properties; Tailwind themes through a configuration file that generates classes; Bulma themes through Sass variables only.
- JavaScript: Bulma ships none; Bootstrap ships optional behaviors (modals, dropdowns); Tailwind ships none but its ecosystem often pairs with component libraries that do.
Selection criteria
Five questions before adopting
- Delivery speed: how fast can a new developer ship a page that looks consistent?
- Customization: can the brand be expressed without fighting the defaults?
- Payload: what ships to the browser, and can unused styles be removed?
- Documentation: can the team self-serve answers?
- Exit cost: if the framework is removed in three years, how much markup changes?
The framework and JavaScript pairing
- React ecosystems pair with Tailwind or component kits built for React.
- Vue ecosystems pair with Tailwind or Vue-native component kits.
- Svelte pairs naturally with utility-first or minimal hand-written CSS.
- Static sites (this site included) can use plain layered CSS with a small utility layer.
The recommended path
Raw CSS first is not a slogan
Modern CSS covers most of what frameworks existed to provide: grid and flexbox ended the float-layout era, custom properties replaced theming plugins, nesting replaced preprocessors for many teams, and cascade layers solved the specificity wars. A framework now buys component speed, not capability. Learn the language first, then adopt a framework for its component velocity, keeping your own design tokens in your own stylesheet so migration stays possible.
/* Keep tokens framework-independent: this file survives any framework decision */
:root {
--color-action: oklch(0.55 0.2 262);
--space-3: 1rem;
--radius: 0.5rem;
}Practice: evaluate one
The task
Pick the framework you are most likely to use professionally and rebuild the card component from this track in it, side by side with your layered-CSS version.
The checklist
- Produce the same rendered result both ways and note where they diverge.
- Count the bytes that actually ship in each version (dev tools → Network).
- Write a one-paragraph recommendation with the five selection criteria as its outline.