清除CSS款式的几个有效专用工具

2021-03-14 07:36 jianzhan

在大家写款式的情况下,网页页面的CSS在亲身经历几个版本号的改动以后,将会一些款式早已用不到了,也许将一些款式更名了而原先的忘了删掉,总而言之网页页面中将会存在着1些无用的款式。这些无用的消耗了1些服务器室内空间和带宽耗费,也会增大大家的维护保养成本费。那末有木有1些方法来清除那些无用的款式呢?今日就让大家来掌握1下几个较为有效的专用工具。

Dust-Me selectors

Dust-Me是1个很有效也很功能强大的Firefox软件,它能够剖析到你的网页页面中启用的全部CSS文档并剖析那些在网页页面中沒有被用到。

  • 适用当地和远程控制款式文档,包含应用<link>标识、<?xml-stylesheet?>解决命令、@import句子等方法引进的款式文档;(可是不适用网页页面中的<style>块和内联款式)
  • 适用IE标准注解中引进的款式文档;
  • 能够查验1个网页页面,还可以查验全部网站;
  • 适用CSS1挑选器、绝大多数CSS2和CSS3挑选器;
  • 了解通用性的CSS hack,例如 “* html #fuck-ie”可能被觉得是”html #fuck-ie”;
  • 适用Firefox 3.5和Firefox 3.0,客观事实上得益于FF 3.5的js模块的改善,FF 3.5中的特性比FF 3.0要高50%。

安裝:点一下这里。另外,你能够免费下载该新项目的源码,掌握更多请浏览 Dust-Me selector官方网页页面

Page Speed

Page Speed是Google出示的1个前端开发特性剖析专用工具,一些相近于YSlow,可是出示了1些较为个性化且很有效的专用工具,例如Remove unused CSS:

Page Speed和YSlow1样依靠Firebug,掌握详细信息和安裝请浏览这里

CSS Redundancy Checker

CSS Redundancy Checker是1个完全免费的线上运用,能够查验全部的应用某个CSS文档的网页页面中无用的款式。能够另外查验某1个款式在好几个网页页面中的应用状况。该专用工具的不够是尽管1次能查验好几个HTML网页页面,但每次只能查验1个CSS文档,并且还要手动式键入:

IntelliJ IDEA

IntelliJ IDEA这是1个颇强劲的IDE,相近于DreamWeaver,但是在中国用的很少。该手机软件包含1个及时编码剖析专用工具(On-the-fly Code Analysis),能够剖析CSS文档中未用到的class和id。

Expression Web

Expression Web做为微软的新1代网站开发设计专用工具,還是有许多人应用的,其CSS Report作用能够查验未用到必须被消除的CSS(我确实沒有应用EW开发设计过网站,期待应用该手机软件的童鞋能够帮忙确定1下这1点)。

结语

自然将会也有其它的一些专用工具这里沒有提到,假如大伙儿有一定的掌握,能够与大伙儿共享。

此外,一般大家将全部网站的款式写入1个或好几个款式文档中,随后在网页页面中所有启用或分控制模块启用,那末某个CSS文档中的款式将会在某个网页页面中确实沒有用到可是在其它的网页页面中被用到了,因此应用这些专用工具检验CSS文档中过剩的款式的情况下,必须维持1定的慎重,消除款式将会会危害到其它的网页页面,因此page speed出示的查验結果只可用于单独网页页面,不合适全部网站,而应用Dust-Me或CSS Redundancy Checker的情况下能够对全部网站或网站的好几个网页页面另外查验,这样将会能防止万无1失。

PS:Thanks to Knowledge Capsules’s work very much.