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

Question

我有两个块/对象（User 和 Place）在视觉上显示几乎相同。

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

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

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

这是正确的用法吗？

Answer 1

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

这在混音的帮助下很容易。欲了解更多信息，请参阅：

• 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

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

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

<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 是将margin 从card 移动（并使`card 可以在其他位置不同的地方重复使用）。