Is it wrong to use ! Import to override Bootstrap rules?

Question

I’m recently studying Bootstrap and realized that I can, for example, edit the background of a .nav-bar using the !important in css.

Is doing it that way wrong? Would I have any consequences on small projects? And large projects? If it is a wrong mode to edit Bootstrap, what would be the recommended mode?

Example:

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li><a href="#">Page 1</a></li>
      <li><a href="#">Page 2</a></li> 
      <li><a href="#">Page 3</a></li> 
    </ul>
  </div>
</nav>

CSS:

.navbar{
  background-color: #EEEEEE !important; /*Forçando a mudança de cor de fundo*/
}

Answer 1

Is doing it that way wrong? Would I have any consequences on small projects? And large projects? If it is a wrong mode to edit Bootstrap, what would be the recommended mode?

It’s not wrong, it’s just not good practice. For example, if you are doing a project with many style files that may be referencing the same block of code (another bad practice), it will give you headaches at the time of editing as it will get ! Important’s breaking the CSS interpretation order. You’ll start to lose control of where the styles of each part of your project are.

A good practice would be to create an archive (my-theme.css, for example) and put css on it by overriding the bootstrap rules that are necessary for your project and adding the add-ons. The ideal is to always keep the code well organized, preferably per page, per session, etc. Because so when it is necessary to make an edition or insertion, it will be easier to find the location in the file.

The interpretation of the style code is done in the same order that the links were inserted in the code. And by the 'cascade rule' of the CSS, the rules are always overwritten by the last appearance in the code and the most general for more specific. Then, just call your modified CSS after the bootstrap call. Example:

bootstrap.css:

.navbar{
  background-color: #EEEEEE; 
}

my-theme.css:

.navbar{
  background-color: #333333;
}

If inserted in this order, the background color will be the last declared color. You can read more about how override css works here.

Answer 2

Not wrong but unnecessary since Bootstrap has a page that allows to customize the CSS and the components you will use.

In the old days you had to download the source code, modify the files. Less and compile again to generate the CSS, today this can be done by the site. Colors can be customized and it is not necessary to include all components, you can create your own version only with what you will use:

Customizing the Boostrap