做网站的，我们都知道尽量减少请求数，压缩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. 反射消除String类对象的不可变特性

    大家都知道,在JAVA中字符串一旦声明就不可改变,如果尝试修改字符串的内容,将会重新实例化一个新的字符串对象,这也是为了安全性和效率. 由于字符串在程序之中被大量使用,所以JAVA引入了一个字符串常量 ...

  2. Java多线程并发编程之原子变量与非阻塞同步机制

    1.非阻塞算法 非阻塞算法属于并发算法,它们可以安全地派生它们的线程,不通过锁定派生,而是通过低级的原子性的硬件原生形式 -- 例如比较和交换.非阻塞算法的设计与实现极为困难,但是它们能够提供更好的吞 ...

  3. 判断是否联网_检测网络的类型为3G、2G、wap、wifi

    判断是否联网_检测网络的类型为3G.2G.wap.wifi  判断是否联网: /*** * judge Internet is available * * @author wei-spring * @ ...

  4. Git客户端使用

    1.下载安装包 git:  https://git-for-windows.github.io/index.html tortoisegit: https://download.tortoisegit ...

  5. Python：staticmethod vs classmethod

    Being educated under Java background, static method and class method are the same thing. But not so ...

  6. eclipse android sdk javadoc

    sdk 的函数不提示帮助信息 查了下是现在adt版本没有doc文件夹,拷贝了早期的版本docs过来 其他具体操作如下:http://blog.csdn.net/lyh7736362/article/d ...

  7. JLINK烧写BIN文件到nand、norflash、SDRAM

    1. 简要说明 JLink的调试功能.烧写Flash的功能都很强大,但是对于S3C2410.S3C2440的Flash操作有些麻烦:烧写Nor Flash时需要设置SDRAM,否则速率很慢:烧写Nan ...

  8. windows后台服务程序编写

    Windows后台服务程序编写 1. 为什么要编写后台服务程序 工作中有一个程序需要写成后台服务的形式,摸索了一下,跟大家分享. 在windows操作系统中后台进程被称为 service. 服务是一种 ...

  9. service:jmx:rmi:///jndi/rmi

    service:jmx:rmi:///jndi/rmi://ip:9889/jmxrmi http://stackoverflow.com/questions/2768087/explain-jmx- ...

  10. SpringMVC中使用zTree

    1  前端页面 <%@ page language="java" import="java.util.*" pageEncoding="UTF- ...