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

对于固定布局使用 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__text 的 BEM 修饰符

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

根据我的经验，我意识到为了灵活性和模块化，块不应该对其宽度或边距负责。在项目中拥有“弹性”块可以让它们四处走动 https://en.bem.info/methodology/key-concepts/#arbitrary-placement占据页面的不同区域（具有不同的大小）而不破坏功能或布局。至于边距，如果在较高级别上定义块之间的空间，则更容易保持块之间的空间一致：我假设像这样的模板块：t-news是（考虑到“t”代表模板）。

BEM 是关于模块化的，与特定块相关的每一段代码都保留在该块的文件夹中文件系统 https://en.bem.info/methodology/filesystem/#principles-of-file-system-organization-for-bem-projects，所以它应该与媒体查询没有什么不同，媒体查询只是 CSS 的一部分。重要的是要知道 CSS 正在做什么，例如：如果一组规则正在模板中定义区域和边距，无论是否需要媒体查询，这些规则都应该是该块的一部分负责这些定义。

这种方法可能会生成大量媒体查询，并且可能会担心渲染性能，但是，根据本文 https://helloanselm.com/2014/web-performance-one-or-thousand-media-queries/#a-look-into-the-source，多个媒体查询只有在以下情况下才可能影响性能：不同的来自彼此。重复相同的规则，例如@media (max-width: 850px)，将被序列化并解释为一个。

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

另外，我会重新考虑使用green and red作为修饰符，因为颜色在项目的生命周期中可能会发生变化。我建议尝试一些不描述元素外观的东西，比如correct and 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;
    }
}

希望这可以帮助。