一、使用高效是CSS

①:使用外联样式替代行间样式或内嵌样式。

  不推荐使用内联样式:<style></style>

  不推荐使用内嵌样式:<p style=""></p>

  推荐使用外联样式:<link href="">

②:为了兼容老版本的浏览器,建议使用link引入外部样式表的方式替代@import导入样式的方式。@import是css2.1提出来的,所以老的浏览器不支持。

  不推荐@import导入方法:<style type="text/css">@impory url("style.css");</style>

  推荐引入外部样式表方式:<link rel="stylesheet" href="style.css" type="text/css"/>

③:使用继承:将子元素共同使用的样式赋给父元素

④:使用多重选择器:将元素共同使用到的样式写在一起。比如h1,h2,h3,h4样式一样的部分,就写在一起,不要写成4个独立的。

⑤:使用多重声明。不要像下面那种写法,应该写在一起。

  p { margin: 0 0 1em; }
  p { background: #ddd; }
  p { color: #666; }

⑥:使用简记属性。margin:10px 10px;

⑦:避免使用!important,特定情况下可以使用提高权重级别。

二、维护

①:在样式表开头添加一个注释块,用以描述这个样式表的创建日期、 创建者、标记等备注信息.

②:包括公用颜色标记

  /*
  ---------------------------------
  COLORS
  Body background: #def455
  Container background: #fff
  Main Text: #333
  Links: #00600f
  Visited links: #098761
  Hover links: #aaf433
  H1, H2, H3: #960
  H4, H5, H6: #000
  ---------------------------------
  */

③:给ID和Class进行有意义的命名

④:将关联的样式规则进行整合

#header { ... }
#header h1 { ... }
#header h1 img { ... }
#header form { ... }
#header a#skip { ... }
#navigation { ... }
#navigation ul { ... }
#navigation ul li { ... }
#navigation ul li a { ... }
#navigation ul li a:hover { ... }
#content { ... }
#content h2 { ... }
#content p { ... }
#content ul { ... }
#content ul li { ... }
⑤:给样式添加清晰的注释
三、管理整站的CSS文件

①:组件化CSS

②:特定情况下使用条件注释

<!--[if IE]>
<!--[if IE 5]>
<!--[if IE 6]>
<!--[if lt IE 6]>
<!--[if lte IE 6]>
<!--[if gt IE 6]>
<!--[if gte IE 6]>

 

书写高效的CSS的更多相关文章

  1. 如何书写高效的css样式

    如何书写高效的css样式? 有以下四个关键要素: 1.高效的css 2.可维护的css 3.组件化的css 4.hack-free  css 书写高效的css: 1.使用外联样式替代行间样式或内嵌样式 ...

  2. 书写更加高效的CSS,走出误区

    根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数 ...

  3. 高效渲染css

    译自:http://css-tricks.com/efficiently-rendering-css/ 无可否认我并不经常考虑这个问题… 我们书写的CSS的效率如何,浏览器渲染它的速度如何? 浏览器的 ...

  4. 编写高效的CSS选择器

    高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能 ...

  5. [css] 【转载】 精简高效的CSS命名准则/方法

    原文链接:http://www.zhangxinxu.com/wordpress/2010/09/%E7%B2%BE%E7%AE%80%E9%AB%98%E6%95%88%E7%9A%84css%E5 ...

  6. 高效的CSS代码(2)

    ——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><di ...

  7. 编写高效的 CSS 选择器

    高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...

  8. 弄清楚CSS的匹配原理让你写出高效的CSS

    用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS: DIV#divBox p span.red{color:red;} 按习惯我们对这个CSS 的理解是 ...

  9. [转] 编写高效的 CSS 选择器

    高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...

随机推荐

  1. 给 admin 新建的 hdfs 文件的权限

    su hdfs hdfs dfs -chown -R admin /   org.apache.hadoop.security.AccessControlException: Permission d ...

  2. 开始VS 2012中LightSwitch系列的第5部分:我可以使用用户权限来控制访问权吗?

    [原文发表地址]  Beginning LightSwitch in VS 2012 Part 5: May I? Controlling Access with User Permissions [ ...

  3. Backbone源码解析(五):Route和History(路由)模块

    今天是四月十二号,距离上次写博已经将近二十天了.一直忙于工作,回家被看书的时间占用了.连续两个礼拜被频繁的足球篮球以及各种体育运动弄的精疲力竭,所以很少抽时间来写技术博客.今天抽出时间把backbon ...

  4. 如何通过自定义注解实现AOP切点定义

    面向切面编程(Aspect Oriented Programming, AOP)是面向对象编程(Object Oriented Programming,OOP)的强大补充,通过横切面注入的方式引入其他 ...

  5. 【转】EntityFramework(EF)贪婪加载和延迟加载的选择和使用

    原谅:http://www.weixq.cn/Article/Detail/906 贪婪加载:顾名思议就是把所有要加载的东西一 次性读取 using (var context = new MyDbCo ...

  6. 记一个界面刷新相关的Bug

    今天遇到一个比较有意思的bug, 这里简单记录下. Bug的症状是通过拖拉边框把我们客户端主窗口拖小之后,再最大化,会发现窗口显示有问题, 看起来像是刷新问题, 有些地方显示的不对了. 这里要说明的是 ...

  7. android:onClick vs setOnClickListener

    为Android Widgets添加点击事件处理函数又两种方法,一个是在Xml文件中添加onClick属性,然后在代码中添加对应的函数.另一个是直接在代码中添加setOnClickListener函数 ...

  8. NanoProfiler - 适合生产环境的性能监控类库 之 基本功能篇

    背景 NanoProfiler是一个EF Learning Labs出品的免费性能监控类库(即将开源).它的思想和使用方式类似于MiniProfiler的.但是,设计理念有较大差异. MiniProf ...

  9. Redis总结笔记(一):安装和常用命令

    转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/112.html?1455860824 一.redis简单介绍 redis是 ...

  10. 制作Html标签以及表单、表格内容

    制作Html一般用DW(......),Html全称为(Hyper Text Markup Language   超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...