I'm new to BEM naming convention. From the tutorials I've watched, the Block part seems to be the "Wrapper" which contains Elements. My question is how does BEM work with Containers which cover an entire section of a page? Is it fine to still call them "container"?
My additional question is what if I have two web pages with a different width for Container, say for Login and Main page, is it fine to name them login-container and main-container respectively? Or should I add a name to act as a Modifier?
Here's a basic structure:
<div class="container">
<div class="card">
<img class="card__image" src="pic.jpg" alt="pic">
<h2 class="card__header">This is a card</h2>
</div>
<div class="card">
<img class="card__image" src="pic.jpg" alt="pic">
<h2 class="card__header">This is a card</h2>
</div>
</div>
container should be something like utility classes, so I would name it .u-container.
I think this article could say something about:
https://markus.oberlehner.net/blog/when-and-when-not-to-use-utility-classes-with-bem/