CSS: как быть с сеткой?

Question

[Финн Парнишка]

Вопрос следующий: следует ли написать стили сетки, как стили отдельного компонента (напр. как сетка в bootstrap) или лучше писать стили отдельно для каждого компонента?

Пример: есть шапка, состоящая из трех секций: brand, navigation, actions.
В случае, если мы напишем для сетки отдельные стили, верстка может выглядеть следующим образом:

<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>

В случае, если мы будем писать стили для каждого компонента отдельно, верстка будет такой:

<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>

Т.е. мы избавимся от классов, вроде container, row, col. Однако возможно в CSS появится больше стилей, отвечающих за расположение элементов.

Какой из этих вариантов лучше?
PS: для создания сетки использую flexbox. Нужна поддержка большего количества браузеров, чем при использовании Grid.

Comments

[Александр]

ИМХО, сетка - это отдельный компонент

Answer 1

[Дима Долготер]

ты удареный?) зачем тебе писать один и тот же код css для разных классов+куча времени