如何用BEM组织CSS？

Question

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

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

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



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


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


or

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


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


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



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

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。 ：）

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 { }
}

这种阅读，搜索，替换等操作比较困难。您可能会读它而不是写它，因此避免它是一个不错的选择。

这里有一个完整的优点/缺点：http://bradfrost.com/blog/post/sass-selectors-to-nest-or-not-to-nest/

您的编译文件的组织是什么？

我们通常每个网站仅提供CSS文件，以更好地利用浏览器缓存。因此，使用Sass编译时，您可以将所有文件分组。