---
globs: ["**/*.css", "**/*.scss", "**/*.less", "**/*.html", "**/*.htm"]
---
# CSS 与 HTML 编码规范
---
## CSS 规范
### 文件与缩进
- CSS 文件使用无 BOM 的 UTF-8 编码
- 使用 4 个空格缩进，禁止使用 2 空格或 Tab
- 每行不超过 120 个字符
### 空格
- 选择器与 `{` 之间必须有空格
- 属性名与 `:` 之间不允许有空格，`:` 与属性值之间必须有空格
- 列表型属性值单行书写时 `,` 后必须有空格
- `>`、`+`、`~` 选择器两边各保留一个空格
- 行尾不得有多余空格
### 选择器
- 多个选择器时每个声明独占一行
- 属性选择器中的值必须用双引号包围
- 禁止为 id、class 选择器添加类型选择器限定（如 `div.error`）
- 选择器嵌套层级不超过 3 级
### 属性
- 属性定义必须另起一行，禁止单行多属性
- 属性定义后必须以分号结尾
- 规则之间放置一个空行
### 属性书写顺序
1. **布局**：position / top / right / bottom / left / float / display / overflow
2. **盒模型**：border / margin / padding / width / height
3. **文本**：font / line-height / text-align / word-wrap
4. **视觉**：background / color / transition / list-style
- 如包含 `content` 属性，放在最前面
### 类名
- 类名全小写，单词间用 `-` 分隔
- 类名尽可能简短且有语义
- 禁止使用与 HTML 标签相同的 class 名（如 `.footer`）
- 代表内容或功能，禁止以样式信息命名（如 `.left`）
### 值与单位
- 文本内容使用双引号包围
- 0-1 之间的小数省略整数部分的 0，如 `opacity: .8`
- 长度为 0 时省略单位，如 `width: 0`
- `url()` 中路径不加引号
- RGB 颜色使用十六进制 `#rrggbb`，可缩写时必须缩写（`#aaccaa` → `#aca`）
- 颜色值禁止使用命名色值（如 `red`），英文字符采用小写
- 2D 位置必须同时给出水平和垂直方向值
- 属性缩写能用则用，但注意隐含值的影响
### 文本排版
- `font-family` 西文在前、中文在后，末尾指定通用字体族（`sans-serif`）
- 同项目中相同 `font-family` 名称大小写保持一致
- Windows 平台中文字号不小于 `12px`
- `font-weight` 使用数值（400/700），禁止 `bold/normal`
- `line-height` 在文本段落中使用纯数值
### 动画与响应式
- `transition` 必须指定 `transition-property`
- Media Query 必须与相关规则一起定义，禁止单独编排
### 兼容性
- 带私有前缀的属性由长到短排列，标准属性放最后，按冒号对齐
### 其他
- 清除浮动使用伪类 clearfix 或触发 BFC，禁止增加空标签
- 尽量不使用 `!important`
- `z-index` 分层管理，每层预留 100 个值
---
## HTML 规范
### 文档结构
- 使用 HTML5 doctype：``
- 在 `` 标签上设置 `lang="zh-CN"`
- 启用 IE Edge 模式：``
- `` 第一个子元素为 ``
- `` 必须在 charset 声明之后
- 页面必须包含 `<title>` 标签
- 保证 favicon 可访问
- 移动端页面必须指定 viewport
### 缩进与格式
- 使用 4 个空格缩进
- 每行不超过 120 个字符
- 删除尾部空格
- 嵌入资源使用 HTTPS 或 HTTP，禁止省略协议
### 标签
- 标签和属性名全小写
- 无需自闭合的标签禁止自闭合（`<input>` 而非 `<input />`）
- 禁止省略闭合标签（`<li>first</li>` 而非 `<li>first`）
- 遵循语义化：标题用 `<h1>`-`<h6>`，段落用 `<p>`，链接用 `<a>`
- 标签嵌套必须符合 HTML DTD 规则（如 `<div>` 不得置于 `<p>` 中）
- 禁止使用表格进行布局（CSS 可实现时）
- 标签使用尽量简洁，减少不必要的嵌套
### 属性
- 属性名全小写
- 属性值必须用双引号包围
- 布尔类型属性不添加属性值（如 `disabled` 而非 `disabled="true"`）
- 自定义属性使用 `data-` 前缀
- 元素 id 必须页面唯一，id 和 name 使用不同命名法避免冲突
- id/class 命名全小写，单词间 `-` 分隔
### CSS 与 JS 引入
- 引入 CSS 必须指明 `rel="stylesheet"`
- 引入 CSS 和 JS 无需指明 `type` 属性
- 结构（HTML）、样式（CSS）、行为（JS）严格分离
### 图片
- `<img>` 的 `src` 禁止为空
- 重要图片必须添加 `alt` 属性
- 添加 `width` 和 `height` 避免页面抖动
- 禁止添加不必要的 `title` 属性
- 有下载需求的图片用 `<img>`，纯装饰图片用 CSS 背景
### 表单
- 有文本标题的控件必须使用 `<label>` 标签关联
- `<button>` 必须指明 `type` 属性（`submit` 或 `button`）
- 尽量不使用按钮的 `name` 属性
### 常见错误模式
- ❌ `<A HREF="/">Home</A>` → ✅ `<a href="/">Home</a>`（全小写）
- ❌ `<input type="text" />` → ✅ `<input type="text">`（禁止自闭合）
- ❌ `.selector { margin: 0; padding: 0; }` → ✅ 每个属性独占一行
- ❌ `color: red;` → ✅ `color: #f00;`（禁止命名色值）
- ❌ `width: 0px;` → ✅ `width: 0;`（长度为 0 省略单位）