css - SCSS : Bem and recommended directory structure?

标签 css sass bem

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

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

我假设会有某种结构用于存储 _base、_variables 等?

最佳答案

我建议将组件文件并排放置,就像这样;

├── 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为您构建这种类型的结构(以及其他一些东西)。

关于css - SCSS : Bem and recommended directory structure?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44171501/

相关文章:

html - 文本退出 div 并更改另一个 div 的大小

css - 正确定位绝对定位元素的工具提示

html - 重叠/粘贴背景图像以重叠 div 的边框

css - 如何使用 BEM 正确设置元素的范围?

sass - BEM & Sass - 如何处理基本的全局 "style guide"类型规则?

css - 使用 CSS 创建对 Angular 线/部分/边框

javascript - 使用 JavaScript 更改一组元素的样式

css - 来自 Github 页面的错误 “The file ` css/main.scss` 包含语法错误”,默认安装

css - 如何快速从整个文件中删除所有供应商前缀?

CSS BEM - 通用类的约定