Bootstrap layout, what SHOULD be improved and how to set styles correctly?

Question

css

In general, I use mdbootstrap5. It seems to have done everything, but now there are a couple of questions.

1. Let's say we have a mask for blocks-> mask, but the documentation sets the styles for the mask directly in html. Is it worth it to do so?

<div class="mask" style="background-color: rgba(0, 0, 0, 0.4);">
                        ////////////////////////////////////
                    </div>

[I took and rendered this style in css, setting the background to the mask] -> the same with other elements, let's say the maximum height for bg-image, also rendered in css, is it correct to separate html and css in bootstrap5?

2. The second question is to add your own styles to bootstrap elements.
Is it worth writing your selector not in element classes, but in id, in order to maintain readability. Let's say:

<div class="newsMain text-center text-white"> (не в кашу классов, а в id)<blockquote>/<div class="text-center text-white" id="newsMain "> </blockquote>
                                    <h2>TES TEST TEST</h2>
                                    <p id="newsDescription">Lorem Lorem Lorem Lorem</p>
                                    <button type="button" class="btn btn-danger">Читать дальше</button>    
                                </div>

let's say in css like this:

@media screen and (max-width: 473px){
    #newsDescription{
        display: none;
    }
    #newsMain{
        margin-top: 1.5rem;
    }
}

Basically, if we have all selectors in css, especially in media, they will start with # this will improve readability, both in css and html (separate bootstrap classes and their classes)

3. Is it worth setting your styles to global classes like .mask/.bg-image, when I know that I will not use bg-image anywhere with such styles, and if I do, is it worth setting my classes in id? (2nd question)

Answer 1

1. If there are really a lot of styles, then you should set your own class, and if the site is small, then it is quite possible to use inlines.
2.No
3.No, this will break blocks in other places, it's better to create your own class and add it where necessary, or use inlines, unless, of course, as in your case, it's just a mask.
Usually, only the grid is used in the boots, and if you decide to make a unique project on the boots, then only rebuilding the bootstrap itself for your needs, this will give the maximum profit from the framework, and you will not have such questions. All the best!