Good practices with bootstrap grid system

I think it's a good practice, yes, I always applied a grid, even within the grid, even before I knew the bootstrap. I used the link as a reference.

And doing grid within grid does not affect responsiveness, ie the layout remains responsive.

It is normal to use grid within grid, this is how the system works. Example:

<div class="col-md-12">
   <div class="col-md-6"></div> <div class="col-md-6"></div>
</div>

  

But the html gets bad, polluted and poorly readable.

This is another question, when I use Bootstrap, I can not pass the Grid System in this way, in my opinion, this is extremely ugly. What is the solution in these cases? Use a CSS precompiler!

style.scss

#principal{
 @extend .col-md-12;
}

.menu{
 @extend .col-md-6;
}

html

<div id="principal">
   <div class="menu"></div> <div class="menu"></div>
</div>

Imagine without using precompiler as it would look if I had a difference in css

Do not recommend:

<style>
#principal{
 background-color: black;
}

.menu{
 background-color: blue;
}
</style>
<div class="col-md-12" id="principal">
   <div class="col-md-6 menu"></div> <div class="col-md-6 menu"></div>
</div>

In this case I just applied a color rule, but as our project grows it would be horrible to maintain a Bootstrap project without using any precompilers. In the example I used the syntax of SaSS, however, it goes from the taste of each one:)

Grids within Grids may even maintain responsiveness and not compromise the layout, but the html gets poor, polluted, and poorly readable. At the end of an html I always try to cut / remove unnecessary and decorative "DIVs", transferring "IDs" and classes when needed.