html - 如何使用 BEM 方法为自适应网页构建 css？

Question

将 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 - 页面模板。它是一个 block ，用于定义内部 block 的位置。
• .b-post - BEM block
• .b-post__title - b-post 的 BEM 元素
• .b-post__text--red - b-post 的 b-post__text 的 BEM 修饰符

我应该将媒体查询放在 block 内还是 block 外？

Answer 1

根据我的经验，我意识到为了灵 active 和模块化， block 不应该对其宽度或边距负责。在元素中使用“flex ” block 可以使它们成为 moved around在不破坏功能或布局的情况下占据页面的不同区域(具有不同大小)。至于边距，如果在更高级别上定义它们，则更容易在 block 之间保持一致的空间:模板 block ，我假设，t-news 是(考虑到“t”是为了模板)。

BEM 完全是关于模块化的，与特定 block 相关的每一段代码都保留在 block 的文件夹中 file system ，所以它不应该与媒体查询不同，媒体查询只是 CSS 的一部分。重要的是要知道 CSS 在做什么，例如:如果一组规则在模板中定义区域和边距，无论是否需要媒体查询，这些规则都应该是 block 的一部分负责这些定义。

这种方法可能会生成大量媒体查询，并且可能会影响渲染性能，但是，根据 this article ，只有当它们彼此不同时，多个媒体查询才可能影响性能。相同规则的重复，如 @media (max-width: 850px)，将被序列化并解释为一个。

这样，与区域和边距相关的媒体查询进入模板 block ，而与组件本身相关的其他媒体查询进入组件 block 。由于模板负责大小，因此我会将您示例中的“小”修饰符更改为模板 block 。

此外，我会重新考虑使用 green 和 red 作为修饰符，因为颜色可能会在元素的生命周期中发生变化。我建议尝试一些不描述元素外观的东西，比如 correct 和 alert。

最后，请记住修饰符应该跟在 HTML 中的元素类之后，例如 b-post__text b-post__text--alert。

这是您更新后的代码:

HTML:

<div class="t-news">
    <div class="t-news__post b-post">
        <div class="b-post__title">Title 1</div>
        <div class="b-post__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
    </div>
    <div class="t-news__post b-post">
        <div class="b-post__title">Title 2</div>
        <div class="b-post__text b-post__text--correct">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eget ligula eu lectus lobortis condimentum. Aliquam nonummy auctor massa. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at risus. Quisque purus magna, auctor et, sagittis ac, posuere eu, lectus. Nam mattis, felis ut adipiscing.</div>
    </div>
    <div class="t-news__post t-news__post--small b-post">
        <div class="b-post__title">Title 3</div>
        <div class="b-post__text">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
    <div class="t-news__post t-news__post--small b-post">
        <div class="b-post__title">Title 4</div>
        <div class="b-post__text b-post__text--alert">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
    </div>
</div>

Scss:

.t-news {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    margin: -0.5rem;

    &__post {
        margin: 0.5rem;
        width: calc(50% - 1rem);
        @media (max-width: 800px) { width: calc(100% - 1rem); }

        &--small {
            width: calc(25% - 1rem);
            @media (max-width: 800px) { width: calc(50% - 1rem); }
        }
    }
}

.b-post {
    box-sizing: border-box;
    border: 1px solid #eeb;
    background: #ffc;
    padding: 0.5rem;

    &__title {
        font-size: 1.5rem;
        @media (max-width: 800px) { font-size: 1.25rem; }
    }

    &__text {
        font-size: 1rem;

        &--correct {
            color: green;
        }

        &--alert {
            color: red;
        }
    }

    &--small {
        border: none;
        font-style: italic;
    }
}

希望这对您有所帮助。