Css 书写规范【转】
1. 不同浏览器元素的默认属性有所不同,使用Reset可重置浏览器元素的一些默认属性,以达到浏览器的兼容。
/** 清除内外边距 **/
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote,
/* structural elements 结构元素 */
dl, dt, dd, ul, ol, li,
/* list elements 列表元素 */pre,
/* text formatting elements 文本格式元素 */
form, fieldset, legend, button, input, textarea,
/* form elements 表单元素 */
th, td,
/* table elements 表格元素 */
img/* img elements 图片元素 */
{ border:medium none; margin: 0; padding: 0; }
/** 设置默认字体 **/body,button, input, select, textarea
{ font: 12px/1.5 '宋体',tahoma, Srial, helvetica, sans-serif; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; }
em{font-style:normal;} /** 重置列表元素 **/
ul, ol { list-style: none; }
/** 重置超链接元素 **/a
{ text-decoration: none; color:#333;}
a:hover { text-decoration: underline; color:#F40; }
/** 重置图片元素 **/img{ border:0px;}
/** 重置表格元素 **/
table { border-collapse: collapse; border-spacing: 0; }
2. 良好的命名习惯
3. 代码缩写
li{
font-family:Arial, Helvetica, sans-serif;
font-size: 1.2em;
line-height: 1.4em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
}
变成
li{
font: 1.2em/1.4em Arial, Helvetica, sans-serif;
padding:5px 0 10px 5px;
}
4. 利用CSS继承
如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,
让它们继承这些CSS样式。
这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:
#container li{ font-family:Georgia, serif; }
#container p{ font-family:Georgia, serif; }
#container h1{font-family:Georgia, serif; }
#container{ font-family:Georgia, serif; }
5. 使用多重选择器
你可以合并多个CSS选择器为一个,如果他们有共同的样式的话。
这样做不但代码简洁且可为你节省时间和空间。如:
h1{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h2{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
可以合并为
h1, h2, h3{ font-family:Arial, Helvetica, sans-serif; font-weight:normal; }
6. 适当的代码注释
7. 给你的CSS代码排序
如果代码中的属性都能按照字母排序,那查找修改的时候就能更加快速:
/*** 样式属性按字母排序 ***/
div{
background-color:#3399cc;
color:#666;
font:1.2em/1.4em Arial, Helvetica, sans-serif;
height:300px;
margin:10px 5px;
padding:5px 0 10px 5px;
width:30%;
z-index:10;
}
9. 选择更优的样式属性值
CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如
区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
而border:none把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。所以建议使用border:none;
同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。
10. 使用<link>代替@import
首先,@import不属于XHTML标签,也不是Web标准的一部分,它对于较早期的浏览器兼容也不高,并且对于网站的性能有某些负面的影响。具体可以参考《高性能网站设计:不要使用@import》。所以,请避免使用@import
11. 使用外部样式表
这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以,在实际应用中,没有必要把CSS代码内置在HTML文档中:
12. 避免使用CSS表达式(Expression)
CSS表达式是动态设置CSS属性的强大(但危险)方法。
13. 代码压缩
当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor
利用它可精简CSS代码,减少文件大小,以获得更高的加载速度
Css 书写规范【转】的更多相关文章
- CSS书写规范、命名规范、网易CSS框架NEC
网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范: CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...
- html和css书写规范
HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...
- CSS书写规范
一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...
- 推荐大家使用的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- 分享给大家的CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...
- CSS书写规范及顺序
CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...
- 推荐大家使用的CSS书写规范及顺序
@设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...
- CSS书写规范、顺序
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...
- CSS书写规范、顺序和命名规则
写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考 这些是参考了国外一些文章以及我的个 ...
- 推荐大家使用的CSS书写规范、顺序(转载)
转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...
随机推荐
- JavaFX Application应用实例
下面代码演示的是JavaFX进程命令行参数的实例.大家可以参阅一下. /*原文地址:http://www.manongjc.com/article/134.html */ import java.ut ...
- Java - Nested Classes
(本文参考:http://docs.oracle.com/javase/tutorial/java/javaOO/nested.html) Nested Classes class OuterClas ...
- opencv编程解决warning C4003: “max”宏的实参不足
忘了把程序出错的代码附上了,运行修改好的程序才发现的.只好把问题的代码大致写一下了: warning C4003: “min”宏的实参不足 error C2589: “(”:“::”右边的非法标记 e ...
- [工具] 如何利用Notepad++去除重复行
问题: 需要去除重复数据, 例如: 解决方案: 1. 打开notepad++: 2. 如果没有找到"TextFx" 选项, 需要先安装该插件. 依次打开"插件" ...
- mysql中case用法
如上所述,使用case的子句将作为一个字段,方便起见,可以用别名表示.其中,when是case的条件,值为then的表达式值. 参考: http://www.owe-love.com/myspac ...
- 洛谷P1204 [USACO1.2]挤牛奶Milking Cows
P1204 [USACO1.2]挤牛奶Milking Cows 474通过 1.4K提交 题目提供者该用户不存在 标签USACO 难度普及- 提交 讨论 题解 最新讨论 请各位帮忙看下程序 错误 ...
- android Camera使用(一)
现在的App不可避免的要使用到手机的相机功能 首先我们先来介绍下最简单的一个实现方式,启动系统自带的Activity 上代码: public void openCamera() { Intent i= ...
- namespace的用法
C++中采用的是单一的全局变量命名空间.在这单一的空间中,如果有两个变量或函数的名字完全相同,就会出现冲突.当然,你也可以使用不同的名字,但有时我们并不知道另一个变量也使用完全相同的名字:有时为了程序 ...
- linux网卡绑定
- windows svn
1.1Svn和VisualSvn介绍 VisualSvn Server2.5.6(版本控制服务器)免费开源软件 是基于Windows平台上的Subversion服务器,它是免费的 官方下载: http ...