The correct way to override CSS

Question

I am currently working with Bootstrap, and for my site I want to override the specific default settings with which it is associated. Many Bootstrap rules are pretty deeply nested and therefore most often do not take precedence over what I can define.

In my redefinition of the css file, I have a better option than to tickle

!important 

for each rule, or is that how everyone processes it these days?

Answer 1

FWIW, this works for me.

• If you are not using LESS yet, take the time to figure it out, this will save you a lot of time and make it easy to organize all http://lesscss.org . You will be well rewarded;)

• Instead of editing the original Bootstrap LESS files and losing everything in the next Bootstrap update, create a new theme-css.less file and possibly a theme.variables.less file and save them in the same directory as your Bootstrap LESS Files

• Modify bootstrap.less so that your new files are compiled correctly,

  ..

  // CSS Reset @import "reset.less";
  // Main variables and mixins

  @import "variables.less"; // Change this for custom colors, font sizes, etc.
  @import "mixins.less";

  @import "theme-variables.less"; // <==== Your custom CSS variables

  // Grid and page structure
  @import "scaffolding.less";
  @import "grid.less",
  @import "layouts.less";

  // Basic CSS
  @import "type.less";
  @import "code.less";
  @import "forms.less",
  @import "tables.less";

  @import "theme-css.less"; // <==== Your own CSS

  ..

• Use the Bootstrap customization page to find variable names that control most of the CSS that you might want to customize. Change them as req'd and add theme.variables.less to your file

• Use the LEST nested rules according to http://lesscss.org/ . <== This is important. This greatly simplifies what would otherwise be complex CSS

If you are new to LESS, I understand that this is not just a 5-minute fix, but as soon as you configure it and start using the nested rules, your CSS will be beautifully simple and easy to maintain.

UPDATE June 2015
The above technique is a bit outdated. It still works, but Jake suggested a change that I like and simplifies long-term maintenance.

Instead of editing the main bootstrap.less file:

• create a new theme.less file

• import bootrap.less and your custom changes, for example:

  @import "path to /bootstrap.less;
  @import "path to /custom.less;

• compile theme.less

Doing this means less likely that your user changes might be lost if you update the bootstrap.less file

Answer 2

!important is a last resort and should ideally never be used. if you want to redefine CSS, then follow CSS cascading rules: more "specific" rules always win for less "specific" rules. eg.

 <div id="someid">Howdy</div> div { color: red; } div#someid { color: blue; } 

makes the text blue, although both point to the same element, because #someid makes the second rule more specific.

Answer 3

Here's how CSS counting for selectors works.

The inline style has surpassed everything in CSS. eg. <p style="margin:0;"> override everything in your CSS file.

Identifier: 1000 points: # subtitle, # page-wrapper Class is considered 100 points Z: .sub-head, .page-wrapper Elements are counted as 10 points: a, p, div, ul, li Pseudo-elements are counted as 1 :: hover ,: first-child: last-child

Which of the selectors ever selected has the highest number of dots for the style will be displayed on the page.

! important is another trump card for drawing and should only be used rarely. For example, I like to use it to color special text or fields.

Here is a good link that explains this in more detail. It is very simple.

Link

Answer 4

I think the best way is based on the order of the linked css files in the header of the html document. Great explanation here: https://bootstrapbay.com/blog/customize-bootstrap/

---

The funny part of this

I used! important, and also, when I wrote this, I always thought what a strange way it was: D

Answer 5

my answer to this question. I add a custom stylesheet AFTER loading the bootstrap stylesheet, and every thing works.

(wordpress site with custom bootstrap theme) - in this case the problem is fixed after I insert my stylesheet after the bootstrap stylesheet

Answer 6

The simplest and first thing you need to do is check the order of the links to the stylesheets in the header of your html file.

First, link the boot CSS first, then on the next line, the link to your style.css file (or similar).

If you canceled this order, you might have trouble redefining certain style elements.