做网站的，我们都知道尽量减少请求数，压缩CSS代码量，使用高效CSS选择符等方式可以来提高网站的载入速度和访问速度，也就是优化网站的性能。

下面分析了一些CSS的书写方式，很多都是我们知道并且正在使用的，这里记录一下，提醒自己以后写CSS的时候尽量从这些方面出发来使用，对于CSS的性能提升有很大的帮助，对于你自己写出来的代码也更加的靠谱了。

本文摘录之“高效CSS开发核心”，一些我认为是已经不需要用规则来约束的就不再啰嗦了，感兴趣的读者可以去看全文。

1.把CSS文件放在<head>中，避免使用@import（因为使用了import之后就相当于把另外的CSS放在了标签的底部）

2.避免使用CSS表达式，CSS表达式只在IE中有用，他执行的次数随着页面的缩小、放大和滚动等都会出现变化。

3.HTML标签使用小写

<!-- Not recommended -->

<A HREF="/">Home</A>

<!-- Recommended -->

<img src="google.png" alt="Google">

4.使用UTF-8编码

html中： <meta charset="utf-8"> css中： @charset "utf-8";

5.不要使用实体引用

比如“>”尽量写成"&gt;"

6.省略零值后面的单位和省掉起始的0值

margin: 0; padding: 0; font-size: .8em;

7.使用高效的CSS选择符

8.避免tag+id或者class+id

button#goButton {...};----->>#goButton .fundation#testIcon {...};----->>#testIcon

9. 关于tag+class

button.indented {...}----->>.button-indented {...}

程序员们经常会给某个 Class 前面加上标签名称（Tag Name），以更精确且快速的定位该节点，但是这样往往效率更差。因为页面上的 class 在全局范围内来讲应该是唯一的，用唯一的 Class 名称来定位一个节点往往比组合定位更加快捷。事实上，这种做法也可以避免由于开发修改页面元素的类型（Tag）而导致的样式失效的情况，做到样式与元素的 分离，两者独立维护。

10. 尽量避免后代选择器

就是说要多用子类选择器这种方式（IE6不支持），“>”

treehead treerow treecell {...} ----->> treehead > treerow > treecell {...}

Descendant 选择器是耗时相对高的选择器，通常来讲，它在 CSS 里的使用应该是尽量避免的，如果能用 child 选择器替代就应该尽量这样去做。

11. 发布之前一定要进行压缩

可使用YUI Compressor或类似软件进行压缩后再发布。

12. 省略嵌入资源的协议

即可避免混合内容问题（mixed content issues）也可以缩减文件大小，这个倒是可以尝试，不过不建议，有些可能看不懂。

<!-- Not recommended -->

<script src="http://www.google.com/js/gweb/analytics/autotrack.js"></script>

<!-- Recommended -->

<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>

/* Not recommended */

