1

大多数 CSS 方法都有可重用模块的概念——BEM 将它们称为块，而 SMACSS 和 OOCSS 将它们称为模块。他们都建议使用类创建模块，例如

.room {}

现在，如果我的 HTML 标记中有两个或更多房间实例，我该如何区分它们？我一直在做这样的事情：

<div class="room room1"></div>
<div class="room room2"></div>

但是我在任何方法中都没有找到模块标识的概念。我只看到模块修饰符或子类的概念，即创建具有扩展外观和/或行为的模块，例如room-kitchen. 但这不是我在这里所做的——我所做的只是创建同一个模块的两个实例并使用标识将它们放置在不同的位置。我没有看到任何关于模块实例以及如何命名它们的方法论。我错过了什么吗？

4

2 回答 2

1

好问题！所以这有点难以回答，因为我不知道你在设计什么。但是使用关于 BEM 的示例，您将执行以下操作：

<div class="room room--right"></div>
<div class="room room--left"></div>

双连字符表示 BEM 语法中的修饰符。

我会以这种方式进一步修改上面的代码：

<div class="room--right"></div>
<div class="room--left"></div>

CSS将是：

[class*=room] {
  ...base styles here...
}

.room--right {
  ...specific right styles here...
}

.room--left {
  ...specific left styles here...
}

祝你好运！保持好状况！

于 2015-09-19T15:12:00.957 回答
0

首先，所有命名方法，在 CSS 的情况下，它只是命名约定，只是一个类命名系统，以保持结构清洁。

在BEM中有修饰符，例如

<span class="block_modificator_value"> some </span>

在SMACSS - 子类

<span class="module-sub-some"> some </span>

因此，要获得正确的模块，您可以使用该系统中的任何一个添加一些具体信息来确定它：

边界元法 

<span class="block_modificator_value block_id_123"> some </span>

SMACSS

<span class="module-sub-some module-id-123"> some </span>

在 CSS 中，它是识别模块实例的唯一方法。

如果您有兴趣通过 JS 识别模块。您可以使用一些框架，如 Angular 或

Marionette - 将 HTML 标记与 View 抽象连接起来。在这种情况下，您可以避免使用子类化，因为您可以使用 View。

如果您有兴趣，我可以与您分享一些 Marionette\Backbone 示例。

于 2014-05-23T11:18:49.510 回答