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

我应该将媒体查询放在我的块内外吗？

Answer 1

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

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

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

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

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

希望这有帮助。

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

1 个答案: