CSS格式化/压缩

使用说明

1. 粘贴代码

将需要处理的 CSS 代码粘贴到左侧输入框。支持 CSS3、CSS 变量、@media 查询、@keyframes 动画、嵌套选择器等现代 CSS 特性。

2. 选择格式化选项

缩进：支持制表符（Tab）、2/4/8 个空格，默认 4 个空格。 风格：

3. 选择操作

格式化：美化代码结构，自动缩进与换行，便于阅读和维护。 压缩：去除空格、注释、换行，最小化文件体积，适合生产环境部署。

4. 查看与复制

处理结果实时显示在右侧输出区，支持语法高亮。点击「复制」按钮一键复制结果，点击清空按钮可重置输入输出。

CSS 常见规范

1. 命名规范

• 类名使用小写字母，单词间用连字符分隔（kebab-case）：.nav-item、.btn-primary
• 避免使用驼峰命名或下划线命名：.navItem、.nav_item
• ID 选择器仅用于 JavaScript 钩子或页面唯一元素，不用于样式
• BEM 命名法：.block__element--modifier，适合大型项目

2. 属性书写顺序

建议按以下分组顺序书写属性，便于查找和维护：

3. 选择器规范

• 选择器嵌套层级不超过 3 层，避免过度嵌套导致权重过高
• 避免使用标签选择器（如 div、span）直接设置样式
• 避免使用 !important，除非覆盖第三方样式
• 多个选择器共享样式时，每个选择器独占一行

4. 值与单位

• 值为 0 时省略单位：margin: 0; 而非 margin: 0px;
• 小数点前的 0 不可省略：opacity: 0.5; 而非 opacity: .5;
• 颜色值使用小写十六进制，能用简写则简写：#fff 而非 #FFFFFF
• 使用 CSS 变量管理主题色、间距等重复值：var(--primary-color)

5. 注释规范

• 文件顶部添加模块说明注释
• 重要样式或 hack 写法必须添加注释说明原因
• 使用 / 注释内容 */ 格式，/ 后加一个空格
• 生产环境部署前移除所有注释以减小体积

6. 响应式与兼容性

• 移动优先：先写基础样式，再用 @media (min-width: ...) 添加大屏样式
• 媒体查询放在文件末尾，按断点从小到大排列
• 使用 autoprefixer 自动添加浏览器前缀
• 避免使用实验性属性，或添加 @supports 检测

7. 性能优化

• 避免使用通配符选择器 * 设置全局样式
• 减少使用 @import，改用 <link> 或构建工具合并
• 使用 will-change 提示浏览器优化动画性能
• 避免在高频事件（scroll/resize）中触发布局重排的样式操作