Hey there! Great questions as you're dipping your toes into BEM—let's break each one down using standard BEM best practices and common sense for maintainable code.

1. Is naming a full-page container just container compliant with BEM? #

Absolutely! In BEM, a Block is any independent, reusable component that serves a clear purpose—and a page-wide container fits this definition perfectly. The name container is concise, descriptive, and directly tells you what the component does (wrapping and organizing page content).

There’s no rule that Blocks have to be fancy UI components like your card example; BEM works just as well for layout-focused components. As long as this container can be reused across pages without relying on other components to function, container is a totally valid and compliant Block name.

2. Handling different container widths across pages: Separate Blocks or Modifiers? #

9 times out of 10, using a Modifier is the smarter choice—here’s why:

• If your login and home page containers share core base styles (like auto centering, padding, or box-sizing) and only differ in width, they’re variants of the same container Block. Modifiers exist specifically to describe these kinds of state or style variations.
• Creating separate Blocks like login-container and main-container ties the component to specific pages, which kills reusability. For example, if you later add a registration page that needs the same narrow width as the login page, you’d have to duplicate styles or create another redundant Block. Instead, a modifier like container--narrow can be reused across any page that needs that width.

Example Implementation #

Here’s how you’d adjust your code to use Modifiers:

<!-- Login page (narrow container variant) -->
<div class="container container--narrow">
  <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>

<!-- Home page (wide container variant) -->
<div class="container container--wide">
  <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>

In your CSS, you’d define base styles first, then override only the differing width for each modifier:

.container {
  margin: 0 auto;
  padding: 1.5rem;
  box-sizing: border-box;
  /* Other shared base styles */
}

.container--narrow {
  max-width: 420px;
}

.container--wide {
  max-width: 1280px;
}

The only time you’d use separate Blocks is if the two containers have zero shared styles (a rare edge case for page containers). Stick with Modifiers whenever possible to keep your code DRY and components flexible.

内容的提问来源于stack exchange，提问作者Mikuro