转载

2014年CSS报告——考察如何使用CSS

CSS主要是将一个HTML结构变成一个正确显示的页面。CSS是一种允满怪癖和有很多不可预测的行为的语言，因此，通常情况之下，开发人员（后端程序开发人员）最讨讨厌使用他来做任务。

过去几年，市场上明显出现很多框架和工具，用来帮助大家少写CSS代码和减少编写CSS时产生的错误。而Sass和LESS这样的预处理器更是普遍的运用于 Bootstrap 、 Foundation 、 Bourbon 、 Susy 和 Unsemantic 等框架之中。

浏览器也发生了很多变化，在现代浏览器中使用CSS3的一些样式规则不再需要添加浏览器特定的前缀。在前些年，最佳实践是，浏览器的前缀要不要取决于站点对浏览器的支持。

这个调查来自于8000多个网站，并且下载了他们的CSS文件，做为分析如何书写CSS和使用CSS的数据。我认为这对于如何向前推动相关组织、思考和管理更大的CSS项目是非常有用的。以及可以看看网络是如何演变的。

方法

我想具有广泛的代表性样本应该与那些大型网站开发团队、常时间存在的网站和一批具有热情的业余爱好者在不断更新的属性。

我首先在 Alexa网站上搜集了1000个网站，这些网站都是流行的大网站。他们提供了一个 CSV报告，报告了排名前100万流量的网站，所以我选择了前1000名。

我为随机抽样制定了一个邮件列表，这个列表包括了过去的、潜在客户、员工、爱好者以及来自其他世界的各地人民。但我认识，只是随机抽取Alexa列表中的前百万流量的网站，即使这些来自于大型网站，可是与全世界大约 2.71亿域名注册商相比，我希望我的邮件列表能得到一个更好的样品，其中能包括MVPs，个人网站和其他网站。

最后我的列表中包括了10400个具有代表性的网站，从这些域名中我下载了他们主页中的CSS样式文件：

cat domains.txt | xargs -I % wget http://% -r -A '*.css*' -H --follow-tags=link

从10400个网站首页中，我总共收集了大约28000个CSS样式文件。这是贯穿一个 CSS解析器节点模块，让我节省大约包括选择器、属性和属性值（比如： span.important ， font-weight , bold ）870万条记录。这些都保存在Postgres，并为阅读提供了大量的索引。

总结数据

属性

声明独特的CSS属性	1528
排在前五的属性	`color` ， `width` ， `display` ， `content` ， `background-color`
常见50个属性占总额的百分比	85%
有效的样式属性（根据 CSS规范）	79(不包括特定的前缀，使用这个数字最高)
许多独特风格样式属性（有效，其他）	372
不识别样式属性	83个错误，大约210个未知属性
带 `*` 的Hack	在59个属性中使用了70808次，最常见的是 `* zoom`
强调Hack	48个属性使用2127次,最常见的是 `_font-family`
带浏览器前缀	609000或大约7%

使用CSS属性的分布接近一个典型的帕累托分布。似乎那些古怪的属性递减，并在图的末尾上。而常用的50个属性应该是任何初学者的首要任务。

输入错误和无效的样式规则也是非常有趣的。令人感到吃惊的，这些规则类型，检查，在浏览器中是没有效果的，因为他离开样式表，并不会在生产中起效。我最容易拼错的属性有 bototm 、 foat 和 heith 等。

选择器

最常用的五个选择器	`body` ， `textarea` ， `h1` ， `pre` , `h2`
最长的选择器	`.ClientAreaContainer .element-columns-alpha-outer .element-columns-alpha-inner .element-column-right-alpha-outer .element-column-right-alpha-inner .element-column-right-alpha-content:first-child .ContentEditor > p .h2Grey` 221个字符
选择器中包括一个 `#id` 占比	13.7%
选择器中包括一个 `.class` 占比	84.1%
选择器中包括一个 `:pseudo-selector` 占比	20.4%
选择器中包括一个 `::pseudo-element-selector` 占比	0.3%
选择器中仅使用元素的占比	7.5%

2014年CSS报告——考察如何使用CSS

