Is it wrong to use! important to overwrite Bootstrap rules?

Navigation
2

I recently studied Bootstrap and found that I can, for example, edit the background of a .nav-bar using !important in css.

Is doing this wrong? Would I have any consequences on small projects? And big projects? If it is a wrong way 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*/
}
    
asked by anonymous 28.03.2016 / 20:51

2 answers

5
  

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

Wrong is not, just not good practice. For example, if you are doing a project with many style files that might be referencing the same block of code (another bad practice), this will give you headaches at the time of editing, as it will have! Important's breaking the order of interpretation of CSS. You will begin to lose track of where the styles of each part of your project lie.

A good practice would be to create a file (eg my-theme.css ) and put it in css overwriting the bootstrap rules that are required for your project and adding the companions. The ideal is to always keep the code well organized, preferably per page, per session, etc. Because so when it is necessary to do an editing or insertion, it will be easier to find the location in the file.

The style code is interpreted in the same order that the links were inserted into the code. And by the 'cascade rule' of CSS, the rules are always overwritten by the last occurrence in the code and from the more general to the more specific. So 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 one declared. You can read more about how css override works here .

    
28.03.2016 / 21:39
1

It's not wrong but it's unnecessary since Bootstrap has a page that allows you to customize the CSS and the components you'll use.

Previously you needed to download the source code, modify the .less files and compile again to generate the CSS, today this can be done by the site. Colors can be customized and you do not need to include all components, you can create your own version only with what you will use:

Customize Boostrap

    
28.03.2016 / 21:49
Javascript counter for clicks How to name a constraint in Hibernate / JPA?