摘要：常用的选择器会有类选择器和元素选择器，比如说这样的选择器就很常见。我猜，大多数网站都用元素选择器来重置浏览器自带的属性。这些在一些特定的网站中都通常用来设置网站的基本样式，也将导至这些元素选择器至少多次被选中。
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 .h2Grey221个字符 |
| 选择器中包括一个#id占比 | 13.7% |
| 选择器中包括一个.class占比 | 84.1% |
| 选择器中包括一个:pseudo-selector占比 | 20.4% |
| 选择器中包括一个::pseudo-element-selector占比 | 0.3% |
| 选择器中仅使用元素的占比 | 7.5% |
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 6的颜色，而常见的颜色都很可能是灰色。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种不同的字体大小声明。
每个网站都有相当多的字体大小变量。无法弄清楚有多少字体用于主页或有多少特殊情况用于其他地方。一些漂亮的网站似乎都集中了大约20种字体。我的观点是，一般选择字体大小比较少。它通过加粗来加强设计的凝聚力。这样更易于开发人员和设计人员之间有一个良好的切换过程。
响应式设计自从2014年Ethan Marcotte首次提出响应式设计的概念，到目前为止使用CSS媒体查询制作的响应式设计的网站已席卷了64%的网站。
IE9也开始支持媒体查询，他让你可根据视窗尺寸，方向和高宽比提供不同样式，使用响应式设计更具有意义。
最常见的查询条件是min-width或max-width，代表了89%的媒体查询。下面是最常见的宽度，让开发者在写样式时有一个较好的参考：
曲线在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文件在网络上越来越普遍，但一般用在的src属性中，而不是在CSS中使用。
以下是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》所译
译文出处：2014年CSS报告——考察如何使用CSS
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/111031.html
摘要：年，政务云出现了元甚至分中标的乱象。根据中国信息通信研究院中国政务云发展白皮书显示，我国政务云市场规模接近亿元人民币，全国超九成省级行政区和七成地市级行政区均已建成或正在建设政务云平台。2017年，政务云出现了1元甚至1分中标的乱象。先是腾讯云以1分钱中标厦门市政务外网云服务项目，打开了低价中标政务云的先河，随后，中国移动1元钱中标温州政务云项目，低价中标之风迅速刮起。2018年7月，中国电...
摘要：组件成为前端最基本的物料，融合在组件中的方案日趋成熟。组件成为最基本的前端物料，让组件化更彻底在的调研报告中，开发者有愿意继续，有愿意继续。需要留意的是，有表示对感兴趣，因此获得的最感兴趣奖。 简介： JavaScript 应用范围广泛，静态类型语言 TypeScript 会继续得到更多开发者的青睐。 组件成为前端最基本的物料，CSS 融合在组件中(CSS in JS)的方案日趋成熟...
摘要：微软雅黑近日，工信部正式启动针对云计算的十三五规划，将重点培育龙头企业，发挥其对产业发展的辐射作用，打造云计算产业链。云计算十三五规划正式启动据工信部软件服务业司司长陈伟近日透露，工信部针对云计算的十三五规划已经启动。 近日，工信部正式启动针对云计算的十三五规划，将重点培育龙头企业，发挥其对产业发展的辐射作用，打造云计算产业链。在政府机构大力主导信息设备国产化的背景下，实现国产化设备进口替代...
摘要：云计算产业市场涌现年，国务院总理李克强在考察浪潮公司时表示，今后出访国外不仅要推销中国高铁和中国核电，也会向全球市场推荐中国的云计算。中国地区混合云的发展势头将持续高涨。可见与计算在市场中已占有很重要的作用，并在不断上涨。 这是最好的年代，也是最坏的年代，狄更斯在其名着《双城记》中以此名句精炼地概况了风云激荡的法国大革命时期的面貌。实际上，这句话也同样适应目前风起云涌的IT业界。 云计算...
摘要：云计算对安防行业意义重大而对于安防行业来说，随着云计算相关技术的日益成熟，使得其在安防业务的应用规模逐渐扩大。 这是最好的年代，也是最坏的年代。狄更斯在其名着《双城记》中以此名句精炼地概况了风云激荡的法国大革命时期的面貌。实际上，这句话也同样适应目前风起云涌的IT业界。云计算市场机遇涌现 对安防也有重大意义 云计算产业市场涌现 2014年，国务院总理李克强在考察浪潮公司时表示，今后出访...
阅读 3779·2021-10-12 10:11
阅读 3617·2021-09-13 10:27
阅读 2524·2019-08-30 15:53
阅读 1952·2019-08-29 18:33
阅读 2177·2019-08-29 14:03
阅读 972·2019-08-29 13:27
阅读 3290·2019-08-28 18:07
阅读 743·2019-08-26 13:23
