zoukankan      html  css  js  c++  java
  • 2014年CSS报告——考察如何使用CSS

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

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

    浏览器也发生了很多变化,在现代浏览器中使用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.importantfont-weight,bold)870万条记录。这些都保存在Postgres,并为阅读提供了大量的索引。

    总结数据

    属性

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

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

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

    选择器

    最常用的五个选择器 bodytextareah1pre,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%

    Distribution of selector length

    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,以保证浏览器对其正确的渲染。

    许多IDECSS框架在线生成器都可以帮你自动生成浏览器前缀。这样开发者就可以摆脱这种额外的工作与不习惯。如果你想确保哪些属性还需要依赖于前缀来工作,可以通过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%

    大多数都认为rgbrgbahslhsla。他们通常不透明度就是灰度的变体。这也是有道理的,因为其主要优势就是这些格式提供了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种不同的字体大小声明。

    Typographic System Complexity

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

    响应式设计

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

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

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

    响应式设计

    曲线在990px范围最宽,有许多使用的是960px970px980px990px992px1000px1024px。其中绿色线表示的领域,代表断点使用较少的。

    不同的人选择的在设备上显示的断点是不一样的,这得根据他们自身的选择。但代表智能手机,平板和桌面的断点似乎越来越得到更多人的共识。仅供参考的断点是768px992px1200px。而在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值大的惊人,最高的有设置9999999999999999999999999999.99e26。在OS X系统中,黑夜需要3秒时间来压低9的类型。如果你把许多0.5毫米的纸片叠在一起,那么其值大约是从地球到太阳的10万亿倍。最糟糕的部分是,这么大的z-index值将溢出,而不能按预期的方式工作。最低的值应该小于999999更为合理。

    颜色名称

    以下是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

  • 相关阅读:
    1104 Sum of Number Segments (20 分)(数学问题)
    1092 To Buy or Not to Buy (20 分)(hash散列)
    1082 Read Number in Chinese (25 分)(字符串处理)【背】
    1105 Spiral Matrix (25 分)(模拟)
    初识网络安全及搭建网站(内网)
    HTML5开发者需要了解的技巧和工具汇总(转)
    native+web开发模式之web前端经验分享
    移动平台3G手机网站前端开发布局技巧汇总(转)
    Asp.net 中图片存储数据库以及页面读取显示通用方法详解附源码下载
    使用H3Viewer来查看VS2010的帮助文档
  • 原文地址:https://www.cnblogs.com/dsphper/p/4228626.html
Copyright © 2011-2022 走看看