css - 将布局样式与主题样式分开

Question

我有两个 block /对象(User 和 Place)，它们在视觉上显示得非常相同。

在 BEM 中，我必须将与布局网格相关的样式与主题样式放在同一个类中吗？或者我必须将它们分开？

在 BEM 中，我必须创建元素特定的 block (.user、.place)或全局可重用 block (.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>

这是一个真实世界的例子，但有很多类似的情况:想想像菜单这样的常见情况:我必须做一个 block /对象 .main-menu (内联列表特定于主菜单)或 .inline-list(应用于菜单并最终应用于具有相同外观的其他 block 的通用内联列表)？等等。

---

更新:我添加这个是为了更清楚。

注意:.col-1-3 依赖于 .container

为了减少每个 div 上的 block 并简化可维护性，我可以使用这个吗？

<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只是布局(列等)，与 block 卡完全分离

.card 是通用的通用/可重用 block ，只有内部属性(填充等)

.card--user 和 .card--place(以及其他与子元素 h1 和 p 相关的元素)是卡片修饰符并包含主题属性(颜色、边距等)，还是像您那样定义一个特定的 block 更好(.user，.place)？如果是，为什么？有了这些通用名称，如何理解它们与卡 block 相关？

现在，要重复使用“用户卡”，我将使用它:

<div class="card card--user">

但在这种情况下，卡片将是全宽的(因为没有布局类)。

这是正确的用法吗？

Answer 1

首先，您应该将 block 的内部布局(如填充)与外部布局(例如边距、位置等)分开。

这在混音的帮助下很容易。有关详细信息，请参阅:

• https://en.bem.info/method/key-concepts/#mix

• https://en.bem.info/method/solved-problems/#how-to-host-multiple-entities-on-the-same-dom-node-and-avoid-copy-and-paste

因此，您将能够将通用的可重用 block 与元素特定父 block 的某些元素混合在一起。并且所有的定位都应该保留在这个元素的样式中。

所以你最终可能会得到类似的东西

<div class="list">
  <div class="col-1-3 card user">
  <div class="col-1-3 card user">
  <div class="col-1-3 card place">
  <div class="col-1-3 card place">
</div>

甚至

<div class="list">
  <div class="col-1-3 list__item card user">
  <div class="col-1-3 list__item card user">
  <div class="col-1-3 list__item card place">
  <div class="col-1-3 list__item card place">
</div>

其中 list__item 是从 card 移动 margin(并使 `card 可以在不同位置的任何其他地方重复使用)。