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（特定于主菜单的内联列表）或{ {1}}（通用内联列表应用于菜单，最终应用于具有相同外观的其他块）？等等。

更新我添加这个更清楚。

注意： .inline-list取决于.container

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

.col-1-3

如果我理解的话，它是如何运作的：

<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（以及与子元素h1和p相关的其他相关内容）是卡修饰符并包含主题属性（颜色，边距等），或者它更好地定义特定的像你一样阻止（.card--place，.user）？如果是，为什么？有了那些通用名称，他们怎么理解他们与卡块有关？

现在，要重复使用＆＃34;用户卡＆＃34;我只是用这个：

.place

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

这是正确的用法吗？

Answer 1

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

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

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

所以你最终会得到像

这样的东西

<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（并使`卡可以在其他位置重复使用，具有不同的定位）。

从主题样式

1 个答案: