Overriding in LESS

Question

I'm working with Bootstrap using LESS, I'm new to LESS, so I have question.

For example, I want to add padding property to body.

body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
}

In bootstrap.less I made this:

@import "bootstrap/scaffolding.less";
body {
  margin: 0;
  font-family: @baseFontFamily;
  font-size: @baseFontSize;
  line-height: @baseLineHeight;
  color: @textColor;
  background-color: @bodyBackground;
  padding: 50px;
}

But in compiled CSS files I have two body classes, one is original and then my own. How to add property to a class without duplication? Thank you.

Take a look at this SO answer: http://stackoverflow.com/questions/10451317/twitter-bootstrap-customization-best-practices — am_, Feb 24 '13 at 10:43
@am_ I saw this, but is it normal that I'll have two classes in CSS file? What about browser's perfomance? — user0103, Feb 24 '13 at 14:56
Yes, its normal to have one or more cases for the same class, though not in the same css file - unless its compiled together from multiple css/less files. — am_, Feb 24 '13 at 18:00
@am_ but in compiled CSS files I have two classes, not one... — user0103, Feb 25 '13 at 03:33
Do you have two separate style blocks for body in the compiled bootstrap.css? If so you are not editing the correct styles for body in the LESS files (or adding additional styles), and thus when compiling it to CSS it will add body as a additional block. See original bootstrap.css to confirm that it only has one body block: http://twitter.github.com/bootstrap/assets/css/bootstrap.css — am_, Feb 25 '13 at 17:30
@am_ Yes, I have two separate body style blocks. And I "override" body as I write in example. — user0103, Feb 25 '13 at 18:07
Yeah, but you want to know how to do it without overriding ? If so just edit scaffolding.less and add the padding there - however as I mentioned the responsive*.less also contains padding on the body for lower resolutions. — am_, Feb 25 '13 at 18:29
@am_ No :) I want to know how to **override** it. I want to have one body class: original code + my additional code, not two different blocks. — user0103, Feb 25 '13 at 18:42
Well, CSS doesn't work that way - in CSS you override by having multiple blocks targeting the same class, it will not have any noticeable impact on browser performance. Look at the specificity link to understand how to override. LESS will not remove your overrides and compile it into one class/block, because that would remove some of the advantages of CSS overrides. — am_, Feb 25 '13 at 18:52
@am_ big thank you. I understood all I wanted. Have a nice day ;) — user0103, Feb 25 '13 at 19:06

am_ · Accepted Answer · 2014-07-16T23:11:12.160

As commented earlier it is considered best practice to not modify bootstraps less files, and instead add your styles in a stylesheet/less file that will override bootstraps. This way you'll avoid problems when upgrading to new versions of bootstrap - and when you need to track down errors it will be alot easier just looking at your overrides.

Now you might run into problems related to overriding, and trying to figure out why your applied style isn't overriding bootstrap's style. In that case i reccomend you to read up on Andy Clarke's great article - CSS: Specificity Wars (it's a bit old, but still a great explanation of css specificity):

http://www.stuffandnonsense.co.uk/archives/css_specificity_wars.html

EDIT - So to better explain the advantage of multiple class-blocks, here is first an example of using two classes to style one element:

CSS:

.center {
   margin: 0 auto;
}
img.center {
   display: block;
}

HTML

<div class="center">This will center horizontally</div>
<img class="center" src="foo.png"><!-- this image will also center horizontally -->

In the above example the image will be centered because it will inherit both rules. Now lets say that you want a nested ul to have a lower amount of padding than your regular (parent) ul, you would then override this by targeting its hierarchy (again the link posted above explains this)

ul {
    list-style: none;
    padding: 5px;
}

ul ul {
    padding: 1px;
}

EDIT, answer for @Chris Moschini comment

Yes you can also override Bootstrap default values through LESS if you create your own less file which imports bootstrap.less - and then override the variables you want to change.

@import "less/bootstrap.less";
@brand-primary: red;

To see what you can override look at the file variables.less on git, you can also checkout the mixins.less file if you'r looking to mess around there too.

But in many cases you'll need to do some overriding through css specificity.

Thank your for your edits, now I understood why LESS doesn't replace blocks. — user0103, Feb 25 '13 at 19:08
Is there no way to tell LESS, "Override as in don't even export the overridden rule to CSS," to avoid bloat, instead of, "Override as in spam the CSS with both rules, including one we know will never, ever apply?" — Chris Moschini, Jul 16 '14 at 06:35
I think that would come down to how your choice of compiler chooses to handle overriding. — Phantom Watson, Sep 01 '15 at 20:45

Overriding in LESS

1 Answers1