[转载]css代码优化的12个技巧
1.ID 规则
2.Class 规则
3.标签规则
4.通用规则
对效率的普遍认识是从Steve Souders在2009年出版的《高性能网站建设进阶指南》开始,虽然该书中罗列的更加详细,但你也可以在这里查看完整的引用列表,也可以在谷歌的《高效CSS选择器的最佳实践》中查看更多的细节。
本文我想分享一些我在编写高性能CSS中用到的简单例子和指南。这些都是受到MDN 编写的高效CSS指南的启发,并遵循类似的格式。
一、避免过度约束
一条普遍规则,不要添加不必要的约束。
ul#someid {..}
.menu#otherid{..}
// 好的
#someid {..}
#otherid {..}
二、后代选择符最烂
不仅性能低下而且代码很脆弱,html代码和css代码严重耦合,html代码结构发生变化时,CSS也得修改,这是多么糟糕,特别是在大公司里,写html和css的往往不是同一个人。
html div tr td {..}
三、避免链式(交集)选择符
这和过度约束的情况类似,更明智的做法是简单的创建一个新的CSS类选择符。
.menu.left.icon {..}
// 好的
.menu-left-icon {..}
四、坚持KISS原则
想象我们有如下的DOM:
<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>
下面是对应的规则……
#navigator li a {..}
// 好的
#navigator {..}
五、使用复合(紧凑)语法
尽可能使用复合语法。
.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;
}
六、避免不必要的命名空间
.someclass table tr.otherclass td.somerule {..}
//好的
.someclass .otherclass td.somerule {..}
七、避免不必要的重复
尽可能组合重复的规则。
.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;
}
八、尽可能精简规则
在上面规则的基础上,你可以进一步合并不同类里的重复的规则。
.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属性顺序常见的方式,下面是我遵循的一种流行方式。
/* Positioning */
/* Display & Box Model */
/* Background and typography styles */
/* Transitions */
/* Other */
}
十二、组织好的代码格式
代码的易读性和易维护性成正比。下面是我遵循的格式化方法。
.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和谷歌的优化浏览器渲染指南。
转自http://www.jb51.net/article/47576.htm
[转载]css代码优化的12个技巧的更多相关文章
- CSS代码优化(转载)
要点1:css代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度:2.便于维护.简化和标准化css代码让css代码减少,便于日后维护:3.让自己 ...
- Sublime Text编辑器的12个技巧和诀窍
本文为您提供Sublime Text编辑器的12个技巧和诀窍,深入挖掘这个看似简洁的代码编辑器,背后所隐藏的实现各种高级功能的无限可能. 1) 选择 以下是一些Sublime Text选择文本的快捷键 ...
- css代码优化
一.CSS代码优化作用与意义 1.减少占用网页字节.在同等条件下缩短浏览器下载css代码时间,相当于加快网页打开速度2.便于维护.简化和标准化css代码让css代码减少,便于日后维护3.让自己写的cs ...
- CSS简写及如何优化技巧
CSS简写就是指将多行的CSS属性简写成一行,又称为CSS代码优化或CSS缩写.CSS简写的最大好处就是能够显著减少CSS文件的大小,优化网站整体性能,更加容易阅读. 下面介绍常见的CSS简写规则: ...
- 高效率、简洁、CSS代码优化原则
高效率.简洁.CSS代码优化原则 CSS学起来并不难,但在大型项目中,一个团队中不同的人在书写CSS风格上也有不同这样这个项目就变得难以管理,团队上就更加难以沟通,为此总结了一些如何实现高效整洁的CS ...
- css选择器顺序的小技巧
在线演示 本地下载 css的选择器的顺序其实很有意思,如果应用的好的话,可以做一些简单的逻辑出来,配合上css3,就可以尽可能的脱离js了. 这里的演示是一个带有hover事件的四张照片,效果来自一个 ...
- PowerDesigner 12小技巧-pd小技巧-pd工具栏不见了-pd修改外键命名规则-pd添加外键
PowerDesigner 12小技巧-pd小技巧-pd工具栏不见了-pd修改外键命名规则-pd添加外键 1. 附加:工具栏不见了 调色板(Palette)快捷工具栏不见了PowerDesigner ...
- 12种CSS BUG解决方法与技巧
一. 针对浏览器的选择器 这些选择器在你需要针对某款浏览器进行css设计时将非常有用. IE6及其更低版本,本文由52CSS.com整理,转载请注明出处! * html {} IE7及其更低版本 *: ...
- CSS兼容性(IE和Firefox)技巧大全
CSS对浏览器的兼容性有时让人很头疼,或许当你了解当中的技巧跟原理,就会觉得也不是难事,从网上收集了IE7,6与Fireofx的兼容性处理技巧并整理了一下.对于web2.0的过度,请尽量用xhtml格 ...
随机推荐
- 20170811 使用Bootstrap框架写个页面
采用Bootstrap-table 做的页面. 1. 增加Query 查询功能,涉及Ajax 来加载页面数据吧! <meta charset="UTF-8"> < ...
- cefglue Flash
用户计算机必须安装Adobe Flash组件才能播放动画,关于这点,找到3个解决方案: 方法一:安装NPAPI版本的Flash组件(非IE版)之后,才能播放动画.访问 http://get.adobe ...
- HBase学习总结(1)
HBase是一种数据库:HadoopDatabase顾名思义就是Hadoop数据库,它是一种基于hadoop文件系统HDFS的一种分布式数据库,专门设计用来快速随机读写大规模数据.本文介绍HBase的 ...
- [py]python的time和datetime模块获取星期几
import time import datetime #今天星期几 today=int(time.strftime("%w")) print today #某个日期星期几 any ...
- np.percentile()
np.percentile(a, q, axis=None, out=None, overwrite_input=False, interpolation='linear', keepdims=Fal ...
- MySQL数据类型--与MySQL零距离接触2-5字符型
CHAR(5) : 存储abc时,由于长度不够,所以abc后面会补充2个空格,也就是abc CHAR 0-255字节 定长字符串 VARCHAR 0-65535 字节 变长字符串 ENUM('valu ...
- 学习erlang书籍 - 转
Here are a few resources:Programming Erlang, by Joe Armstrong. A good book, really teaching you more ...
- Go linux 实践2
今天,看看GO的高级语言特性-方法和接口 废话不多说,直接上代码 ************************************************* 1 package main 2 ...
- Windows Server 2008 安装 10.2.0.5 单实例
需求:Windows Server 2008 安装 10.2.0.5 单实例 原以为非常简单的一次任务,实际却遇到了问题,故记录一下. 1.安装10.2.0.1 2.安装10.2.0.4 3.安装10 ...
- vuex使用一
至于为什么使用vuex在这里就不过多的解释了,直接进入正题 1.vuex的安装 cnpm install vuex -S 2.然后在main.js中引入 import Vue from 'vue' i ...