Advantages of using Bulma CSS framework

Reusable styling is extremely helpful for developers that want to focus on their program logic while providing a pleasing interface to the end-user. While Material UI is a popular styling framework that offers a great array of styled-components. Here is why I often lean towards using Bulma CSS Framework.

Smaller package size

Since Bulma is a pure CSS/SCSS styling framework, the total file size is much smaller compared to other styling frameworks that included Javascript for functionality.

Here is a comparison of the total package size for different styling frameworks.
Bulma 1.3 MB entire project file
bulma.css.min 204 KB the minified filed used in production

material-ui-next 48 MB

Customization

When it comes to customizing styles, less work is needed when using Bulma.

customizing a primary style color on Bulma

$purple: #3f51b5;
$primary: $purple;

customizing a primary style color on Maerial UI

import { createMuiTheme } from '@material-ui/core/styles';
import purple from '@material-ui/core/colors/purple';
import green from '@material-ui/core/colors/green';

const theme = createMuiTheme({
  palette: {
    primary: {
      main: purple[500],
    }
  }
})


function App() {
  return (
    <React.StrictMode>
      <ThemeProvider theme={theme}>
        <LandingPage />
      </ThemeProvider>
    </React.StrictMode>,
  );
}

Awesome helper classes

With styling frameworks that are not purely SCSS/CSS like Material UI, you will need to import the component from wherever they are stored in your project.

But with pure CSS/SCSS styling frameworks you can style your HTML elements by simply adding a class attribute.

<button class="button">Button</button>

What if I want to add margin to the top and bottom of my HTML element? I simply add a my-3 to my class attribute!

<button class="button my-3">Button</button>

The best thing about Bulma is that it will work on any front-end project environment because its pure CSS. Personally, it doesn't feel natural to use a programming language to customize CSS styling quite often, especially when doing so requires 20 times more typing compare to if I just edit the CSS directly. Even if you are not confident with CSS I recommend giving Bulma a try, the styles are great, and the documentation is awesome!