.example { background: url(http://www.google.com/images/example); }

/* Recommended */

.example { background: url(//www.google.com/images/example); }

13. 文件结构

我觉得这个倒是可以有，不过如果是项目的话，我怕设计到的CSS文件太多，造成管理不便，如果是内容较少的情况下可以用这种方式。

由于图像等资源一般只有CSS文件使用，故可将图像文件夹放到CSS文件同级目录，这样就可使用相对路径，节省字节数

input {background: url("images/shadow background.gif");}

14. 文件夹命名

这个推荐使用这种方式，不过有一些主题等是习惯了使用复数了，具体情况具体分析，可以使用尽量用下面这种单数。

通常文件夹会被命名为其所代表的资源的复数形式

images assets fonts

其实大可不必，使用单数形式可以节省许多字节，尤其是当每个项目的结构都类似时

img asset font

对于下面一段包含58字节的代码：

input {background: url("/images/shadow background.gif");}

优化后变为52字节，即10%的压缩：

input {background: url(img/shadow-background.gif);}

如果在使用缩写，则可进一步缩减：

input {background: url(img/shadow-bg.gif);}

如果一个项目有几百行这样的代码，那么就会节省几百字节了。如果站点访问量超大，则可节省数目客观的带宽资源。

15. 滤镜简写

selector { -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65); }

filter的版本是IE8以下的，–ms-filter的版本是IE9以上的，YUI会将其压缩为：

selector { -ms-filter:"alpha(opacity=65)"; filter:alpha(opacity=65); }

由于YUI的广泛使用极其社区开发着的强大力量，说明这种写法已经是经过深度测试的写法，可以放心使用。

16 Gzip压缩与CSS书写

这个仁者见仁智者见智，有些人认为从CSS的加载方式（即CSS先确定显示、位置、整体）。

Goolge建议按照字母顺序书写CSS规则，方便维护。其他公司也有自己的规范。从Gzip压缩角度，只要整个文档中的书写顺序保持一致即可，可以提高Gzip压缩比率。

background: fuchsia; border: 1px solid; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px; color: black; text-align: center; text-indent: 2em;

17 更少的请求比更小的尺寸重要

文件可以适当的合并，只保留基本的层级即可

<link rel="stylesheet" href="http://css.somedomain.com/reset.css" type="text/css" />

<link rel="stylesheet" href="http://css.somedomain.com/global.css" type="text/css" />

<link rel="stylesheet" href="http://css.somedomain.com/home.css" type="text/css" />

实际应用中当然不可能做到上面这么多的要点，而且也需要根据项目的差异来做出调整，这里整体上我觉得是可以给我一点启发的，比如不要使用“标签+类名、标签+ID、使用单数的文件结构、把图片放在CSS的同级目录、滤镜的简写、更少的请求

高效CSS开发核心要点摘录的更多相关文章

  1. 自动化高效css开发，畅谈less的灵活变化

    css是一种让html与样式分离解析而出现的代码,它的出现大大提高了程序员的工作效率,和后期进行维护的效率.但是发展至今,由于起死板单调的写法,越来越不能满足程序员们灵活的思维,很多时候是种恨铁不成钢 ...

  2. 35款加速网站开发的 CSS 开发工具

    网络有很很多的 CSS 工具和教程可用,它可以帮助设计人员和开发人员轻松.快速地学习 CSS 技术.这些工具中在高效开发 Web 应用程序中发挥重要作用. 在这篇文章中,我们收集了35个最好的 CSS ...

  3. dubbo核心要点及下载（dubbo二）

    一.dubbo核心要点 1):服务是围绕服务提供方和服务消费方的,服务提供方实现服务,服务消费方调用服务. 2):服务注册 对于服务提供方它需要发布服务,而由于应用系统的复杂性,服务的数量.类型不断的 ...

  4. Java生鲜电商平台-SpringCloud微服务架构中核心要点和实现原理

    Java生鲜电商平台-SpringCloud微服务架构中核心要点和实现原理 说明:Java生鲜电商平台中,我们将进一步理解微服务架构的核心要点和实现原理,为读者的实践提供微服务的设计模式,以期让微服务 ...

  5. 阿里内部资料：Android开发核心知识笔记共2100页，58万字，完整版开放下载

    作为一个3-5年的Android工程师,我们经常会遇到这些瓶颈: 1.技术视野窄长期在小型软件公司,外包公司工作,技术视野被限制的太厉害 2.薪资提升难初中级Android岗位薪资上升空间有限,基本上 ...

  6. electron之Windows下使用 html js css 开发桌面应用程序

    1.atom/electron github: https://github.com/atom/electron 中文文档: https://github.com/atom/electron/tree ...

  7. 2015年最佳的12个 CSS 开发工具推荐

    CSS所能做的就是改变网页的布局.排版和调整字间距等,但编写 CSS 并不是一项容易的任务,当你接触新的 CSS3 属性及其各自的浏览器前缀的时候,你会发现很伤脑经.值得庆幸的是一些优秀的开发人员提供 ...

  8. 【转】精心推荐几款超实用的 CSS 开发工具

    原文转自:http://www.html5cn.org/article-5741-1.html 摘要: 当你开发一个网站或 Web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文 ...

  9. 值得拥有！精心推荐几款超实用的 CSS 开发工具

    当你开发一个网站或 Web 应用程序的时候,有合适的工具,绝对可以帮助您节省大量的时间.在这篇文章中,我为大家收集了超有用的 CSS 开发工具. 对于 Web 开发人员来说,找到有用的 CSS 开发工 ...

随机推荐

  1. [代码]Java后台推送消息到IOS前端

    PayLoad payLoad = new PayLoad(); payLoad.addAlert("test");    //手机端的提示消息 payLoad.addBadge( ...

  2. IE下全局对象报 脚本错误提示“对象不支持此属性或方法”解决方案

    原来是IE会把页面中的元素id可以直接当变量名一样使用,但是这个id变量不能被赋值. 例如: <body id='body'> <script type="text/jav ...

  3. C#核编之X++详解

    重点:当X++单独使用时,就是没有其他符号参与运算,这时X做自增运算,而当X++与其他运算符一起参与运算时,这时的X++因为运算优先级低,所以是最后一个参与运算的,所以看下面代码 ; x=x++;// ...

  4. 浏览器操作html页面的width和height

    原文:http://www.cnblogs.com/dengshunping/archive/2009/06/15/1503803.html IE中: document.body.clientWidt ...

  5. sqlserver 2008 局域网跨服务器T-SQL操作(二)

    --判断是否开启远程操作服务,如果关闭,则开启,用完之后关闭 DECLARE @value SQL_VARIANT SELECT @value=VALUE from sys.configuration ...

  6. SSH框架中一些技巧、处理办法

    1.使用jstree插件时,操作成功直接刷新jstree 该页面(index.jsp)本身使用iframe框架jstree在leftFrame,操作页(add_input.jsp.add_succes ...

  7. 启动程序的c++方法

    #include <Windows.h> void main() { WinExec( "notepad.exe fitdata.txt", SW_SHOW ); // ...

  8. JavaScript总结之鼠标划过弹出div单击出现对话框

    为了满足他们的永无止境的要求,我可谓是任劳任怨啊,累断了双手,看瞎了双眼.这个是来写鼠标划过一个按钮,然后弹出一个小提示框解释,另外根据radio是否选中,判断点击后如何执行,然后执行之后再有一个确认 ...

  9. SQL Server 的 3 种连接

    第一种 1. nested loop: select * from tableA inner join tableB on tableA.X = tableB.X; 它的执行过程是这样的.对于tabl ...

  10. ERS卫星

    http://www.esa.int/Our_Activities/Operations/ERS-2 ERS-2 ROLE Earth observation (EO) LAUNCH DATE 21 ...