CSS BEM 与包装器容器冲突

Question

<section id="about">
  <div class="wrapper">
    <div class="about__description">
      <h3>Lorem ipsum dolor sit amet, consectetur adipiscing</h3>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor.</p>
      <a class="btn btn-primary" href="">more</a>
    </div>
    <img class="about__img" src="<?php get_template_directory_uri() . '/img/grafika1.jpg' ?>" alt="O nas">
  </div>
</section>

我想在我的代码片段中应用 BEM。我希望我的内容在 .wrapper 到 display:flex 内。最好的方法是什么？将规则应用于 .wrapper 就像 display:flex 是最合适的方式吗？创建另一个 div class 是否更好，例如.about__container（但在这种情况下如何将 BEM 应用于整个组件？）

Answer 1

不要将 ID 用于 BEM 样式，使用 class class="about" 然后可能 class="about__container"（或 about__content）而不是 wrapper。如果它需要一些 javascript-东西的 ID，你可以给它一个 ID 和一个 class。但是不要在 BEM 语法中混用 ID 和 classes。

只使用通用的 class 像 "wrapper" 或 "container" 用于将在多个元素中重复使用的东西，具有宽度、最大宽度、填充等属性，或者可能字体样式。如果样式特定于 "about"-组件，请使用 about__container 或混合使用：<div class="about__container wrapper">

此外，删除 class="about__img">

中的 >

CSS BEM 与包装器容器冲突

CSS BEM conflict with wrapper container

html

css

bem