BEM、SMACSS和OOCSS中的模块实例与模块实例

Question

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

.room {}

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

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

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

Answer 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...
}

祝好运!保持超棒！

Answer 2

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

在BEM中有修饰符，例如

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

在SMACSS -子类中

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

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

BEM

<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。

如果你感兴趣，我可以和你分享一些Marionette\ Backbone的例子。