标签: bem

假设我必须在BEM中定义一个标题块.标题需要一些缩进(填充,边距),但是通常的理解是布局应该与组件分开.

问题是,我应该将缩进指定为标题块CSS的一部分,还是仅应由周围的块(布局块或网格)提供？两种方法都有其缺点和优点.

我有以下BEM样式Css来定义一个简单的框:

.box { /*styles */ }
.box__heading {/*styles */}
.box__image { /*styles */}

我还需要能够在错误模式下显示该框,因此定义了以下修饰符:

.box--error {/*styles */}

我遇到的问题是找到一种很好的方法来定义嵌套元素的样式,例如当框处于错误模式时的box__heading.

我还在标题和父级上定义修饰符:

 <div class="box box--error">
   <h2 class="box__heading box__heading--error"></h2>
 </div>

或者我只是在css中这样做:

.box--error {}
.box--error .box__heading { /* error styles*/ }

我正在尝试使用 BEM 命名约定，但在决定在哪里包含特定页面的修饰符时遇到了一些困难。

例如，假设我有一个橙色按钮：

<button class="btn btn-orange">Button A</button>

我的项目有 3 个不同的页面：

 - pageA.html - pageA.scss
 - pageB.html - pageB.scss
 - pageC.html - pageC.scss

pageB.html按钮上应该有一个margin-top:30px. 这样写修饰符是否正确：

.btn {
  padding: 5px 20px;
  background: orange;
  margin: 0

  &--margin-top {
    margin-top: 30px;
  }
}

仅为特定页面包含这样的修饰符的最佳方法是什么？在这种情况下，这将是为pageB.html. 我应该在pageB.scssor中包含该修饰符.buttons.scss吗？

我无法理解使用 BEM --modifier css 命名约定的优势。谁能告诉我这是为什么：

.my-element--checked {
    color: green;
}

比这个更好？

.my-element.checked {
    color: green;
}

使用 BEM --modifier 时，标记显然更加臃肿。

将 BEM 用于固定布局很容易。带有媒体查询的自适应网页的 css 样式结构是什么？

html示例：

<div class="t-news">
    <div class="t-news__post b-post">
        <div class="b-post__title"></div>
        <div class="b-post__text--green"></div>
    </div>
    <div class="t-news__post b-post--small">
        <div class="b-post__title"></div>
        <div class="b-post__text--red"></div>
    </div>
</div>

少样本：

.t-news {
     &__post {
         //some styles
     }
}
.b-post {
     &__title {
         //some styles
     }
     &__text {
         //some styles

         &--red {
              //some styles
         }
         &--green {
              //some styles
         }
     }

     &--small {
         //some styles
     }
}

• .t-news - 页面模板。它是一个定义块内部位置的块。
• .b-post - BEM 块
• .b-post__title - b-post 的 BEM 元素
• .b-post__text--red - b-post 的 b-post__text …

假设我使用BEM和SCSS为通用列表组件提供以下CSS:

.list {
  &__item {
    &:not(:last-child) {
      margin-right: .3em;
    }
  }
}

我想添加一个可以使列表垂直的修饰符,如下所示:

.list--vertical {
  display: flex;
  flex-direction: column;
}

当我考虑list__item元素的余量时,我的问题出现了.对于垂直列表,我希望我的边距位于底部,而不是每个项目的右边.如果我正确理解BEM,我无法根据列表的修饰符修改list__item的样式,这是正确的吗？

更确切地说,这就是我想要做的:

.list--vertical {
  display: flex;
  flex-direction: column;

  .list__item {
    &:not(:last-child) {
      margin-bottom: .3em;
      margin-right: 0;
    }
  }
}

使用BEM处理此问题的可接受方法是什么？list__item的另一个修饰符处理边距？另一块完全用于垂直列表？

我正在慢慢地重构一个基于Angular / Bootstrap的相当大的项目，该项目具有超过16,000行CSS。好极了！

我一直在越来越多地关注BEM，并相信这将是实现这一目标的好方法。我们很有可能会迁移到React，这我还不太了解，但是在我看来，React和BEM的模块化都可以很好地融合在一起。

现在，我在CSS寻找纯粹，并想知道怎样才能与布局和表象的类，我们从引导（如使用BEM相结合的研究方法.container，.row，.col-m-12等）。

我知道使用这些布局类的样式@extend或@include将这些样式类的样式添加到块或模块的实践，但是我个人认为这不是一个好方法。这种做法使得仅通过查看html就无法判断发生了什么，并且很难维护/调试/重构。

仅执行以下操作有什么问题吗？

<div class="nav container">
   <div class="row">
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2">…</div>
      <div class="nav__item col-sm-2 col-sm-offset-2">…</div>
   </div>
</div>

我正在使用 BEM Scss 请解释如何在第 n 个子元素中进行选择。

我尝试了以下格式，但它对我不起作用

<div class="bookearly-container" >
    <div class="row bookearly-container__row">
        <div class="col-xs-12 col-md-4 bookearly-container__col">
            <div class="bookearly-container__discountcontainer">
            </div>
            <div class="bookearly-container__discountcontainer">
            </div>
            <div class="bookearly-container__discountcontainer">
            </div>
        </div>
    </div>
</div>

我的 BEM Scss 我添加了 nth-child 第三个元素子元素，但该元素不起作用：

.bookearly-container {
    &__row {
        margin-bottom: 4.6rem;
        & > :nth-child(3) {
            &__discountcontainer {  -- this element not selected
                &:before {
                    display: none;
                }
            }
        }
    }
}

能解释一下如何选择吗？提前致谢。

是否可以像这样向 BEM 中的元素添加多个修饰符：

my-item__icon--open--not-red

正如你可以看到我添加--open和--not红到我-item__icon。这个可以吗？有没有更好的方法来实现相同的目标？

假设我有这样的结构：

<article class="product">\n  <header class="product__header">\n    <h1 class="product__headline">Headline</h1>\n    <img class="product__hero" src="" alt="">\n  </header>\n\n  <p class="product__description">Content</p>\n</article>\n

由于 Block 元素article默认带来了它所需的所有样式，因此它实际上没有任何 CSS。所以我不会像这样在 CSS 中定义它，因为它只会使样式变得混乱：

.product { }\n

但我不确定 HTML 的情况。应该是

<article class="product"></article>\n

\xe2\x80\xa6 无论如何或简单地 \xe2\x80\xa6

<article></article>\n

\xe2\x80\xa6 因为没有附加样式？

使用 BEM 时正确的做法是什么？