如何使用BEM方法为自适应网页构造CSS？

根据我的经验，我意识到为了灵活性和模块化，块不应对块的宽度或边距负责。在项目中使用“弹性”块可以使它们移动，以占据页面的不同区域（具有不同的大小），而不会破坏功能或布局。至于边距，如果在更高级别上定义块之间，则更容易在块之间保持一致的空间：我认为t-news是一个模板块（考虑“ t”代表模板）。

BEM完全是关于模块化的，与特定块相关的每段代码都保留在文件系统中该块的文件夹中，因此对于媒体查询来说，它应该没有什么不同，它们只是CSS的一部分。重要的是要知道CSS的功能，例如：如果一组规则定义了模板中的区域和边距，则是否需要媒体查询，这些规则应该成为对这些定义负责。

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

这样，与面积和边距相关的媒体查询将进入模板块，而与组件本身相关的其他媒体查询将进入组件块。由于模板负责尺寸，因此在您的示例中，我将“ small”修饰符更改为模板块。

另外，我会重新考虑使用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;
    }
}

希望这可以帮助。