# writehtmlcss

## 规则（Rules）

# 编写HTML+CSS - 规范

## 1. ID命名规范
- 全部小写，用下划线 `_` 拼接
- ✅ `id="header_nav"`、`id="submit_btn"`
- ❌ `id="HeaderNav"`、`id="headerNav"`

## 2. CSS class命名规范
- 全部小写
- 组件命名用下划线 `_` 拼接：`.btn`、`.card`、`.btn_icon`
- 状态/样式变体用连字符 `-` 拼接：`.btn_hover-info`、`.card_border-danger`
- 禁止驼峰

## 3. 代码分离原则
- HTML和CSS必须分离到独立文件
- 禁止将样式直接写在HTML中

## 4. 单位规范
- 尺寸值（padding、margin、font-size等）优先使用 `rem` 单位
- 边框宽度使用 `1px`
- rem值尽量使用 `0.25rem` 的倍数

## 5. 注释规范
CSS使用区块注释，HTML使用条件注释。

## 方法（Methods）

# 编写HTML+CSS - 方法

## 流程概览
```
分析需求 → 规划文件结构 → 编写HTML结构 → 编写CSS样式 → 实现响应式 → 验证完整性
```

## 步骤1：分析需求
分析UI设计规范或需求文档，确定页面结构、布局方式和配色方案。

## 步骤2：规划文件结构
确定页面数量，规划HTML和CSS文件结构。

## 步骤3：编写HTML结构
使用语义化标签（header、nav、main、section、footer）编写页面结构。

## 步骤4：编写CSS样式
按照设计规范的色彩体系、字体规范和间距规范编写样式。

## 步骤5：实现响应式设计
使用媒体查询适配不同屏幕尺寸。

## 步骤6：验证完整性
检查文件命名一致性、HTML标签闭合、CSS样式覆盖完整性。

## 技巧（Tips）

# 编写HTML+CSS - 技巧

## 1. 移动端优先
先设计移动端布局，再通过媒体查询适配桌面端，代码更简洁。

## 2. CSS变量
使用CSS自定义属性（变量）管理颜色、字体等全局样式，便于维护。

## 3. Flexbox布局
优先使用Flexbox实现布局，代码简洁且兼容性好。

## 4. 渐进增强
先保证基础功能在所有浏览器可用，再为高级浏览器添加增强效果。