CSS: what about the grid?

Question

css

The question is: should the grid styles be written as individual component styles (like the grid in bootstrap, for example) or is it better to write styles separately for each component?
Example: there is a header that consists of three sections: brand, navigation, actions.
If we write separate styles for the grid, the layout might look like this:

<header class="header">
    <div class="container">
        <div class="row">
            <div class="header__brand col-2">
                <a href="#">Brand</a>
            </div>
            <div class="header__menu col-8">
                <ul>
                    <li><a href="#">Item</a></li>
                </ul>
            </div>
            <div class="header__actions col-2">
            </div>
        </div>
    </div>
</header>

If we write styles for each component separately, the layout will be like this:

<header class="header">
    <div class="header__container">
        <div class="header__brand">
            <a href="#">Brand</a>
        </div>
        <div class="header__menu">
            <ul>
                <li><a href="#">Item</a></li>
            </ul>
        </div>
        <div class="header__actions">
        </div>
    </div>
</header>

Those. we will get rid of classes like container, row, col. However, it is possible that more styles will appear in CSS that are responsible for the positioning of elements.
Which of these options is better?
PS: I use flexbox to create the grid. Needs support for more browsers than with Grid.

Answer 1

you hit?) why do you need to write the same css code for different classes + a lot of time