📄 本页由源文件 rules/CSS_官方规范.mdc 自动投影生成（单一权威源）。请勿直接编辑本页。

CSS_官方规范

你是一个专业的CSS开发助手，所有代码必须严格遵循以下编码规范。

基础规范

注意：如果没有明确说明，需要遵循 Airbnb CSS编码规范。

规范等级说明

【必须】 级别要求必须严格按照规范编码，否则在代码扫描和自动化构建中报错
【推荐】 级别希望尽量按照规范编写，特殊情况可以不采用
【可选】 级别不强制要求，但建议参考规范编写

CSS格式规范

缩进和空格

【必须】 使用2个空格作为缩进，不使用tab
【必须】 在规则声明的左大括号 { 前加上一个空格
【必须】 在属性的冒号 : 后面加上一个空格，前面不加空格
【必须】 规则声明的右大括号 } 独占一行

选择器规范

【推荐】 类名使用破折号代替驼峰法，推荐使用BEM方式命名
- 块（block）：.listing-card
- 元素（element）：.listing-card__title
- 修饰符（modifier）：.listing-card--featured
【必须】 不要使用ID选择器，使用class选择器代替
【必须】 多个选择器时，每个选择器独占一行

属性规范

【推荐】 颜色值用小写，能用3位表示的推荐用3位：#fff 而不是 #ffffff
【必须】 不要使用 !important
【必须】 定义无边框样式时，使用 0 代替 none
【必须】 禁止小于1的小数前加0：使用 .5 而不是 0.5
【必须】 字符串使用单引号：content: 'x' 而不是 content: "x"
【必须】 单行属性声明块中只允许声明一个属性

状态和伪元素

【推荐】 before、after、active、focus等状态只使用一个 :
- 使用 &:before 而不是 &::before
- 使用 &:active 而不是 &::active

浏览器前缀

【推荐】 样式中不要添加浏览器前缀，由编译工具自动添加

嵌套深度

【推荐】 最大嵌套深度为10层

注释规范

注释格式

【推荐】 建议使用行注释 (在 Sass 中是 //) 代替块注释
【推荐】 非首行注释，需要在注释前空行

注释内容

【推荐】 给需要注释的代码写上详细说明：
- 为什么用到了 z-index
- 兼容性处理或针对特定浏览器的hack
【推荐】 在HTML上说明加上某个类的作用

JavaScript钩子

【推荐】 避免在CSS和JavaScript中绑定相同的类
【推荐】 为JavaScript专用的类名添加 js- 前缀

Sass规范

语法要求

【必须】 使用 .scss 语法，不使用 .sass 原本语法
【推荐】 不要嵌套ID选择器

属性声明排序

【必须】 按以下顺序排列：
1. 属性声明（除去 @include 和嵌套选择器）
2. @include 声明
3. 嵌套选择器

变量命名

【必须】 变量名使用破折号：$my-variable
【推荐】 仅用于当前文件的变量可添加下划线前缀：$_my-variable

@import语句

【推荐】 @import语句引用文件必须写在引号内，.scss后缀不得省略，使用双引号

Mixins规范

【推荐】 使用mixin遵循DRY原则
【推荐】 Mixin和括号之间不得包含空格
【推荐】 参数分隔符后保留一个空格

扩展指令

【推荐】 避免使用 @extend 指令，因为它并不直观，而且具有潜在风险，特别是用在嵌套选择器的时候，建议用mixin代替

Sass变量和占位符

【推荐】 指定sass变量指定模式
【推荐】 禁止在@extend后缺失占位符，使用 %placeholder 而不是 .some-class

Less规范

代码组织

【推荐】 按以下顺序组织代码：
1. import
2. 变量声明
3. 样式声明

@import语句

【推荐】 引用文件必须写在引号内，.less后缀不得省略，使用双引号

变量命名

【必须】 变量名使用破折号：@my-variable
【推荐】 仅用于当前文件的变量可添加下划线前缀：@_my-variable

运算规范

【推荐】 +, -, *, / 四个运算符两侧保留一个空格
【推荐】 +, - 两侧操作数使用相同单位

Mixins规范

【推荐】 Mixin和括号之间不得包含空格，参数分隔符后保留空格
【推荐】 定义mixin时，如果不是className，加上括号
【推荐】 调用不输出内容的mixin时，添加括号以区分className

继承规范

【推荐】 使用继承时，:extend 语句写在声明块开头

工具配置建议

推荐使用 Prettier 美化器自动格式化代码
推荐使用 stylelint 进行代码检查
推荐使用编译工具自动添加浏览器前缀