В очередной раз задался вопросом о том, когда же использование бэм избыточно, а когда нет.
Для примера - верстаю сайт с довольно простым "деловым" дизайном. Какие-либо фреймворки не использую.
У меня есть такие модификаторы как
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 на несколько частей, но есть ли в этом смысл?
В общем, жду ваших мыслей по поводу всего этого.
