Login with github
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:


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.

  1. Should we add a "wrapper" or "container" suffix to the names of these kinds of elements?
  2. 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?
  3. 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.