如何将HTML内联与外部样式进行高效格式化？

：为何要把 HTML 的内联与外部样式“穿得整齐”

在前端开发中，样式就像是页面的衣服。内联样式是直接套在单个元素身上的“短袖”，而外部样式表则是为整套页面量身定制的“正装”。如果这两种“衣服”随意搭配、缺乏规范。最常见的痛点就会出现：

• 代码可读性差，后期维护像找针一样费劲。
• 样式优先级冲突导致页面布局失效。老实说，
• 响应式需求无法实现。媒体查询对内联样式毫无作用。怎么说呢，
• 团队协作时难以统一命名规范。容易出现重复或冲突的类名。

下面通过一套高效的格式化方案，帮助你把这些“乱穿衣”的问题一次性解决。

一、外部样式表的格式化要点

1️⃣ 文件结构与注释

2️⃣ 命名规范

• 使用有意义且语义化的类名。如 .btn-primary,.card-header。
• 采用小写字母加连字符或下划线，保持统一。

3️⃣ 编码风格

• 每条属性后加分号；属性和值之间用冒号并留一个空格，例如：color: #333;
• 使用 4 个空格或 1 个 Tab 的缩进，使层级关系清晰。
• 同一选择器的属性块结束后加空行，便于快速定位。怎么说呢，

4️⃣ 常见错误示例 & 正确写法

错误示例：

 /* width 是属性。