CSS 和样式

CSS 要求概述

前端清单定义了 CSS 实现的几个关键要求，这些要求按照优先级系统中解释的优先级级别进行组织。本节提供了确保您的样式表符合现代 Web 开发标准的全面指南。

来源： README.md373-464

CSS 最佳实践

前端清单建议遵循既定的 CSS 指南，以实现代码一致性和可维护性。该项目引用了 CSS Guidelines 和 Sass Guidelines 等多个外部资源作为开发者的起点。

代码组织

恰当的 CSS 组织有助于保持清晰性并防止样式表中的冲突

唯一 ID：如果使用 ID 进行样式设置，请确保它们在每个页面上都是唯一的（高优先级）
JavaScript 前缀：在 JavaScript 中使用的类或 ID 应以 js- 前缀开头，并且不应在 CSS 文件中进行样式设置
嵌入式/内联 CSS：避免使用嵌入式 <style> 标签或内联 CSS，除非有有效原因，例如关键 CSS 或动态背景图像

正确 JavaScript 类前缀示例

来源： README.md385-404

响应式网页设计

响应式设计是前端清单中的一项高优先级要求

所有网站都必须实现响应式 Web 设计，能够适应不同的屏幕尺寸
页面应在关键断点（320px、768px、1024px）进行测试
根据针对特定受众的分析数据考虑其他断点

来源： README.md380 README.md433-439

CSS 重置/标准化

使用 CSS 重置对于确保不同浏览器之间样式一致至关重要

应使用 CSS 重置、标准化或重启，并保持最新（高优先级）
如果使用 Bootstrap 或 Foundation 等 CSS 框架，通常已包含标准化

清单推荐这些选项

Reset.css：完全重置浏览器默认样式
Normalize.css：在标准化不一致性的同时保留有用的默认值
Reboot：Bootstrap 的标准化方法

来源： README.md385-390

供应商前缀

以确保跨浏览器兼容性

根据您的浏览器支持要求，应在必要时使用 CSS 供应商前缀（高优先级）
建议使用 Autoprefixer 等自动化工具处理前缀

来源： README.md404-407

CSS 性能优化

性能优化对于 CSS 实现至关重要，有几项高优先级建议

文件优化

清单建议了优化 CSS 文件的几种技术

技术	优先级	备注
连接	高	将 CSS 文件合并为一个文件（HTTP/2 不需要）
代码压缩	高	通过删除空格和注释来减小文件大小
关键 CSS	中等	在文档头部内联关键样式
移除未使用的 CSS	低	移除未使用的样式以减小文件大小

来源： README.md411-424

加载策略

恰当的 CSS 加载对于性能至关重要

非阻塞 CSS： CSS 文件应以不阻塞页面渲染的方式加载（中优先级）
CSS 顺序： CSS 应在文档头部任何 JavaScript 之前加载（高优先级）
关键 CSS：考虑为初始渲染内联“above the fold” CSS

来源： README.md239-245 README.md411-418

CSS 测试和验证

充分的测试可确保 CSS 质量和跨平台兼容性

Linting 和验证

Stylelint：所有 CSS/SCSS 文件都应通过 Linting 且无错误（高优先级）
CSS 验证器：应使用 W3C CSS 验证器等验证器测试 CSS（中优先级）

来源： README.md428-442

跨浏览器和设备测试

跨平台充分测试是必不可少的

桌面浏览器：所有页面都必须能在所有当前桌面浏览器中运行（高优先级）
移动浏览器：所有页面都必须能在所有当前移动浏览器中运行（高优先级）
操作系统：所有页面都必须在所有当前操作系统平台上进行测试（高优先级）
设计保真度：实现应符合设计规范（低优先级）

来源： README.md427-449

特殊注意事项

前端清单包含 CSS 实现的几项特殊注意事项

打印样式表

每页都应提供打印样式表（中优先级）
这可确保用户打印页面时内容格式正确

来源： README.md381

从右到左 (RTL) 支持

适用于国际化网站

如果需要，所有页面都必须同时测试 LTR 和 RTL 语言支持（高优先级）
CSS 应正确处理 RTL 语言的定向属性

来源： README.md456-462

预处理器

建议使用 CSS 预处理器（Sass、Less、Stylus），但非必需（低优先级）
预处理器可以提高复杂样式表的可维护性和组织性

来源： README.md382-384

CSS 工具参考

前端清单推荐了各种工具来协助 CSS 实现

类别	工具
Linting 和验证	Stylelint，W3C CSS 验证器
响应式测试	Am I Responsive?，Mobile Friendly Test，Responsive Website Design Tester
性能	UnCSS，PurifyCSS，PurgeCSS，Chrome DevTools Coverage
供应商前缀	Autoprefixer
设计比较	Pixel Perfect Chrome Extension

来源： README.md430-454

CSS 实现清单

以下是前端清单中所有与 CSS 相关的项目摘要，按优先级排序

高优先级项目

实现响应式 Web 设计
为每个页面使用唯一的 ID
实现 CSS 重置/标准化
避免嵌入式/内联 CSS
使用正确的供应商前缀
串联 CSS 文件（HTTP/2 除外）
最小化 CSS 文件
在 JavaScript 之前加载 CSS
使用 Stylelint 保证代码质量
在所有浏览器和设备上进行测试
根据需要测试 RTL 支持

中优先级项目

提供打印样式表
实现非阻塞 CSS 加载
使用 W3C 验证器验证 CSS

低优先级项目

使用 CSS 预处理器
移除未使用的 CSS
确保设计保真度
为类使用 JavaScript 前缀

遵循这些指南将确保您的 CSS 实现符合现代 Web 开发标准，并在各种设备和平台上提供最佳的用户体验。