CSS调试–实验失败

Not sure if I've ever put that in writing, but CSS irks me with its verboseness. I mean things like: background-position, padding-bottom, text-decoration... those are long property names, repeatedly used in stylesheets. And there's pretty much nothing you can do about them in terms of minification, it's not like they are variables in JavaScript which your YUIcompressor can rename to, like, a, b and c, respectively.

不知道我是否曾经写过它，但是CSS的冗长让我很烦。 我的意思是这样的： background-position ， padding-bottom ， text-decoration ...这些都是很长的属性名称，在样式表中反复使用。 就缩小而言，您几乎无能为力，这并不是说它们是JavaScript中的变量，您的YUIcompressor可以将它们分别重命名为a ， b和c 。

Or can you do something about it? Here's the big idea:

或者您能对此做些什么？ 这是个好主意：

好主意 (the big idea)

I though of using JavaScript arrays to store each CSS property only once, and also each value only once. Then have another array with selectors and a way to match selector to indices in the property/value arrays. A simple loop in JavaScript can reconstruct the stylesheet. Simple, right? And avoids all these verbose repetitions.

尽管我使用JavaScript数组仅将每个CSS属性存储一次，并且每个值也仅存储一次。 然后使用另一个带有选择器的数组，以及一种将选择器与属性/值数组中的索引匹配的方法。 JavaScript中的一个简单循环可以重建样式表。 简单吧？ 并避免所有这些冗长的重复。

Drawback - breaking the separation of concerns. Relying on behavior (JS) in order to get presentation (CSS). If someone has disabled JS they get no styles. That's a big no-no, but there's one case where you can safely break the separation - in lazy-loaded functionality. Here's what I mean...

缺点-打破关注点分离。 依靠行为(JS)以获得演示文稿(CSS)。 如果有人禁用了JS，他们将无法获得样式。 这是一个很大的禁忌，但是在一种情况下，您可以安全地打破分离-在延迟加载功能中。 这就是我的意思

合并懒惰的资产(Combining lazy-loaded assets)

Page loads ok in its basic form - styles and all. Then it gets progressively enhanced with JavaScript. JS adds new features. If you have JS OFF, you don't get them. But if you do, it makes sense to have the feature atomic - one file containing both JS and CSS. This way saving HTTP requests (rule #1 for faster pages). That's a pretty cool idea in itself and you can find implementations in the wild, including high-traffic sites such like Google search and Yahoo homepage.

页面以其基本形式(样式和全部)加载。 然后通过JavaScript逐步增强。 JS添加了新功能。 如果您关闭JS，则不会得到它们。 但是，如果这样做，则具有原子功能是有意义的-一个包含JS和CSS的文件。 这样可以保存HTTP请求(规则＃1以获得更快的页面)。 这本身就是一个很酷的主意，您可以在野外找到实现方法，包括人流量大的网站，例如Google搜索和Yahoo主页。

Ok, with the SoC out of the way, what about that failed experiment?

好的，如果不使用SoC，那失败的实验该怎么办？

实验失败 (A failed experiment)

(psst, demo here)

(psst，演示在这里)

You start with something like:

您从类似以下内容开始：

#test {
    border: 1px solid blue;
    font-family: Verdana;
} 
a {
    padding: 0;
    font-family: Arial;
}

Then (all that during build time, not run time!) you have a parser that will walk over the CSS and "understand it" into an array, like:

然后(在构建时，而不是在运行时！)，您将拥有一个解析器，它将遍历CSS并将其“理解”为一个数组，例如：

[
    {
        selector: '#test',
        rules: [
            {
                property: 'border',
                value   : '1px solid blue'
            }
        ]
    },
    
]

Then from that structure you produce 4 arrays that contain:

然后从该结构中生成4个包含以下内容的数组：

1. all selectors,
   所有选择器
2. unique properties (sorted),
   独特的属性(已排序)
3. unique values (sorted) and
   唯一值(排序)和
4. a map that connects selectors to their properties and values.
   将选择器连接到其属性和值的地图。

s:['#test','a'], // s-selectors
p:['border','font-family','padding'], // p-properties
v:['1px solid blue','Verdana',0,'Arial'], // v-values
r:[[0,0,1,1],[2,2,1,3]] // r-map or rules

Finally, your build process produces a JavaScript function that reconstruct the CSS string, which you can then shove into a style tag and be done with it.

最后，您的构建过程将生成一个JavaScript函数，该函数将重构CSS字符串，然后您可以将其推入style标签并对其进行处理。

(function(o,s,i,j){
s='';
for(i=0;i<o.s.length;i++){
  s+=o.s[i]+'{';
  for(j=0;j<o.r[i].length;j=j+2){
    s+=o.p[o.r[i][j]]+':';
    s+=o.v[o.r[i][j+1]]+';';
  }
  s+='}';
}
return s;
})({
s:['#test','a'],
p:['border','font-family','padding'],
v:['1px solid blue','Verdana',0,'Arial'],
r:[[0,0,1,1],[2,2,1,3]]
})

结果 (Results)

The demo is here, you can paste your CSS and see what the results are for your styles. Here's what I found:

演示在这里，您可以粘贴CSS并查看样式的结果。 这是我发现的：

• Really tiny stylesheets don't make sense, because the overhead exceeds any savings
  真的很小的样式表没有意义，因为开销超过了任何节省
• Otherwise it helps! You get smaller CSS, yey! Champagne! Caviar! Everybody dance!
  否则会有所帮助！ 您得到CSS较小，是的！ 香槟酒！ 鱼子酱！ 大家跳舞！
• But... after gzipping the result, the AFTER is actually bigger than BEFORE. Cold shower. The hole thing goes down the drain. C'est la vie, gzip does a better job than I can do with JS arrays.
  但是...将结果压缩后，AFTER实际上大于BEFORE。 冷水淋浴。 Kong洞的东西掉下来了。 老兄，gzip比我使用JS数组做得更好。

Here's the results of munging one 16K gzipped CSS found on the Yahoo! homepage;

这是对Yahoo!上发现的一个16K gzip压缩CSS进行处理的结果。 主页;

Raw:
  source: 95735
  result: 87300
    percent: 8.81077975662%
Gzipped:
  source: 16211
  result: 16730
    percent: -3.20152982543%
        
        

Tell your friends about this post on Facebook and Twitter

在Facebook和Twitter上告诉您的朋友有关此帖子的信息

翻译自: https://www.phpied.com/css-munging-failed-experiment/