Destell
@Destell
Зеленый фронтендер

И снова о бэм — в каких случаях избыточен, в каких нет?

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

Для примера - верстаю сайт с довольно простым "деловым" дизайном. Какие-либо фреймворки не использую.

У меня есть такие модификаторы как
spoiler
.--mark {
    color: #24408d;
}
.--mark-2 {
    color: rgb(255, 229, 0);
}


, использующиеся по всему сайту для выделения текста.

Есть подобные переиспользующиеся блоки
.title {
    font-size: rem(40);
    font-weight: 400;
    text-align: center;
}


и типично бэмовские (вроде)
spoiler
.icon {
    display: inline-block;
    background-position: center center;
    background-repeat: no-repeat;
}

.icon--search {
    width: 23px;
    height: 23px;
    background-image: url("../images/icons/search.png");
}



По этому, в принципе, у меня вопросов нет, но если найдутся какие-либо соображения и замечания - готов выслушать.

А вот теперь суть - сайт я делаю на флексах. Т.е. есть два разных по смыслу и принадлежности блока, но оба используют одинаковые правила display flex и justify-content center. И я начинаю думать, надо ли выносить эти правила в модификаторы или нет? С одной стороны, это выглядит логичным, с другой - эти блоки были есть и будут именно в том виде, который задается этими правилами, т.е. по идее, несмотря на одинаковые правила, они обособлены. Раньше я использовал модификаторы типа .--flex, .--justfy-center и т.д., в том числе для задания text-transform в блоках ( а не части текста) и т.д., сейчас задумался о целесообразности применения такого подхода в блоках, где использование правил позиционирования и т.д. постоянно на всем макете.

Например, ранее
ul.menu.flex-container.flex--between.--reset
        li.menu__logo-box

.flex-container {
display: flex;
flex-flow: wrap;
}

.flex--between {
justify-content: space-between;
}

.menu {
    list-style: none;
}

.--reset {
margin: 0;
padding: 0;
}


Сейчас я все еще использую --reset для сброса таких блоков, как h1, ul и т.д., но все свойства flex переношу в меню. Аналогично вопрос про списки - как правильнее, использовать отдельный класс для сброса маркировки списка или прописывать каждому списку отдельно?

Или подобный момент

.sub-menu {
    position: absolute;
    z-index: 10;
    list-style: none;
    padding-top:  10px;
    padding-bottom: 10px;
    white-space: nowrap;
    background-color: rgba(0, 0, 0, 0.9);
    color: rgb(255, 255, 255);
    min-width: 100%;
}


Ранее я разбивал свойства по типу, т.е., к примеру, .sub-menu, .sub-menu--position, допустим, --panel (бэкграунд и цвет текста). Но, например, этот конкретный блок используется в целом, т.е. другие элементы сайта не имеют подобных отступов, цвета фона и т.д. Можно было бы выделить отдельный класс для белого цвета текста, который используется в разных блоках, но они разные по стилю, т.е. в одном блоке цвет может смениться с белого на желтый, а в другом остаться. Было бы красиво и эстетично "распилить" свойства .sub-menu на несколько частей, но есть ли в этом смысл?

В общем, жду ваших мыслей по поводу всего этого.
  • Вопрос задан
  • 129 просмотров
Пригласить эксперта
Ответы на вопрос 1
alvvi
@alvvi
export default apathy;
Это же Atomic CSS в БЭМ-обертке!

По этому, в принципе, у меня вопросов нет, но если найдутся какие-либо соображения и замечания - готов выслушать.

На самом деле нахожу действительно полезным миксовать их иногда, но для лэйатуа на flex-ах использую просто отедльный компонент сетки и хватает с лихвой пока что.

есть ли в этом смысл?

Есть, если вам нравится Atomic CSS в целом и вы осведомлены о его приемуществах и недостатках, то ответ на ваши вопросы по поводу "разделения" класов на псевдомодфиикаторы естественно положительный.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
Reklama Guru Санкт-Петербург
от 50 000 до 60 000 руб.
Randewoo.ru Москва
от 120 000 до 180 000 руб.
Blogman Оренбург
от 20 000 до 60 000 руб.