用途
该规则用于在前端代码审查中检查与“避免内嵌样式和行内 CSS”相关的样式表、组件样式及响应式行为。它面向样式评审场景，帮助识别哪些内联或内嵌 CSS 违反了该规则。
主要能力
该规则提供四个执行环节：
- Check（检查）：验证是否避免了内联 CSS 和内嵌样式，例外情形为关键 CSS、动态样式或性能优化等有效用例。
- Fix（修复）：将内联和内嵌 CSS 移动到外部样式表，仅保留首屏关键 CSS 内联以优化性能。
- Explain（解释）：说明为什么外部 CSS 在可维护性、缓存和关注点分离方面更优，并说明关键 CSS 与动态样式属于例外。
- Code Review（代码审查）：审查样式表、组件样式和响应式状态，在渲染后的 UI 中标记违反该规则的具体选择器、声明或断点。
使用方式
按照规则提供的 Check → Fix → Explain → Code Review 流程执行。在代码审查时，关注样式表、组件样式与响应式状态，定位并指出违反“避免内嵌样式和行内 CSS”的具体选择器、声明或断点。完整实现细节、代码示例和框架相关指导参见 references/rule.md。
规则要点
- 将内联样式移动到外部 CSS 文件或 CSS-in-JS。
- 例外一：关键 CSS 应内联以提升性能。
- 例外二：动态值（CSS 自定义属性）可以内联。
- 理由：内联 CSS 破坏缓存、增加 HTML 体积、破坏关注点分离、在大型代码库中更难维护。
适用场景
适用于前端样式表评审、组件样式评审以及响应式行为检查，尤其适合需要维护大型代码库、关注缓存与关注点分离的项目。
限制
资料未提供该规则的具体实现代码、框架适配细节或自动化集成方式，完整实现细节与框架相关指导需参见 references/rule.md。资料中亦未提供收费、价格、平台或效果方面的信息。