SCSS：Bem 和推荐的目录结构？

Question

我已经开始将我的样式更新为 BEM。到目前为止，我很喜欢它，但是我在将 scss 分成正确的目录结构时遇到了问题。 BEM 负责我的类的命名约定，但我想尝试了解我存储 scss 的原因。

我考虑了两件事，目录结构可以由组件分隔，但考虑到块级元素和组件之间没有一对一的映射，这可能不适合 BEM。

我想会有某种结构来存储_base、_variables等？

Answer 1

我建议你的组件文件并排放置，像这样；

├── src
|   ├── _modules              
|   |   └── link
|   |       ├── __tests__
|   |       |   └── link.spec.js
|   |       ├── link.html
|   |       ├── link.js
|   |       └── link.scss

这非常符合 BEM 的思维方式。我认为您所说的没有 1 到 1 的映射是 BEM 中的概念，您不应该尝试在 CSS 中复制 DOM。任何不属于组件文件夹的东西都可以存在于“核心”组件中。

有一个非常好的 Yeoman 生成器，名为 Yeogurt https://github.com/larsonjj/generator-yeogurt，它可以为您构建这种类型的结构（以及一堆其他东西）。