Module vs. Module Instance in BEM, SMACSS and OOCSS

Question

Most CSS methodologies have the concept of reusable modules - BEM calls them blocks whereas SMACSS and OOCSS calls them modules. All of them recommend creating the modules with a class, e.g.

.room {}

Now if I have two or more instances of rooms in my HTML markup, how do I distinguish between them? I have been doing something like this:

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

But I am not finding the concept of module identity in any of the methodologies. I only see the concept of module modifiers or sub-classing, i.e. creating modules with extended look and/or behavior, e.g. room-kitchen. But that's not what I am doing here - all I am doing is creating two instance of the same module and using the identities to say place them at different locations. I don't see any of the methodologies talking about module instances and how to name them. Am I missing something?

Answer 1

Firstly all named methodologies, in case of CSS, its just naming convention, just a system of class naming to keep structure clean.

in BEM there is modificators e.g

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

in SMACSS - sub-class

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

So to get the correct module you can use any of this system to add some concrete information to determine it:

BEM

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

SMACSS

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

In CSS its only way to identify modules instances.

If you interested in identifying modules via JS. You can use some framework like Angular or

Marionette - to hook up HTML markup with View abstraction. In this case you can avoid using subclassing as you can work with View.

I can share with you some Marionette\ Backbone examples if you interested in.

Answer 2

Great question! So this is a little hard to answer because I don't know exactly what you are styling. But using the example about with BEM you would do:

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

Double hyphens indicate a modifier in BEM syntax.

I would further modify the code above this way:

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

And the css would be:

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

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

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

Good luck! Stay awesome!