SCSS:Bem 和推荐的目录结构?
SCSS: Bem and recommended directory structure?
我已经开始将我的样式更新到 BEM。到目前为止我很喜欢它,但是我在将 scss 分离到正确的目录结构中时遇到了问题。 BEM 负责我的 类 的命名约定,但我想尝试了解我存储 scss 的原因的一些顺序。
我考虑了两件事,目录结构可以由组件分隔,但考虑到块级元素和组件之间没有一对一的映射,这可能不太适合 BEM。
我想会有某种结构来存储 _base、_variables 等?
我建议将组件文件并排放置,像这样;
├── src
| ├── _modules
| | └── link
| | ├── __tests__
| | | └── link.spec.js
| | ├── link.html
| | ├── link.js
| | └── link.scss
这非常符合 BEM 的思维方式。我认为您所说的 1 对 1 映射是 BEM 中的概念,您不应该尝试在 CSS 中复制 DOM。任何不属于组件文件夹的东西都可以存在于 "core" 组件中。
有一个名为 Yeogurt https://github.com/larsonjj/generator-yeogurt 的非常好的 Yeoman 生成器可以为您构建这种类型的结构(以及其他一些东西)。
我已经开始将我的样式更新到 BEM。到目前为止我很喜欢它,但是我在将 scss 分离到正确的目录结构中时遇到了问题。 BEM 负责我的 类 的命名约定,但我想尝试了解我存储 scss 的原因的一些顺序。
我考虑了两件事,目录结构可以由组件分隔,但考虑到块级元素和组件之间没有一对一的映射,这可能不太适合 BEM。
我想会有某种结构来存储 _base、_variables 等?
我建议将组件文件并排放置,像这样;
├── src
| ├── _modules
| | └── link
| | ├── __tests__
| | | └── link.spec.js
| | ├── link.html
| | ├── link.js
| | └── link.scss
这非常符合 BEM 的思维方式。我认为您所说的 1 对 1 映射是 BEM 中的概念,您不应该尝试在 CSS 中复制 DOM。任何不属于组件文件夹的东西都可以存在于 "core" 组件中。
有一个名为 Yeogurt https://github.com/larsonjj/generator-yeogurt 的非常好的 Yeoman 生成器可以为您构建这种类型的结构(以及其他一些东西)。