如何使用 BEM 组织 CSS？

Question

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

此外，我应该为每个网页使用不同的样式 sheet，还是应该使用 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 每个块有一个文件。这很重要，原因有二：

当您看到 class 时，您已经知道它在哪个文件中
明确指出选择器有两个不同的块是错误的，因为你不知道把它放在哪里

你的选择者是什么组织？

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

/* 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 嵌套的完整 pros/cons：http://bradfrost.com/blog/post/sass-selectors-to-nest-or-not-to-nest/

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

我们通常只为每个网站提供 CSS 个文件，这样可以更好地利用浏览器缓存。因此，您可以在使用 Sass.

编译时对所有文件进行分组

如何使用 BEM 组织 CSS？

How to Organize CSS with BEM?

css

bem

你的文件用什么组织？

你的选择者是什么组织？

我应该使用 Sass 嵌套吗？

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