У меня есть два блока/объекта (User и Place), которые визуально отображаются почти одинаково.
В BEM я должен поместить стили, связанные с сеткой макета, в один класс со стилями темы? Или я должен их разделить?
В БЭМ мне нужно создавать блоки для конкретного проекта (.user, .place) или глобальные повторно используемые блоки (.card)?
То есть это:
.user{
// Grid-layout styles
float:left;
width:33.3333%;
// Theme etc styles
background: red; // <== Change only this color
border: 1px solid green;
padding: 10px;
margin: 5px;
position: relative;
}
.place{
// Grid-layout styles
float:left;
width:33.3333%;
// Theme etc styles
background: blue; // <== Change only this color
border: 1px solid green;
padding: 10px;
margin: 5px;
position: relative;
}
<div class="list">
<div class="user">
<div class="user">
<div class="place">
<div class="place">
</div>
Или это?
// Apply this class to user and place objects
.card{
// Theme etc styles
background: #EEE;
border: 1px solid green;
padding: 10px;
margin: 5px;
position: relative;
}
// Modifier: Apply this class to user object
.card--red { background: red }
// Modifier: Apply this class to place object
.card--blue { background: blue }
// Apply this class to user and place objects
.col-1-3{
// Grid-layout class to assign to each .card block
float:left;
width:33.3333%;
}
<div class="list">
<div class="col-1-3 card card--red">
<div class="col-1-3 card card--red">
<div class="col-1-3 card card--blue">
<div class="col-1-3 card card--blue">
</div>
Это пример из реального мира, но есть много похожих ситуаций: подумайте о распространенном случае, таком как Меню: мне нужно сделать блок/объект .main-menu (внутренний список, специфичный для главного меню) или .inline-list (общий встроенный список, применяемый к меню и, в конечном итоге, к другим блокам с таким же внешним видом)? И так далее.
ОБНОВЛЕНИЕ: я добавляю это для большей ясности.
Примечание: .col-1-3 зависит от .container
Могу ли я использовать это, чтобы уменьшить количество блоков в каждом div и упростить обслуживание?
<div class="container">
<div class="col-1-3 card card--user">
<h1 class="card__title card__title--user">
<p class="card__text card__text--user">
<div class="col-1-3 card card--user">
<h1 class="card__title card__title--user">
<p class="card__text card__text--user">
<div class="col-1-3 card card--place">
<h1 class="card__title card__title--place">
<p class="card__text card__text--place">
<div class="col-1-3 card card--place">
<h1 class="card__title card__title--place">
<p class="card__text card__text--place">
</div>
Как это работает, если я хорошо понимаю:
.col-1-3 — это только макет (столбцы и т. д.), полностью отделенный от карты блока.
.card является общим общим/повторно используемым блоком и имеет только внутренние свойства (заполнение и т.д.)
.card--user и .card--place (и другие, связанные с подэлементами h1 и p) являются модификаторами карт и содержат свойства темы (цвета, поля и т. д.), или лучше определить конкретный блок, как вы сделали (.user, .place)? Если да, то почему? И с этими общими названиями как понять, что они связаны с карточным блоком?
Теперь, чтобы повторно использовать «карту пользователя», я буду использовать это:
<div class="card card--user">
но в этом случае карта будет полной ширины (потому что нет класса макета).
Это правильное использование?
