如何用BEM组织CSS？

Question

我刚学习了BEM，想用它来组织我的CSS。如何使用BEM来组织我的CSS？ BEM网站并没有告诉你如何使用BEM来组织你的CSS；网站只是告诉你如何命名块（BLOCKS），元素（ELEMENTS）和修饰符（MODIFIERS）。

Also, should I use a different style sheet per web page, or should I use SASS and merge all my scss.files into one CSS file?

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



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


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


or

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


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


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



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

- Muhammad

---

我会建议你两者都用。但是老实说，做对自己有意义的事情，你已经往正确的方向思考了。按照自己的方式工作。不要过于纠结。只要你决定了每个部分的职责，就能保持代码结构相对清晰。关于 SCSS，是的，使用它可以帮助你保持分离，预处理器还提供了其他清理代码的方式。 - OrderAndChaos

@Sarcoma 好的，谢谢你的建议！ - Muhammad

如果你还没有了解ITCSS，我建议你去看一下。当涉及到组织样式时，它几乎解决了我所有的问题。这里有一篇文章供你参考：https://www.xfive.co/blog/itcss-scalable-maintainable-css-architecture/ - Ingvi Jónasson

Answer 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 的方法。 :)

- A. Lamansky

Answer 2

最初的回答：

这是一个好问题！

如何组织文件？

我们以前使用BEM的每个块一个文件的方式。这有两个重要原因：

1. 当你看到一个类时，你已经知道它在哪个文件中。
2. 它明确了如果选择器包含两个不同的块是错误的，因为你不知道在哪里放置它。

如何组织选择器？

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

/* 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时将所有文件分组。

- tzi