Best way to use a CSS Framework?

Hi,

I’m new in Vue.js and more generally in web development (I come from the OOP world). I wonder about the best way to use a CSS Framework with Vue.js. My main concern is to be able to easily change Framework if my current choice (Bulma) is wrong.

I was thinking about using SCSS @extend rule:

<template> 
  <div class="my-class">...</div>
</template>

So the Vue.js code just names the elements without worrying about styling, and SCSS file make the job:

.my-class {
  @extend .a-bulma-class, .another-bulma-class;
  margin: 2em;
}

If I change the CSS Framework, then I just have to change the SCSS file:

.my-class {
  @extend .a-bootstrap-class;
  margin: 2em;
}

But after a few tests:

  • The built CSS cascade is sometimes disordered:

    .buttons .button:not(:last-child):not(.is-fullwidth), ... {
      margin-right: 0.5rem;
    }
    .buttons.has-addons .button:not(:last-child), ... {
      margin-right: -1px;
    }
    

    Can become:

    .buttons.has-addons .button:not(:last-child), ... {
      margin-right: -1px;
    }
    .buttons .button:not(:last-child):not(.is-fullwidth), ... {
      margin-right: 0.5rem;
    }
    
  • Due to the @extend mechanics, the built CSS size grows significantly, eg 23 KB just adding:

    .my-button {
      @extend .button;
    }
    
  • I guess switching from one CSS Framework to another is not always limited to changing classes.

So… is there a better way to do that? Or the only good practice is to reference the CSS Framework directly in the Vue.js code, no matter how long it takes to (maybe) change CSS Framework later?

Thank you very much!

Hi.
It’s a very interesting question which I’m afraid I don’t have a positive answer.

IMO you can’t switch CSS framework easily due to CSS frameworks themselves: some days ago I wanted to quit Bootstrap, I tried Materialize, then Bulma (which I finally choose).

Beyond the fact the class-names are not the same, the problem is there is no “convention” for CSS framework: even if there is some similarity (like flexbox/grid system), each framework implements whatever behaviors they want and you may not found some components in Bulma you can found in Bootstrap (and vice-versa). For example carousel is in Bootstrap but you need an extension in Bulma, or inverse: message component exists in Bulma but not in Bootstrap.

Also, the DOM node’s implementation is not the same in each framework. For a simple example a breadcrumb in Bootstrap which use ol tag and breadcrumb-item class into all li tag:

<nav aria-label="breadcrumb">
  <ol class="breadcrumb">
    <li class="breadcrumb-item"><a href="#">Home</a></li>
    <li class="breadcrumb-item"><a href="#">Library</a></li>
    <li class="breadcrumb-item active" aria-current="page">Data</li>
  </ol>
</nav>

Where Bulma use ul tag and just a breadcrumb class on nav tag:

<nav class="breadcrumb" aria-label="breadcrumbs">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">Library</a></li>
    <li class="is-active"><a href="#" aria-current="page">Data</a></li>
  </ul>
</nav>
1 Like

Hi Maz,

Thanks for your answer! I feared something like that. Gulp.

And what are the good practices in term of task distribution? By using a CSS Framework, the person in charge of the CSS must inevitably step in the Vue.js templates?

At the risk of diverging a little, how would you summarize your experience with Bootstrap, Materialize and Bulma? Why did you finally choose Bulma? What about Buefy? I suspect that everyone has different needs, but if you can explain in two words… I would be eternally grateful to you :wink:

The person in charge of the CSS must step into Vue.js, but not too deep due to the style tag.

Most of the job for the “CSS Developer” will be done into variables of the framework to customize it: customize Bulma - customize Buefy

Some components will use scoped CSS but again it’s really easy.
For example, a project I’m working on, I need to customize a card-footer delete button:

<style lang="scss">
    @import "~bulma/sass/utilities/initial-variables"; // import Bulma initial variables (needed for $white)
    @import "~bulma/sass/utilities/derived-variables"; // import Bulma basics variables (needed for others)
    @import "~buefy/src/scss/utils/_variables"; // import Buefy to override some Bulma variables
    .delete_button {
        color: $danger;
        &:hover {
            color: $white;
            background-color: $danger;
        }
    }
    .select_button:hover {
        color: $light;
        background-color: $primary;
    }
</style>

Renders:
Capture%20d%E2%80%99%C3%A9cran%20(4)

For now, I didn’t modify Buefy’s colors, but if I want purple to be green, I just have to modify the Buefy’s variables sass file:

$primary: #7957d5 !default;
//to
$primary: #00ba00 !default;

And all the purple over my app will become green! Backgrounds, texts, even a darken/lighter nuance of my green will be automatically calculated by Bulma/Buefy for :hover and :disabled for example.

Why I have chosen Bulma? The greatest reason is I wanted a simple CSS-only framework, Bootstrap comes with a lot of (JS) stuff I don’t need like carousel.

The syntax seems to be easier to learn and more intuitive: is-danger, has-text-centered.

After that, CSS Frameworks are the same for many purposes: grid system, column layout, button, sizing and so on… Just pick one and it will be fine :slight_smile: there is no one better than another when all do the same stuff. It’s just a feeling choice.

Hi Maz,

Many thanks for your time and your reassuring words, we will make a choice and go on :slight_smile: