待完善
bem 实现
https://juejin.cn/post/6844903492016947207
https://athena0304.cn/element-analysis/packages/theme-chalk/src/mixins/mixins.html#mixin-scss
https://www.geekschool.org/2021/01/08/47568.html

https://jiandanxinli.github.io/2016-08-11.html

BEM 命名

  • block : 模块，名字单词间用 - 连接
  • element : 元素，模块的子元素，以 _ _ 与block连接
  • modifier: 修饰，模块的变体，定义特殊模块，以 -- 与block连接 ```javascript .user-home-nav .user-home-nav-item.user-home-nav-item—small .user-home-nav-itemicon .user-home-nav-itemtext

.user-home-nav

&-item

  1. &--small
  3. &__icon
  5. &__text

```

BEM + 命名空间

常见命名空间：

  • o-：表示一个对象（Object），如 .o-layout。
  • c-：表示一个组件（Component），指一个具体的、特定实现的 UI。如 .c-avatar。
  • u-：表示一个通用工具（Utility），如 .u-hidden。
  • t-：表示一个主题（Theme），如 .t-light。
  • s-：表示一个上下文或作用域（Scope），如 .s-cms-content。
  • is-，has-：表示一种状态或条件样式。如 .is-active
  • _：表示一个 hack，如 ._important。
  • js-：表示一个 JavaScript 钩子。如 .js-modal。
  • qa-：表示测试钩子。