我必须调试的最糟糕的 CSS 作为一个 40,000 个字符的行到达。构建步骤连接并最小化了项目中的每个部分,接近末尾的规则凌驾于它不应该拥有的颜色之上,并且无法看到级联,因为没有换行符可以看到它。我已经跨 WordPress 主题和 React 应用程序发货了足够的前端,以了解您无法阅读的样式表是您无法修复的样式表,因此我构建了一个 css 格式化程序 上 Toolz.dev that 将那面文本墙变回缩进的,可扫描的 CSS 在一个粘贴中,并在您准备发货时再次最小化它 这是它的指南,也是 " 格式化 CSS" 的实际含义。
TL;博士: CSS 格式化程序重新缩进具有一致间距的样式表,因此它是可读的,而 CSS 迷你器则将该样式表间隔回去,因此文件很小。工具 css 格式化程序 1个输入中两者都做。它将CSS解析为规则、选择器、声明、at-rules和注释,然后用你选择的两个空格、四个空格或选项卡将该结构打印回来,或者将其折叠为最小有效等效嵌套
@media並@keyframes块,url()values,以及引用的字符串都完好无损地保存下来,并且所有内容都运行客户端,因此您的 CSS 永远不会离开浏览器。
CSS格式化器是什么?
CSS格式化程序读取样式表,并用可预测的、一致的空白重写它,规则本身不会改变,选择器、属性、值前后相同,浏览器应用格式化的文件,就像应用原来的那样,改变的是布局:每行一个声明,每个冒号后一个空格,每个块缩进比其父级深一层,在自己的行上有一个闭包,结果是一个人类可以扫描的文件。
Hood下工具不是在whitespace上做find-and-replace,这是天真的格式化程序出错的地方,它首先将CSS解析到其真实结构中,样式表是一系列节点:样式规则将选择器与声明块配对,at-rules like @media 或 @import、注释以及声明本身。一旦 CSS 是这些节点的树,用您喜欢的任何缩进将其打印出来是直接的,而且至关重要的是,安全。解析器是让格式化程序知道内部有一个逗号的原因 :not(a, b) 是选择器的一部分,而之间有一个逗号 h1 並 h2 分隔两个选择器,并在 a 内有一个分号 url() 数据 URI 不是声明的结束。
(same parse)为反向操作提供动力,因为工具已经了解了结构,所以它可以打印完全没有缩进的树,这正是最小化是什么,这就是为什么一个工具涵盖了两种工作:格式化和最小化是相同的解析打印两种不同的方式。
CSS的格式化和最小化有什么区别?
这些是同一轴的相对两端,知道你想要哪一个可以节省混乱。格式化,也称为美化或漂亮打印,为了人们的利益添加了空白。最小化删除空白是为了机器和网络的利益。您对读取和编辑的副本进行格式化;您将发送到浏览器的副本最小化。
The distinction很重要,因为它们属于你工作流程中的不同点,当你在编写CSS时,或者当你继承了你需要理解的文件时,你希望它格式化,当你部署时,你希望它最小化,所以浏览器下载更少的字节,更快地绘制大多数构建管道自动最小化,但很多情况都落在构建之外:从CodePen粘贴的片段,从你正在审核的页面中提取的样式表,直接在CMS中编辑的主题文件对于那些,独立的格式化程序和最小化程序是最快的路径。
这是分裂的一目了然。
| 方面 | 格(美化) | 最小化 |
|---|---|---|
| 观众 | 人们阅读和编辑 | 浏览器下载 |
| 空白 | 添加了可读性 | 完全删除 |
| 评论 | 默认保留 | 默认删除 |
| 文件大小 | 较大 | 尽可能小 |
| 何时使用 | 写作、调试、审阅 | 运送到生产 |
如何使用此工具格式化 CSS?
Flow故意短,把你的CSS粘贴到输入中,挑选美化或者最小化,读取结果,美化时选择两个空格、四个空格或者选项卡来匹配你的项目's编辑器设置,决定是否保留注释 css 格式化程序 使用大小徽章显示输出,以便您可以看到字节更改,并将任何解析通知(例如不平衡支架)列为警告,而不是默默失败。
4个步骤在实践中是这样的,首先粘贴样式表,无论是微缩、手写、还是从工具导出,其次点击Beautify重新缩进或微缩剥离,第三查看输出和大小徽章,看一眼任何警告,第四将结果复制到剪贴板或下载为a .css file ready 掉入你的项目中,没有上传步骤,也没有帐号,因为整个事情都发生在你的浏览器里。
如果您使用其他结构化格式,Toolz 都会出现相同的模式。 json 格式化程序 美化和最小化 JSON, html 格式化程序 对标记执行相同的操作,并且 sql 格式化程序 handles查询。格式化是一个大概的想法,并且每个语言具有相同的工具形状保持肌肉记忆的一致性,一个主题the web开发人员工具包 指南进一步发展。
格式化会改变我的风格工作方式吗?
No,而这正是使工具在生产CSS上安全运行的保证,美化和最小化仅触摸空白,可选地,注释,它们从不重新排序声明,从不重命名任何东西,从不合并或丢弃规则,从不重写值,您的选择器的特殊性不变,驱动级联的源顺序不变,浏览器中计算的结果是字节对字节等价的。
这值得简单地说明,因为一些 CSS 优化器所做的远远超出了最小化:它们合并重复的选择器,丢弃它们判断未使用的规则,并重新排序属性。这些转换可以以微妙的方式改变行为,尤其是当级联或 a !important is involved。this formatter故意不做任何那样的事情,它是一个空白工具,如果你美化一个文件,什么都不编辑,再最小化,这两个文件在功能上是相同的,这意味着你可以自由往返,没有恐惧。
定义什么算作空白以及在哪里不重要的 CSS 语法在 中指定 CSS 语法模块 3 级 w3c中。formatter遵循了那个语法's令牌生成器模型,这就是为什么它处理字符串令牌或a内部的空格 url() 与声明之间的空白不同。
它如何处理@media、@keyframes 和其他 at-rules?
规则是休闲格式化程序崩溃的地方,因为规则可以以分号结束,也可以包裹一整块其他规则。 @import "base.css"; 是以分号结尾的语句。 @media (max-width: 600px) { ... } 是一个包含自己的嵌套规则的块,并且这些嵌套规则需要比 深一层缩进 @media line 本身。找到并替换的方法无法区分两者;解析器可以。
因为这个工具构建了一棵真正的树,一棵嵌套的树 @media block在美化时保持其内在规则正确缩进,在最小化时正确折叠,同样成立 @supports 功能查询和 @keyframes 动画,每个百分比步骤都像 0% 並 100% 是动画内部自己的块。字体声明中 @font-face 并分层 @layer rules 的处理方式是一样的,无论样式表达到什么嵌套深度,缩进都会跟踪它。
这种结构意识还可以保护值中看起来像语法但不是语法的部分。 A url() 可以包含填充有 base64 的数据 URI,其中包括分号和冒号,以及 content property可以把一个带括号或逗号的引号字符串放在里面,格式化器留下引号字符串的内部和 url() 值与编写的值完全相同,因此字体路径、SVG 数据 URI 或生成内容的文本永远不会折叠、重新间隔或损坏。如果您经常将图像嵌入为数据 URI,则 图像到 base64 工具自然地与这个工具配对。
缩小 CSS 大小会使我的文件小多少?
完全取决于源包含多少空白和多少注释,但节省的费用是真实的。用慷慨的缩进和文档注释编写的样式表通常会缩小百分之二十到四十。一旦空白消失,一个已经相当紧凑的文件将缩小更少。工具中的大小徽章显示文件的前后字节数,因此您永远不必猜测。
这些字节很重要,因为 CSS 是渲染阻止。浏览器在下载并解析文档头中的 CSS 之前不会绘制页面,因此样式表的每千字节都是用户与第一次查看页面之间的千字节。最小化是最便宜的性能之一。获胜是可用的:不更改代码,没有行为风险,只是在线上的字节更少。在最小化之上,服务器层的 gzip 或 Brotli 压缩会进一步缩小文件,而最小化的 CSS 会很好地压缩,因为删除缩进会使有意义的令牌更加密集。
Minifying 是这部作品的近亲 css 迷你器 确实如此,而且 css 小型机指南 going late on the compression side。两者存在的理由都是方便:有时你降落在格式化程序上清理一个文件,并希望在同一个地方进行最小化,有时你直接去到最小化器。无论哪种方式,底层解析都是一样的。
我可以保留我的评论并控制缩进吗?
Yes to both,而这两个选项涵盖了一大小格式化程序遗漏的情况,美化时默认保留注释,因为当你在读取和编辑 CSS 时,注释往往是最有用的部分,在最小化时,注释默认删除以保存每个字节,但有一个切换来保存它们,当文件携带许可证标头或必须存入到已发货捆绑包中的版权声明时,你想要它。
Indentation是一种选择,因为团队不同意,格式化程序的要点是通过一致地应用一个规则来结束分歧。两个空格是现代前端项目中最常见的默认值,四个空格适合在其他地方使用的代码库,选项卡适合更喜欢它们的可访问性或个人配置。选择一个,输出中的每个块都遵循它。一致性是整个值:格式化程序值得使用,正因为它删除了在项目中逐个文件漂移的小型手动决策。通过这种方式标准化工具的更广泛案例贯穿于 开发人员生产力工具 指南。
格式化实际上解决了哪些日常问题?
40,000个字符的行我打开是戏剧性的案例,但平凡的出现要多得多你从浏览器复制一个规则's dev工具,它到达与你的文件不匹配的计算速记和不一致的间距你从一个从未运行格式化程序的承包商那里继承了一个样式表,所以支架样式和缩进每隔几百行移动一次你粘贴一个博客文章的片段或一个设计工具,它使用选项卡,你的项目使用空间在每一个这些,CSS工作,但它不匹配,并且一个不匹配的文件是一个文件,它会减慢未来的每一次编辑,并弄脏每一个差异。
通过格式化程序运行这样的文件可以一次性标准化所有文件。每个块都会得到相同的缩进,每个声明都会落在自己的行上,并且您随后提交的差异仅显示您实际所做的更改,而不是空白噪声的风暴。最后一点是安静的生产力胜利:一致格式化的代码库会产生干净的差异,而干净的差异会使代码审查更快,回归更容易发现。格式化不是表面上的。它使样式表随着其增长而清晰可见,这就是为什么每个严肃的前端项目最终都会标准化一个布局并强制执行。 开发人员生产力工具 guide 为从工作流程中消除这种手动摩擦提供了更广泛的理由。
格式化敏感 CSS 或专有 CSS 是否安全?
是的,这是一个深思熟虑的设计决定,而不是脚注。所有解析和格式化都发生在浏览器内的 JavaScript 中。没有样式表上传到服务器,没有记录任何内容,并且一旦页面加载,该工具就会关闭连接。您可以格式化包含内部类名称、未发布的设计系统令牌或未发货功能结构的 CSS,而无需任何内容离开您的机器。
这比看起来更重要,因为样式表可能会泄露意图。类名称和自定义属性名称通常会电报尚未公开的功能,并且组件的结构's CSS 可以揭示产品是如何构建的。服务器端格式化程序,无论信誉如何,都是您将该信息交给的第三方。客户端工具完全删除问题。在浏览器中而不是在服务器上处理开发人员数据背后的推理是主题 数据隐私在线工具 指南,适用于中的每个工具 编码工具 collection,不只是这个,隐私是免费的,就没有理由放弃。
常见问题
如何在线格式化 CSS?
CSS粘贴到输入区,点击Beautify,工具解析样式表,每行一个声明,缩进一致,重写,一切都在浏览器中运行,所以什么都上传不了。
CSS的格式化和最小化有什么区别?
Formatting,也称为美化,增加了缩进和换行,因此CSS对人们来说是可读的,同时最小化删除所有不必要的空白和注释,因此该文件对于浏览器来说尽可能小。该工具从相同的输入中做到两者。
CSS格式化会改变我的风格工作方式吗?
号美化和最小化只改变空白和注释,从不改变规则、选择器或值浏览器应用格式化的样式表的方式与应用原始样式表的方式完全相同。
它是否正确处理@media 和@keyframes?
Yes。@media、@supports、@keyframes等嵌套at-rules被解析为块,因此它们内在的规则在美化时会更深地缩进一级,在最小化时则保持完整。
会破坏url()值还是内容字符串?
号格式化程序将引用的字符串和url()值的内部完全按照编写的方式离开,因此数据URI、字体路径和内容文本永远不会折叠或重新间隔。
迷你化使我的 CSS 变小多少?
这取决于文件包含多少空白和多少注释,但一旦缩进和注释被删除,可读样式表通常会缩小百分之二十到百分之四十。大小徽章显示文件的确切字节变化。
缩小范围时我可以保留我的评论吗?
Yes。有一个切换来保存注释。将其留下来以获得最小的输出,或者在您需要在最小化文件中保留许可证标题或创作笔记时打开它。
在这里格式化敏感的 CSS 是否安全?
是所有解析和格式化都发生在浏览器内部的 JavaScript 中,没有样式表发送到服务器,没有记录任何内容,并且该工具在您的连接被禁用的情况下工作。
的 css 格式化程序 是免费的,完全在浏览器中运行,不需要注册。美化样式表来阅读它,最小化它来发货,并且永远不会再次调试 40,000 个字符的行。探索它和其余部分 编码工具 在工具z.dev 上。
