www.22138com「太阳集团游戏」太阳2007娱乐官方网址

欢迎更多朋友与我们www.22138com合作,太阳集团游戏是由安全软件管理软件整合而成的最新安全卫士,其实这是因为目前已经推出了太阳2007娱乐官方网址的新网址,带您体验至尊级享受!。

禁止转载

2019-11-09 14:45 来源:未知

编排越来越好的CSS代码

2014/01/15 · CSS禁止转载。 · 9 评论 · CSS

本文由 伯乐在线 - yanhaijing 翻译。未经许可,禁绝转发!
法语出处:Mathew Carella。接待参加翻译组。

编纂好的CSS代码,有助升高页面包车型地铁渲染速度。本质上,引擎须求剖判的CSS准则越少,品质越好。MDN元帅CSS选拔符归类成八个重视项目,如下所示,质量依次裁减。

  1. ID 规则
  2. Class 规则
  3. 标签法则
  4. 通用法则

对效能的宽广认知是从SteveSouders在2010年出版的《高质量网址建设进级指南》开头,即使该书中陈列的尤其详细,但你也得以在这里翻看完整的援用列表,也得以在Google的《敏捷CSS选用器的一流实践》中查阅越多的细节。

本文小编想共享部分自己在编排高质量CSS中用到的简便例子和指南。那几个都以境遇MDN 编写的高速CSS指南的劝导,并依照相似的格式。

幸免过度限制

一条普及准则,不要增多不须要的牢笼。

CSS

// 糟糕 ul#someid {..} .menu#otherid{..} // 好的 #someid {..} #otherid {..}

1
2
3
4
5
6
7
// 糟糕
ul#someid {..}
.menu#otherid{..}
 
// 好的
#someid {..}
#otherid {..}

 

子孙选拔符最烂

不独质量低下何况代码很虚亏,html代码和css代码严重耦合,html代码结构产生变化时,CSS也得纠正,那是多么不佳,极度是在大厂家里,写html和css的数次不是同一位。

CSS

// 烂透了 html div tr td {..}

1
2
// 烂透了
html div tr td {..}

 

