CODEWITHSUNDEEP
csstwitter-bootstrap
Alexandr Kurilin
Alexandr Kurilin

Reputation: 7845

Correct way of overriding CSS

I'm currently working with Bootstrap and for my site I want to override certain default settings it comes with. A lot of Bootstrap rules are quite deeply nested and thus most often than not take priority over whatever I might define.

In my overrides css file, do I have a better option than to slap

!important

on each rule, or is that how everybody's handling it these days?

Upvotes: 5

Views: 4864

Answers (6)

wla312
wla312

Reputation: 31

The easiest and first thing you should do is check the order of your stylesheet links in the head of your html file.

Link to the bootstrap CSS first, then, on the following line, link to your style.css (or similar) file.

If you have this order reversed, you may have trouble overriding certain style elements.

Upvotes: 0

BegYourPardon
BegYourPardon

Reputation: 197

my answer to this. I add a custom style sheet AFTER the bootstrap style sheet then every thing works.

(wordpress site with custom bootstrap theme) - in this case, problem fixed after I enqueue my style sheet after bootstrap style sheet

Upvotes: 0

David Taiaroa
David Taiaroa

Reputation: 25495

FWIW, this works for me.

  • If you aren't already using LESS, take some time to figure it out, it will save you heaps of time and makes it easy to keep everything organised http://lesscss.org. You will be well rewarded ;)

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

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

    ..

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

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

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

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

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

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

    ..

  • Use the Bootstrap customise page to located the names of the variables that govern much of the the CSS which you may wish to customise. Change these as req'd and add to your theme.variables.less file

  • Use the LESS nested rules as per http://lesscss.org/ . <== this is important. It hugely simplifies what would otherwise be complex CSS

If you are new to LESS I realise that this isn't a simple 5 minute fix, but once you get it setup and start using the nested rules your CSS will be beautifully simple and easy to maintain.

UPDATE Jun 2015
The above technique is a bit dated now. Still works but Jake suggested a change which I like and it 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, e.g.:

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

  • compile theme.less

Doing it this way means there's less chance that your custom changes could be lost if you update your bootstrap.less file

Upvotes: 9

Ales
Ales

Reputation: 441

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

Funny part of that

I was using !important as well and when writing it I was always thinking what kind of weird way is that :D

Upvotes: 0

Michael Merrill
Michael Merrill

Reputation: 58

This is how the CSS scoring works for selectors.

Inline style trump everything in the CSS. eg. <p style="margin:0;"> will override everything in your CSS file.

ID count as 1000 points: #sub-head, #page-wrapper Class count as 100 pointsZ: .sub-head, .page-wrapper Elements count as 10 points: a, p, div, ul, li Pseudo Selectors count as 1: :hover, :first-child, :last-child

Which ever selector has the highest about of points for the style will get rendered on the page.

!important is another trump card to pull and should only be used rarely. For instance I like to use it for coloring special text or margins.

Here is a good link that explains it more in detail. Its very simple.

Link

Upvotes: 2

Marc B
Marc B

Reputation: 360572

!important is a last resort, and should ideally never be used. if you want to override CSS, then honor CSS cascading rules: more "specific" rules always win out over less "specific" rules. e.g.

<div id="someid">Howdy</div>


div { 
    color: red;
}

div#someid {
    color: blue;
}

makes the text blue, even though both are pointing at the same element, because the #someid makes the second rule more specific.

Upvotes: 4

Related Questions