当前位置:首页 > 技术杂坛 > 正文内容

10 个用于格式化、组织和整理 CSS 代码的免费工具

zhangchap3年前 (2021-08-01)技术杂坛360

如果您是一位经验丰富的网页设计师,您可能不会遇到这个问题。您的 CSS 文件将结构连贯且简洁;每个选择器都将被仔细放置,每个属性都将被完美格式化……您的 CSS 将看起来像精心制作的艺术品。如果这描述了您,请继续前进,这篇文章不适合您。

但是,如果您是 99.9% 定期使用 CSS 的网页设计师之一,那么它适合您。

您知道它是如何进行的,您使用准系统 CSS 文件启动了一个新的 Web 项目,并且在您构建站点时,您的 CSS 会随之快速增长。并且它将继续增长。它会变得杂乱无章。结构有时会令人困惑甚至不可读。结构最终会丢失。已经犯了错误。不过请放心;它发生在每个人身上。

此时,您可以执行以下两种操作之一,在不同阶段停止并重新构建 CSS,或者您可以等到站点完成后再修复所有内容。无论哪种方式,根据网站的大小,都将花费您很多时间。

如果只有一堆工具可以帮助我格式化、组织和排序我的 CSS。值得庆幸的是,有。现在,这些工具并非万无一失。他们不会知道您用于编写 CSS 的独特和古怪的风格,但他们会帮助您并为您节省大量时间。时间倒流会让你去弄乱另一个 CSS 文件!

您可能还喜欢这些工具箱:CSS FlexboxCSS AnimationSVG Workflow ToolsStyleguide Tools

CSS Comb – CSS 排序

CSScomb 是一种智能工具,可以对样式表中的 CSS 属性进行排序,并根据设置按特定顺序对它们进行排序。

未使用的 CSS

未使用的 CSS是一个简单的工具,可以扫描您的网站以查找任何未使用的 CSS 选择器。

CSS 未使用的 CSS

净化器

Purgecss是一种可以快速从您的站点中删除未使用的 CSS 的工具。

CSS 清除

清理 CSS

sanitize.css是一个 CSS 库,可以纠正损坏和丢失的样式。

清理.css

莫特

Mort是一个简单的工具,用于检测和突出显示“死”的 CSS。

CSS 莫特

CSS 收缩

CSS Shrink 是一个用于“缩小”CSS 文件的小工具。

CSS Shrink 一个用于缩小 CSS 文件的小工具

csscss -A CSS 冗余分析

csscss是一个 Ruby gem,它将解析任何 CSS 文件并告诉您哪些规则集具有重复的声明。要了解如何使用 cssscss,请单击此处

csscss -A CSS 冗余分析

Helium CSS - 用于扫描您的网站并显示未使用的 CSS 的 JS 工具

Helium CSS是一种用于在网站上的许多页面中查找未使用的 CSS 的工具。Helium 获取站点不同部分的 URL 列表,然后加载并解析每个页面以构建所有样式表的列表。然后它访问 URL 列表中的每个页面,并检查页面上是否使用了样式表中找到的选择器。

然后它将生成一个报告,其中包含每个样式表的详细信息以及未发现在任何给定页面上使用的选择器。

CSSO – CSS 文件的结构优化

除了作为 CSS 最小化器,CSSO还可以对 CSS 文件进行结构优化,与其他压缩器相比,文件大小要小得多。

它将合并具有相同选择器和属性的块、删除覆盖的属性、删除重复的选择器、部分合并块、删除空规则集,并且还将最小化边距和填充属性

CSS Lint - 帮助查找 CSS 代码的问题

CSS Lint是一种帮助指出 CSS 代码中问题的工具。

CSS Lint - 帮助您查找 CSS 代码的问题

它进行基本的语法检查,并将一组规则应用于代码,以查找有问题的模式或低效率的迹象。这些规则都是可插拔的,因此您可以轻松编写自己的规则或省略您不想要的规则。

提取CSS

extractCSS是一个可以从 HTML 文档中提取 ids & classes 并输出 CSS 样式表的工具。

extractCSS 一个可以从 HTML 文档中提取 ids & classes 并输出 CSS 样式表的工具



原文:

https://speckyboy.com/tools-format-organize-sort-css/


分享给朋友:

相关文章

在IIS 7输出缓存的作用

在IIS 7中配置输出缓存 适用于:Windows 7,Windows Server 2008,Windows Server 2008 R2,Windows Vista...

destoon数据库优化,实现单台几百万数据下秒级速度

今天看到一大神分享的文章,在此留个备份:  destoon7.0对mysql5..7优化,实现单台几百万数据下秒级速度,可以缓解吃内存的情况,希望对大家有帮助 记得要备份数...

video视频提示没有找到支持的视频格式和MIME类型解决方案

初次尝试用 html5的 video 标签添加适配,代码如下: <link href="//vjs.zencdn.net/7.8.2/video-js.min.css"...

json输出json.dumps中文为ascii编码如何解决?

import json print json.dumps('中国') 输出:"\u4e2d\u56fd" json.dumps(...

python正则替换替换文本特殊字符和html代码

import re h2 = '「新裤子/痛仰/陈粒/达达」2021贵阳草莓音乐节全阵容公布!' h2 = re.sub(r...

python 字典排序

prefix_word = {'怎么': 4, '昨晚': 27, '会': 56...

发表评论

访客

◎欢迎参与讨论,请在这里发表您的看法和观点。