防止链式(交集卡塔尔国接收符

那和过度限定的意况周边,更明智的做法是简约的始建一个新的CSS类选取符。

CSS

// 糟糕 .menu.left.icon {..} // 好的 .menu-left-icon {..}

1
2
3
4
5
// 糟糕
.menu.left.icon {..}
 
// 好的
.menu-left-icon {..}

 

坚持KISS原则

想象大家好似下的DOM:

XHTML

<ul id="navigator"> <li><a href="#" class="twitter">Twitter</a></li> <li><a href="#" class="facebook">Facebook</a></li> <li><a href="#" class="dribble">Dribbble</a></li> </ul>

1
2
3
4
5
<ul id="navigator">
    <li><a href="#" class="twitter">Twitter</a></li>
    <li><a href="#" class="facebook">Facebook</a></li>
    <li><a href="#" class="dribble">Dribbble</a></li>
</ul>

上边是相应的准则……

CSS

// 糟糕 #navigator li a {..} // 好的 #navigator {..}

1
2
3
4
5
// 糟糕
#navigator li a {..}
 
// 好的
#navigator {..}

 

行使复合(紧密卡塔 尔(阿拉伯语:قطر‎语法

尽恐怕接受复合语法。

CSS

// 糟糕 .someclass { padding-top: 20px; padding-bottom: 20px; padding-left: 10px; padding-right: 10px; background: #000; background-image: url(../imgs/carrot.png); background-position: bottom; background-repeat: repeat-x; } // 好的 .someclass { padding: 20px 10px 20px 10px; background: #000 url(../imgs/carrot.png) repeat-x bottom; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
// 糟糕
.someclass {
padding-top: 20px;
padding-bottom: 20px;
padding-left: 10px;
padding-right: 10px;
background: #000;
background-image: url(../imgs/carrot.png);
background-position: bottom;
background-repeat: repeat-x;
}
 
// 好的
.someclass {
padding: 20px 10px 20px 10px;
background: #000 url(../imgs/carrot.png) repeat-x bottom;
}

 

幸免不必要的命名空间

CSS

// 糟糕 .someclass table tr.otherclass td.somerule {..} //好的 .someclass .otherclass td.somerule {..}

1
2
3
4
5
// 糟糕
.someclass table tr.otherclass td.somerule {..}
 
//好的
.someclass .otherclass td.somerule {..}

 

幸免不必要的再次

尽恐怕整合重复的不成方圆。

CSS

// 糟糕 .someclass { color: red; background: blue; font-size: 15px; } .otherclass { color: red; background: blue; font-size: 15px; } // 好的 .someclass, .otherclass { color: red; background: blue; font-size: 15px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 糟糕
 
.someclass {
color: red;
background: blue;
font-size: 15px;
}
 
.otherclass {
color: red;
background: blue;
font-size: 15px;
}
 
// 好的
 
.someclass, .otherclass {
color: red;
background: blue;
font-size: 15px;
}

 

用尽全力精练法规

在上边准则的底工上,你能够更进一层联合不一样类里的重复的准则。

CSS

// 糟糕 .someclass { color: red; background: blue; height: 150px; width: 150px; font-size: 16px; } .otherclass { color: red; background: blue; height: 150px; width: 150px; font-size: 8px; } // 好的 .someclass, .otherclass { color: red; background: blue; height: 150px; width: 150px; } .someclass { font-size: 16px; } .otherclass { font-size: 8px; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// 糟糕
.someclass {
color: red;
background: blue;
height: 150px;
width: 150px;
font-size: 16px;
}
 
.otherclass {
color: red;
background: blue;
height: 150px;
width: 150px;
font-size: 8px;
}
 
// 好的
.someclass, .otherclass {
color: red;
background: blue;
height: 150px;
width: 150px;
}
 
.someclass {
font-size: 16px;
}
 
.otherclass {
font-size: 8px;
}

 

避免不明显的命名约定

最棒应用表示语义的名字。一个好的CSS类名应描述它是怎么着并不是它像什么。

避免 !importants

实则您应有也足以利用其余优异的选取器。

依照八个正经的注脚顺序

就算有部分排列CSS属性顺序科普的点子,上面是本身遵照的生机勃勃种流行艺术。

CSS

.someclass { /* Positioning */ /* Display & Box Model */ /*太阳2007娱乐官方网址, Background and typography styles */ /* Transitions */ /* Other *www.22138com,/ }

1
2
3
4
5
6
7
.someclass {
/* Positioning */
/* Display & Box Model */
/* Background and typography styles */
/* Transitions */
/* Other */
}

 

团伙好的代码格式

代码的易读性和易维护性成正比。上边是自个儿遵照的格式化方法。

CSS

// 不好 .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的 .someclass-a, .someclass-b, .someclass-c, .someclass-d { ... } // 好的做法 .someclass { background-image: linear-gradient(#000, #ccc), linear-gradient(#ccc, #ddd); box-shadow: 2px 2px 2px #000, 1px 4px 1px 1px #ddd inset; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
// 糟糕
.someclass-a, .someclass-b, .someclass-c, .someclass-d {
...
}
 
// 好的
.someclass-a,
.someclass-b,
.someclass-c,
.someclass-d {
...
}
 
// 好的做法
.someclass {
    background-image:
        linear-gradient(#000, #ccc),
        linear-gradient(#ccc, #ddd);
    box-shadow:
        2px 2px 2px #000,
        1px 4px 1px 1px #ddd inset;
}

 

有目共睹,这里只陈说了个别的平整,是自己在自己要好的CSS中,本着更急速和更易维护性而品尝依照的平整。假若您想阅读越来越多的学识,笔者建议阅读MDN上的编纂高效的CSS和Google的优化浏览器渲染太阳集团游戏,指南。

赞 4 收藏 9 评论

至于作者:yanhaijing

www.22138com 1

开拓宝付款 若是不便利捐募,能够访问笔者的博客,给作者带给收入。About Me Ecmascript5中文版 es合集笔者还在此 Q群推荐github 家园threejs 官方群javascript 家园 个人主页 · 小编的稿子 · 1

www.22138com 2

TAG标签: www.22138com CSS
版权声明:本文由太阳集团发布于太阳2007娱乐官方网址,转载请注明出处:禁止转载