CSS选择器通常较短，也存在一些明显的异常。简洁的选择器常被认为是好的，做为整体布局中的一个元素来说，应该分层。BEM系统对这方面做过详细的阐述。一般来说，很长的选择器和特殊的选择器都会被禁止重用，以及一组重新的CSS风格会被认为是一个全局的CSS。

常用的选择器会有类选择器和元素选择器，比如说 body 这样的选择器就很常见。我猜，大多数网站都用元素选择器来重置浏览器自带的属性。这些在一些特定的网站中都通常用来设置网站的CSS基本样式，也将导至这些元素选择器至少多次被选中。

渐进增强

使用前缀

	`box-shadow`	`border-radius`	`transition`
没有前缀	79438	103599	43442
`-webkit`	58840	49747	41117
`-moz`	40702	47633	31886
`-o`	1981	5594	27054
`-ms`	823	4576	11371

对于能自动更新版本的现代浏览器，不再需要特定的浏览器前缀。而在所有CSS3属性中还是依旧频繁的使用浏览器的前缀： -webkit ， -moz ， -o 和 -ms ，以保证浏览器对其正确的渲染。

许多 IDE ， CSS框架和在线生成器都可以帮你自动生成浏览器前缀。这样开发者就可以摆脱这种额外的工作与不习惯。如果你想确保哪些属性还需要依赖于前缀来工作，可以通过 CanIuse 查询。

我看见许多年长的前辈们还是在使用 * 和 _ 这样的浏览器Hack来解决IE某些版本的兼容问题。早在2008年Paul Lrish就提出替代方案，即使用 IE条件样式来替代这些Hack。而在当你赶时间的时候，很容易忽略这些方法，以至于 * 和 _ 这样的Hack持续在使用。

颜色

最常用的几种颜色：

十六进制代码提供了 16 ⁶ 的颜色，而常见的颜色都很可能是灰色。 R==G==B 。灰色将占大多数字体颜色，边框颜色和各种盒子阴影颜色。而品牌颜色(brand colors)在网站中我唯一不希望看到的是排在前十名的灰色。

在 2014年11月 ,Bootstrap中提供的变量 $brand-primary 的值是 #428bca ，在Brand中使用的是蓝色，随后很多项目都使用这个颜色，也这表明了这个框架是多么的流行。

颜色单位

单位	数量	所占百分比
Hex	1113681	99.6%
rgb/rgba	49789	0.4%
hsl/hsla	121	0.001%

大多数都认为 rgb 是 rgba 和 hsl 是 hsla 。他们通常不透明度就是灰度的变体。这也是有道理的，因为其主要优势就是这些格式提供了 alpha 的透明通道。

平均下来文件中声明了169种颜色。有几个下载下来的页面文件，颜色的格式使用了变量，保持了网站主题的一致性。

单位

单位名称	数量	所占百分比
`px`	2512781	77.8%
`%`	458925	14.2%
`em`	197288	6.1%
`rem`	51155	1.6%
`pt`	4471	0.1%
`calc()`	1789	0.1%
`vw`	516	<.1%
`vh`	455	<0.1%
`cm`	303	<0.1%
`ex`	158	<0.1%
`in`	62	<0.1%
`mm`	29	<0.1%
`pc`	11	<0.1%
`vmin`	2	<0.1%
`ch`	0	0%
`vmax`	0	0%

在CSS大小属性中有大量的可用选项。每个单位都有自己的利与弊:有一些适应于响应式布局，有一些适用于打印样式中。大部分都是使用绝对单位 px 和相对单位 % 。必须要指出的时，浏览器对那些更深奥的单位支持度并不普遍。

文本和字体

有一种网格排版，可以帮助网站感觉很清爽，并且更易于阅读。层次有助于设计和用户读取内容。从大量的网站中的样式声明中可以发现，大约有31种不同的字体大小声明。

2014年CSS报告——考察如何使用CSS

每个网站都有相当多的字体大小变量。无法弄清楚有多少字体用于主页或有多少特殊情况用于其他地方。一些漂亮的网站似乎都集中了大约20种字体。我的观点是，一般选择字体大小比较少。它通过加粗来加强设计的凝聚力。这样更易于开发人员和设计人员之间有一个良好的切换过程。

响应式设计

