Bootstrap 3 with LESS: how to handle bootstrap's nested rules?

Question

I'm doing my best to remove as many Bootstrap' "classes" markup style from my HTML as I can, and use semantic tags where useful, but so far it only works in simple cases.

When the original classes features a lot of nested rules, it becomes a nightmare. For instance, in the following example from the docs (with added sizing rules):

<div class="row">
  <div class="col-lg-6">
    <div class="input-group input-group-lg">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
      <input type="text" class="form-control">
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
  <div class="col-lg-6">
    <div class="input-group input-group-lg">
      <input type="text" class="form-control">
      <span class="input-group-btn">
        <button class="btn btn-default" type="button">Go!</button>
      </span>
    </div><!-- /input-group -->
  </div><!-- /.col-lg-6 -->
</div><!-- /.row -->

Rules like this works like a charm:

div:first-child {
  .make-row();
  & > div {
    make-lg-column(6);
  }
}

So these column classes can be removed from HTML. However, trying to do the same to buttons and form-controls doesn't work so well, because there's a lot of nested rules to style those elements. Everytime I remove a class from HTML, for instance with

input {
   .form-control;
}

That input loses every styling based on several Bootstrap's rules like

.input-group .form-control:last-child,
.input-group-addon:last-child,
.input-group-btn:last-child > .btn,
.input-group-btn:last-child > .btn-group > .btn,
.input-group-btn:last-child > .dropdown-toggle,
.input-group-btn:first-child > .btn:not(:first-child),
.input-group-btn:first-child > .btn-group:not(:first-child) > .btn

The following can be done, but IMHO it's unproductive to keep track of every little rule to every little detail BS pulls off:

input {
    .form-control;
    input-group .form-control;
    input-group .form-control:last-child;
}

LESS' :extend(* all) sometimes can be used, but I have only basic experience using it and so far I haven't been able to figure how to make the following "logic" works, or even if it's feasible:

div:first-child {
  .make-row();
  & > div {
    make-lg-column(6);

    div {
      &:extend(.input-group all);
      &:extend(.input-group-lg all);
      /* ... and so on */
  }
}

But all those extend() still can't replicate every nested rule.

Am I missing any fundamental logic using LESS' extend() here? Is this even a worthy goal? So far I've limited what Bootstrap classes I'm removing, but I'm not sure if this is the proper way to go. These kind of problems arise a lot when dealing with common page elements in Bootstrap (nav headers, dropdowns, forms, ...).

Answer 1

In the first place i will agree with the comment of @seven-phases-max, but i think i can explain your problem with the :extend pseudo class.

If you take a look into Bootstrap's less/form-groups.less file, you will find the following code:

.input-group-lg > .form-control,
.input-group-lg > .input-group-addon,
.input-group-lg > .input-group-btn > .btn {
  .input-lg();
}

The preceding code mean that the .input-group-lg > .input-group-btn > .btn child combinator will be compiled in your CSS too.

Now consider the following example Less code and consider that when nested the extend() will be applied on all parents:

.class1 {
color:green;
> .class2 {
color:red;
}
}
div {
  > div {
        &:extend(.class2 all);
  }
}

Which will compile into the following CSS code:

.class1 {
  color: green;
}
.class1 > .class2,
.class1 > div > div {
  color: red;
}

In the above CSS the .class1 > div > div is not the selector you will need.

You can solve the above with the following Less code:

div {
  > div:extend(.class1 > .class2 all){}
}  

These Less code will compile into the following CSS code:

.class1 > .class2,
div > div {
  color: red;
}

This example show you that you also will have to find class relations compiled into Bootstrap's CSS and use them in your :extends(); these relation can easily change as already mentioned by @seven-phases-max.

Also notice that in the case that the example Less code also contains an .class2 which is not nested such as:

.class2 {
p:4;
}

The .class2 class will change you extended class to:

div {
  > div:extend(.class1 > .class2 all, .class2 all){}
}  

In your compiled CSS you will find the following code:

.class1 > .class2,
div > div,
.class1 > div > div {
  color: red;
}

Where the .class1 > div > div due to the .class2 all makes no sense. Also when the Less code contains other appearances of the .class2 for instance:

.class3 {
.class2 {
property: 4;
}
} 

The .class2 all in the :extend() will cause a lot of unwanted selectors.