css压缩_CSS压缩工作流程

css压缩

For your pages to load as quickly as possible, every resource needs to be optimized and compressed. As images are the greatest contributor to the overall file size of most sites, they should typically be the web developer’s first and primary area of concentration, which I’ve covered in a previous article. After that, other site resources should be compressed in terms of how frequently they are used, including the stylesheet.

为了尽快加载页面，需要优化和压缩每个资源。 由于图像是大多数站点总体文件大小的最大贡献者，因此图像通常应该是Web开发人员关注的首要领域，而我在上一篇文章中已经谈到 。 之后，应根据使用频率(包括样式表)来压缩其他站点资源。

Optimisation of CSS is a three-step process, and you’ll usually need a combination of tools to gain the best results.

CSS的优化是一个三步过程，通常需要使用多种工具组合才能获得最佳效果。

1. Remove style rule irrelevancies and redundancies

   删除样式规则无关性和冗余

   It’s common for a great deal of “cruft” to be added to stylesheets during development: CSS rules are often repeated haphazardly, or not used at all in the final version of the site. A redundancy checker such as Dust-Me checks your CSS rules against the actual HTML used by working through the local Sitemap, while CSSCSS (a Ruby gem) works on the CSS alone, looking for duplications in code.

   在开发过程中将大量“样式”添加到样式表中是很常见的：CSS规则经常偶然地重复，或者在站点的最终版本中根本不使用。 诸如Dust-Me之类的冗余检查器会根据通过本地Sitemap使用的实际HTML来检查CSS规则，而CSSCSS (Ruby gem)仅在CSS上工作，以查找代码重复项。

2. Order Declarations

   订单声明

   You’ll get the greatest result out of
   gzip compression (discussed separately) if the CSS declarations are placed in the same order in your stylesheet each time. CSS Comb (available online and as an extension for most IDE’s) provides a number of resorting algorithms to do so.

   gzip压缩(单独讨论)的最大效果。 CSS Comb (可在线获得，并且可作为大多数IDE的扩展)提供了许多手段来做到这一点。

   Running this step early and frequently in your code generation can also make your CSS easier to read.

   在代码生成过程中尽早频繁地执行此步骤也可以使CSS易于阅读。

3. Step Three: Compress to styles.min.css

   第三步：压缩到styles.min.css

   The final compression step removes optional spaces, carriage returns, comments, and other unnecessary text from your CSS code. While it will work exactly the same, your CSS code will now be much more difficult to read, so it should be saved as a new, separate file (typically
   styles.min.css) that your pages will link to.

   styles.min.css )。

   Most tools for this step use the YUI Compressor algorithm. I like the drag-and-drop approach of Smaller (which also minifies HTML, PHP and JavaScript), but online compressors are also available.

   用于此步骤的大多数工具都使用YUI Compressor算法 。 我喜欢Smaller的拖放方法(它也最小化了HTML ， PHP和JavaScript )，但是也可以使用在线压缩器。

Some minifiers take things a little too far, removing code they don’t understand (such as vendor prefixes and CSS3) – you should keep an eye out for these behaviors if you go looking for other compressors.

一些缩小器将事情做得太远了，删除了它们不了解的代码(例如供应商前缀和CSS3)–如果您要寻找其他压缩器，则应注意这些行为。

Don’t forget to leave an uncompressed styles.max.css or original Sass files available on your site: let other developers learn from your work!

不要忘记在您的站点上保留未压缩的styles.max.css或原始Sass文件：让其他开发人员从您的工作中学到东西！

Following these steps with server-side gzip compression will often result in size reductions of 20% or more in your site’s stylesheet, which translates into faster page load times and lower bandwidth costs.

按照这些步骤进行服务器端gzip压缩通常会导致网站样式表的大小减少20％或更多，从而缩短页面加载时间并降低带宽成本。

翻译自: https://thenewcode.com/686/CSS-Compression-Workflow

css压缩