BEM

BEM​ 是一种CSS命名方法论，是 Block（块）、Element（元素）、Modifier（修饰符）​ 的缩写。它是解决 CSS 中样式冲突、可维护性和可扩展性问题的经典方案，与 SCSS 结合使用时非常强大。

BEM 的核心概念：

• Block（块）
  • 一个独立、有意义的可复用组件
  • 例如：header、menu、search-form
  • 命名规则：有意义的单词，如 .block
• Element（元素）
  • 块的组成部分，不能脱离块单独使用
  • 例如：menu块中的 item、search-form块中的 input
  • 命名规则：block__element（双下划线连接）
• Modifier（修饰符）
  • 表示块或元素的状态、样式变体
  • 例如：button的 disabled状态、menu的 size_large
  • 命名规则：block–modifier或 block__element–modifier（双连字符连接）

SCSS: CSS 的超集

在 2024 年及以后，当人们说 “Sass” 时，他们 99% 指的是 SCSS 语法。​ 在简历、技术讨论、项目配置中，说 “我会 Sass/SCSS” 是同一回事。

概念：

• Sass​ 是Syntactically Awesome Style Sheets 预处理器的缩写
• SCSS​ 是Sass​的主流语法（用 .scss文件）
• SASS​ 是Sass​的另一种语法（用 .sass文件），已经过时
• 无论是 SASS 还是 SCSS，安装的都是同一个包： npm install sass

SCSS和SASS的区别：

• 语法风格​:
  • SCSS: CSS 兼容
  • SASS: 缩进敏感
• 花括号:
  • SCSS: 使用
  • SASS: 不使用
• 分号:
  • SCSS: 使用
  • SASS: 不使用
• CSS 兼容性:
  • SCSS: 兼容
  • SASS: 不兼容

上一篇 « 下一篇 »