不一样CSS技术性及其CSS特性之间的差别

2021-01-20 12:50 jianzhan

1、为何我要检测CSS的特性

这是情况:

我是OOCSS(译者注:朝向目标CSS)的忠诚粉丝。可是近期工作中,我1直应用Compass,SASS(译者注:SASS使CSS涵数化,有诸如自变量,嵌套循环,混和,承继等特点,需Ruby适用).我有时觉得到OOCSS和SASS好像有点怪异。我的1个盆友把我详细介绍给了Chris Eppstein(Compass的建立者),大家就SASS中的@extend方式开展了讨论。因此我决策建立1个CSS检测网页页面,用1种很原生态态的方法来显示信息是不是SASS的@extend方式和CSS的OOCSS方式之间拥有明显的特性差别。

译者填补,下图为SASS@extend承继完成的示例截图:

有关OOCSS,Nicole Sullivan有份非常好的ppt教案,实际见下面:

Object Oriented CSS

查询更多Nicole Sullivan的presentations.

本想汉语翻译下的,結果此幻灯片被作者设定为不可以免费下载,如果自身汉语翻译并再次制做份幻灯片,是腾不出那末多時间的,因此罢手。其有两个关键标准:

* 分离出来构造和皮肤
* 分离出来器皿和內容

此标准是多少与自身“CSS款式分离出来之再分离出来”1文中提到的1些观念相近。

2、检测怎样工作中的

此检测生产制造了类似2000个box,全部的box都有1个唯一无2的情况(款式)。有几种文件格式用来检测(见下面的连接),你能够逐一变更以检测器速率的差别。要是依据您的意向点一下相应的连接。

此检测用了1小段脚本制作,此段脚本制作来自Steve Souder的博文:Performance Impact of CSS Selectors(CSS挑选器的特性危害)

Steve的文章内容能够说是进到了CSS挑选器特性更细腻的1个境地,十分值得阅读文章。

3、CSS文件格式

1. OOCSS (好像挺快的),双class,如:class="box box-#",基础的CSS款式在class box中,随后直加上情况款式在唯1的class中。

2. Sass @extend (速率不确定性),1个class,如class="box⑶",随后在基础标准上建立1个多挑选器标准,如.box⑴, .box⑵ {generics}

3. 猖狂的CSS 加上全部的基础CSS到1个唯1的class上,沒有“瘦身”。

4. 应用ID挑选器 尽管我不提议应用ID,可是用来检测還是值得1试的。

5. 沒有CSS 很好的底线检测

编码示例?

OOCSS款式:1个主class,包括全部的相互标准,随后1个与众不同的标准应用别的class

拷贝编码
编码以下:

.box {padding:25px;border:1px solid #000;border-radius:5px;}
.box⑴ {background-color:#FFEE00;}
.box⑵ {background-color:#00FFee;}
...

@extend款式:将全部的与众不同class归为1个,逗号隔开的应用公共特性的class目录。

拷贝编码
编码以下:

.box⑴,.box⑵ {padding:25px;border:1px solid #000;border-radius:5px;}
.box⑴ {background-color:#FFEE00;}
.box⑵ {background-color:#00FFEE;}
...

长(肿胀)款式:全部的公共性款式都分离出来到唯一无2的class中。

拷贝编码
编码以下:

.box⑴ {
padding:25px;
border:1px solid #000;
border-radius:5px;
background-color:FFEE00;}
.box⑵ {
padding:25px;
border:1px solid #000;
border-radius:5px;
background-color:00FFEE;}
...

无CSS:有点儿自身解释

4、检测結果

检测結果貌似挺趣味的,让大家看看1些图表好吗?

因此让大家先探讨下CSS特性,这里一些我发现的东东:

  • 类(class)挑选器和ID挑选器基础上是同样的速率
  • SASS/Compass的@extend文件格式仅稍稍落伍于OOCSS文件格式
  • 臃肿的文件格式在绝大多数量级速率比别的文件格式显著要慢
  • 即便是极端化的状况,最好是与最坏的時间差别也在100⑵00毫秒之间

    也有访问器特性要留意的(加分):

    • 大多数数访问器的主要表现大概同样,只是略快1些
    • 火狐是检测的访问器中最慢的
    • Opera3D渲染迅速的CSS最快,3D渲染慢速的CSS最慢

      也有便是我自身检测后的本人结果:

      • OOCSS和@extend文件格式非常快
      • 肿胀的CSS有害特性

        哦,,差点儿忘了,这里是检测网页页面。

        升级:
        在检测中我发现有1些进出,将会危害检测,因此我删掉任何外界引入的文档,和别的将会危害CSS特性的东东(好像text-shadow)。

        //zxx:以上是汉语翻译的所有

        5、简洁明了开溜的结语

        1般来说,1个网页页面的CSS3D渲染高效率的高矮与该网页页面的CSS量有1定的关联。应用应对目标或是我提过的分离出来的观念全是精简CSS,提升CSS特性的非常好的方式。

        汉语翻译工作能力比较有限,假如有甚么禁止确的地区欢迎纠正。
        就这些。