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

Question

我已开始将我的造型方面更新到BEM。到目前为止，我很喜欢它，但我有一个问题，将scss分成正确的目录结构。 BEM负责我的课程的命名约定，但我想尝试一下我存储scss的原因。

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

我认为存在某种用于存储_base，_variables等的结构？

Answer 1

我建议您将组件文件放在彼此旁边，就像这样;

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

哪种方式与BEM思维方式非常吻合。我认为你在谈论的第1对1映射是BEM中的概念，你不应该尝试在CSS中复制DOM。任何不属于组件文件夹的东西都可以存在于＆＃34;核心＆＃34;零件。

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