自从2014年 Ethan Marcotte 首次提出响应式设计的概念，到目前为止使用CSS媒体查询制作的响应式设计的网站已席卷了64%的网站。

IE9也开始支持媒体查询，他让你可根据视窗尺寸，方向和高宽比提供不同样式，使用响应式设计更具有意义。

最常见的查询条件是 min-width 或 max-width ，代表了89%的媒体查询。下面是最常见的宽度，让开发者在写样式时有一个较好的参考：

2014年CSS报告——考察如何使用CSS

曲线在 990px 范围最宽，有许多使用的是 960px ， 970px ， 980px ， 990px ， 992px ， 1000px 和 1024px 。其中绿色线表示的领域，代表断点使用较少的。

不同的人选择的在设备上显示的断点是不一样的，这得根据他们自身的选择。但代表智能手机，平板和桌面的断点似乎越来越得到更多人的共识。仅供参考的断点是 768px ， 992px 和 1200px 。而在Bootstrap中默认的断点是智能设略宽度。这里还有一些其他设备下的断点宽度。

框架的使用

常用的框架

框架名称	数量	所占百分比
Bootstrap	918	78.2%
Foundation	177	15.1%
960.gs	55	4.7%
Blueprint	14	1.2%
Gumby	10	0.9%

很难确定使用的框架。我使用搜索文件名，注释和独特的类名，才整理出上面的相关数据。这份报告中有关于框架的使用有点唐突鲁莽，但可以说明的是， Bootstrap 是处于绝对领先地位。大概只有10%的网站可以识别使用了框架。

Assets

通过CSS可以下载特定的资源，通常可以看到的是 background-image 。在我们研究中，下面是最常见的文件格式：

格式	数量	所占百分比	备注
`.png`	46441	77.7%
`.gif`	5669	9.5%
`.svg`	3986	6.7%
`.jpg` 或 `.jpeg`	3550	5.9%
`.htc`	101	1.2%	一个 HTML组件（我不得不查）
`.php`	41	0.1%	脚本中声明
`.cur`	12	<0.1%	自定义手势文件

这些结果是一个好的迹象。 .png 文件在网络上一般建议使用非摄影图像。它提供了alpha透明度，有良好的压缩率和浏览器对其广泛的支持度。我确信 .jpg 文件在网络上越来越普遍，但一般用在 <img> 的 src 属性中，而不是在CSS中使用。

琐事

在的z-index

z-index 值大的惊人，最高的有设置或 9.99e26 。在OS X系统中，黑夜需要3秒时间来压低9的类型。如果你把许多 0.5 毫米的纸片叠在一起，那么其值大约是从地球到太阳的10万亿倍。最糟糕的部分是，这么大的 z-index 值将溢出，而不能按预期的方式工作。最低的值应该小于更为合理。

颜色名称

以下是CSS中用名称指定的颜色： antiquewhite , azure , olive , bisque , aliceblue , lightsteelblue , blueviolet , firebrick , lightskyblue , lightseagreen , darkorange , seashell , ghostwhite , papayawhip , cornsilk , navajowhite 。我最喜欢我是 papayawhip ，让人赏心悦目。

总结

仔细阅读相关数据之后，然做了一些总结：

人们使用CSS较为草率
维护良好的样式规范可以解决很多常见问题
现代的CSS特性被广泛使用

一个公司能做的最好的是有一个对CSS审查的工作（尤其是越来越多的人参与编写CSS时）。这将有助于确定过去的错误，并将工具集成到你的工作流中，以防止错误继续发生。详细可以阅读 CSS审查相关文章。

保持一个有顺序的CSS和保持代码干净是一样的重要，这样更有利于代码的测试。我认为不好的CSS可以延缓开发人员的进度。为了给他们提供更多的时间去专注的做更有意义的事情，应该让你的团队保持CSS的清洁，并且更好的组织你的CSS代码。

本文根据 Alex McPherson 的《 The 2014 CSS Report:Examining how CSS is being used in the wild 》所译，整个译文带有我们自己的理解与思想，如果译得不好或有不对之处还请同行朋友指点。如需转载此译文，需注明英文出处： http://reports.quickleft.com/css 。

正文到此结束