如何用 BEM 组织 CSS？答案

【问题标题】：How to Organize CSS with BEM?如何用 BEM 组织 CSS？
【发布时间】：2019-08-04 19:30:08
【问题描述】：

我刚刚了解了 BEM，我想用它来组织我的 CSS。如何使用 BEM 组织我的 CSS？ BEM 网站没有告诉你如何用 BEM 组织你的 CSS。该网站只是告诉您如何命名您的块、元素和修饰符。

另外，我应该为每个网页使用不同的样式表，还是应该使用 SASS 并将我的所有 scss.files 合并到一个 CSS 文件中？

/********************************
BLOCKS 
********************************/



/********************************
ELEMENTS
********************************/


/********************************
MODIFIERS
********************************/


or

/********************************
HEADER
********************************/


/********************************
MAIN SECTION 
********************************/


/********************************
FOOTER
********************************/



/********************************
MEDIA QUERIES
********************************/

【问题讨论】：

我会说两者都用。但老实说，做任何对你有意义的事情，你的想法都是正确的。以你想要的方式工作。不要太挂在它上面。只要您决定每个部分负责什么，您就会保持结构相当干净。关于 SCSS，是的，使用它，它有助于保持分离，预处理器提供了其他方法来清理代码。
@Sarcoma 好的，谢谢你的建议！
如果您还没有，我建议您查看 ITCSS。在组织样式方面，它几乎解决了我所有的问题。这里只是一篇文章xfive.co/blog/itcss-scalable-maintainable-css-architecture

标签： css bem

【解决方案1】：

尝试不同的方法，并使用最适合您的方法。不要害怕尝试。如果您已经对 SASS 感到满意，并且想要一些灵感，那么这是我通常的策略：

/* file: _block-name.scss */

.block { // selector for the block

  font-size: 12px; // example property

  &__element { // nested selector, equivalent to: 'block__element'

    background-color: white; // example property

    &--modifier { // nested selector, equivalent to: 'block__element--modifier'

      border: 2px solid red; // example property

    }

  }

}

每个块级元素都有自己的文件作为 .scss 部分。嵌套选择器（由 SASS 提供）用于定位该块的所有元素和修饰符。

这种方法非常适合 React 等基于组件的框架（其中每个组件都分配有自己的 BEM 块级选择器），但它也可以独立工作。

如果您在您选择的搜索引擎中查找 BEM SASS，您会发现许多其他（完全有效的）方法来使用 BEM 组织您的 CSS。 :)

【讨论】：

【解决方案2】：

这是个好问题！

您的文件采用什么组织方式？

我们过去使用 BEM 时每个块只有一个文件。这很重要，原因有两个：

当您看到一个类时，您已经知道它在哪个文件中
明确表明选择器有两个不同的块是错误的，因为您不知道将其放置在哪里

您的选择器采用什么组织方式？

我建议您从顶部（块）到底部（元素），并在每个块/元素之后直接放置替代样式（修饰符、媒体查询）。所以：

/* Footer.css */
/* Block */
.footer { }

/* Block modifiers */
.footer--dark { }

/* Block media-queries */
@media (max-width: 480px) {
    .footer { }
    .footer--dark { }
}

/* One element */
.footer__logo { }

/* One element modifiers */
.footer--dark .footer__logo { }

/* One element media-queries */
@media (max-width: 480px) {
    .footer__logo { }
    .footer--dark .footer__logo { }
}

/* another element */
/* ... */

我应该使用 Sass 嵌套吗？

小心 Sass 叠置，其中一个答案建议您像这样嵌套选择器：

.footer {
    &--dark { }
}

它有点难以阅读、搜索、替换等。你可能会读它的次数比你写它的次数多，所以避免它可能是一个不错的选择。

这是 sass 嵌套的完整优点/缺点：http://bradfrost.com/blog/post/sass-selectors-to-nest-or-not-to-nest/

您的编译文件采用什么组织方式？

我们通常只为每个网站提供 CSS 文件，这样可以更好地利用浏览器缓存。因此，您可以在使用 Sass 编译时对所有文件进行分组。

【讨论】：