三块样式带注释

麦梓晴接手同事写的商品卡片样式，一堆声明挤在花括号里，想先展开看层级、再压一份给线上。"CSS 原文"框粘进 166 字符：开头是"/* 商品卡片 */"，下面".card"给内距圆角与白底，".card .title"定字号颜色与下边距，".card .price"用橙红加粗。三条规则都带"padding:16px"这类分号结尾的声明，原貌记住，等下要跟展开后的文本对差别。这一页只有左右两框加四个按钮，没有别的开关。

美化把层级摊开了

按"美化"，右侧"处理结果"把三条规则摊开，选择器各占一行、声明按 4 空格缩进、冒号后统一补空格，看着清爽多了。左右两框之间没有联动，不按按钮右边一直是旧值；工具也没有缩进几格、保不保留注释这类选项，点一下就出结果。"压缩"是另一个方向，"复制结果"与"下载 .css"只搬右侧当前内容。

注释和分号一起消失

展开后的文本共 204 字符，两处要盯住：开头那句注释不见了；每条声明末尾都没有分号，"padding: 16px"后面直接换行接"border-radius: 8px"，中间没有任何分隔。连"font-weight: 700"也一样。这两件事同时发生，结构是好看了，这段文本却已经不能直接当样式用。框里没有语法高亮也不给报错，对不对全靠自己看，别把这一份复制去上线。

线上那份要从压缩导出

点"压缩"后，输出是三个选择器块首尾相接的一整行，注释与空白都没了，声明之间的分号却都还在，这才是一段合法的 CSS。因为"复制结果"和"下载 .css"导出的是此刻右侧框里的内容，框里是美化版就导出美化版、是压缩版才导出压缩版。麦梓晴先把压缩结果留在框里，再复制进项目或存成 css 文件，这一步才算交付对东西。

企业知识网（ www.qiyezhishi.com ）提供的结果为参考性内容，不构成法律、税务或投资建议。具体请以主管部门口径与最新法规为准。