How to name elements whose purpose is wrapping other elements?

Forum /

There is a common scenario that keeps coming up when I'm designing blocks with complex layouts, which is the need for what I would call "wrapper elements" (and I mean BEM elements). I'd appreciate any help:

Look at the above picture. This is a "course-card" block. Among its elements, there are these two:

.course-card__duration

.course-card__level

Pretty straight-forward so far. Now, in order to achieve the layout that you see there, I would need another element to wrap those two, and its CSS would look something like this:

.course-card__? {
   display: flex;
   justify-content: space-between;
}

Now, the question is, what should such an element be called according to BEM standards?! It's an element that doesn't serve any semantic purpose, it's just there for layout purposes. I could think of the following options:

- course-card__level-and-duration-wrapper (which obviously looks horrible!)
- course-card__basic-info (still not ideal)
- you tell me?

This is not a rare case. I encounter one of these "wrapper element" cases in almost every block I'm implementing. In this same block, you can see in the picture that there is a need for another wrapper element that wraps instructor-avatar and instructor-name. I also couldn't find a satisfactory answer to this question, neither in en.bem.info nor in Stack Overflow or anywhere else, really.

Should we add a "wrapper" or "container" suffix to the names of these kinds of elements?
Should their names be as semantic as possible? For instance "basic-info" in the first example, and "instructor-info" in the second example? And we should avoid words like "wrapper" and "container" as much as possible?
Are there any other guidelines and conventions in general to deal with these kinds of situations?

So, I'd appreciate any guidance. Thanks in advance.

3 years ago

veged

First of all, that’s very good question — thank you!

I’d like to say that there is no any strict guidelines on methodology level. But according to our experience I would recommend following priority order of decisions:

try find proper semantic name (as you suggest basic-info) — really often it’s possible and, even if it will be slightly far-fetched, those “normal” uniq names will help you talk about different elements such this better than ugly uniform names
try to think about those elements in terms of layout semantic — for example there is no problem to use names row/col if we do some tables, so if your block have clear sections in their skeleton there is no problem to have elements such subsection/mainsection
even wrap name (or subname) can be used in simple cases where there are no a lot of such similar wraps (let’s say 1-2)

You already describe good understanding of problem so my answer only add 2nd option and suggest priority axis.

3 years ago

aradalvand

@veged Thanks a lot, Sergey, I appreciate your answer.

In order to leave a comment you need to login.