书写高效的CSS
一、使用高效是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的更多相关文章
- 如何书写高效的css样式
如何书写高效的css样式? 有以下四个关键要素: 1.高效的css 2.可维护的css 3.组件化的css 4.hack-free css 书写高效的css: 1.使用外联样式替代行间样式或内嵌样式 ...
- 书写更加高效的CSS,走出误区
根据一些CSS写作经验,如何提高渲染效率及所占用消耗的资源,我们来浅谈一下CSS的渲染效率,书写高效的CSS. 1.十六进制的颜色值对位数与大小写 编写十六进制颜色值时你可能会用小写字母或省略成3位数 ...
- 高效渲染css
译自:http://css-tricks.com/efficiently-rendering-css/ 无可否认我并不经常考虑这个问题… 我们书写的CSS的效率如何,浏览器渲染它的速度如何? 浏览器的 ...
- 编写高效的CSS选择器
高效的CSS已经不是一个新话题,也不是一个我非得重拾的话题,但是,它却是自我在SKY工作以后,真正感兴趣并始终关注的一个话题. 很多人或者忘记了,或者仅仅是没有意识到,CSS可以是高效的也可能导致低能 ...
- [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 ...
- 高效的CSS代码(2)
——阅读笔记,欢迎纠错^_^ 内容比较零散..... 1.让浮动元素的父容器根据元素的高度而自适应高度的方法: <div class="clearfix"><di ...
- 编写高效的 CSS 选择器
高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...
- 弄清楚CSS的匹配原理让你写出高效的CSS
用了这么多年的CSS,现在才明白CSS的真正匹配原理,不知道你是否也跟我一样?看1个简单的CSS: DIV#divBox p span.red{color:red;} 按习惯我们对这个CSS 的理解是 ...
- [转] 编写高效的 CSS 选择器
高效的CSS已经不是一个新的话题了,也不是我一个非得重拾的话题,但它却是我在Sky公司工作之时,所感兴趣的,关注已久的话题. 有很多人都忘记了,或在简单的说没有意识到,CSS在我们手中,既能很高效,也 ...
随机推荐
- 给 admin 新建的 hdfs 文件的权限
su hdfs hdfs dfs -chown -R admin / org.apache.hadoop.security.AccessControlException: Permission d ...
- 开始VS 2012中LightSwitch系列的第5部分:我可以使用用户权限来控制访问权吗?
[原文发表地址] Beginning LightSwitch in VS 2012 Part 5: May I? Controlling Access with User Permissions [ ...
- Backbone源码解析(五):Route和History(路由)模块
今天是四月十二号,距离上次写博已经将近二十天了.一直忙于工作,回家被看书的时间占用了.连续两个礼拜被频繁的足球篮球以及各种体育运动弄的精疲力竭,所以很少抽时间来写技术博客.今天抽出时间把backbon ...
- 如何通过自定义注解实现AOP切点定义
面向切面编程(Aspect Oriented Programming, AOP)是面向对象编程(Object Oriented Programming,OOP)的强大补充,通过横切面注入的方式引入其他 ...
- 【转】EntityFramework(EF)贪婪加载和延迟加载的选择和使用
原谅:http://www.weixq.cn/Article/Detail/906 贪婪加载:顾名思议就是把所有要加载的东西一 次性读取 using (var context = new MyDbCo ...
- 记一个界面刷新相关的Bug
今天遇到一个比较有意思的bug, 这里简单记录下. Bug的症状是通过拖拉边框把我们客户端主窗口拖小之后,再最大化,会发现窗口显示有问题, 看起来像是刷新问题, 有些地方显示的不对了. 这里要说明的是 ...
- android:onClick vs setOnClickListener
为Android Widgets添加点击事件处理函数又两种方法,一个是在Xml文件中添加onClick属性,然后在代码中添加对应的函数.另一个是直接在代码中添加setOnClickListener函数 ...
- NanoProfiler - 适合生产环境的性能监控类库 之 基本功能篇
背景 NanoProfiler是一个EF Learning Labs出品的免费性能监控类库(即将开源).它的思想和使用方式类似于MiniProfiler的.但是,设计理念有较大差异. MiniProf ...
- Redis总结笔记(一):安装和常用命令
转载于:http://www.itxuexiwang.com/a/shujukujishu/redis/2016/0216/112.html?1455860824 一.redis简单介绍 redis是 ...
- 制作Html标签以及表单、表格内容
制作Html一般用DW(......),Html全称为(Hyper Text Markup Language 超文本标记语言) 文本就是平常电脑上的文本文档,只能存储文字,而超文本文档可以存储音乐 ...