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 - 使用View抽象连接HTML标记。在这种情况下，您可以避免使用子类，因为您可以使用View。

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

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

2 个答案: