样式开发规范

日常开发中在处理样式时大概有以下六种场景，推荐的开发方式是

• 原子样式 + style 作基本开发
• 需要特殊定义的，如 :hover、:before 等在 <style lang="scss" scoped> 中定义

注意

• 页面或组件 style 标签下开发样式，必须加 scoped！！！
• 除了原子样式和 SCSS 变量，不推荐自己定义通用样式

内嵌样式 scoped

样式穿透

在 scoped 下有时需要覆盖修改第三方组件的样式，这是需要使用“样式穿透”

Css

.a >>> .b {
	/* ... */
}

Scss （或 less、sass）

有两种写法，推荐第一种

::v-deep .a { ✅
  /* ... */
}

/deep/ .a { 
	/* ... */
}

内嵌样式无 scoped 🈲️

禁止！！！

功能模块目录下的样式文件

• 最外面加 class 包裹全部样式
• 最外层 class 要求意义明确、易区分，如审批功能的 approval-wrapper

Style 目录下的样式文件

• 如果用于功能模块，要求相同
• 如果是通用样式，注意样式冲突
• 原则上不推荐自定义通用样式

直接使用 style=""

• VSCode 好像没提示

使用原子样式

• 统一定义在 styles/atom.scss 文件内
• 定义不多，都要记住

 

 

若有收获，就点个赞吧