Should I write a new css class, or write the path to a specific div?

Question

css

So I'm currently typing on Bootstrap 3, and there is a need to design some buttons in my own way (backgrounds, hoovers, etc.). Such a question should be written like this:
Example 1 (just adding a new class) :
HTML

<div class="container">
<div class="btn btn-primary bg_red"></div>
</div>

css

.bg_red{
background-color:red;
}

Example 2 ( when writing a path to a specific block, the path can be quite long ):
HTML

<div id="btn_red" class="container">
<div class="btn btn-primary"></div>
</div>

css

#btn_red>.btn{
background-color:red;
}
html>.container>[class="btn btn-primary"]  ( прописать так )
html>.container>.btn  ( или прописать так )
html .container .btn { ( или прописать так, когда надо изменить все btn )
background-color:red;
}

In the second case, when the element is buried deep, the path can be like this:
html .container .row .some_class .btn { ... }
I constantly use the first option, where I make a new class, bg_red, and add it wherever I need a background red, if the property is used more than 2 times in the theme. I would like to know how best, when and what to use, and how are you doing?)

Answer 1

In general, you surprised me now with both options, as for me, they are both wrong. In general, a long time ago there is such a thing as customized bootstrap

Answer 2

Add classes, learn LESS/SASS. With them, this is done in 2 seconds.
I do the same as you...
...only I create a new element if it is very different from the others or I work on a standard boot and I don't really need to remake it for myself:
.btn-offer, btn-callback
...and so I connected the preprocessor and forgot about these problems by overwriting the standard classes.
But in your case - the first option.
BEM adherents, is bg_red a modifier in this case?

Answer 3

if you use 1 example, then the new style should prescribe all the classes of the block

.btn.btn-primary.bg_red {
  ..style here
}

style specificity will increase and there will be less chance of style conflicts, which many people like to fix with !important and which BEM saves
, I advise you to read about OOCSS because your thoughts are moving in this direction)