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 书写规范【转】的更多相关文章

  1. CSS书写规范、命名规范、网易CSS框架NEC

    网易CSS框架NEC:http://nec.netease.com/ NEC框架的CSS规范:  CSS规范 - 分类方法 CSS规范 - 命名规则 CSS规范 - 代码格式 CSS规范 - 优化方案 ...

  2. html和css书写规范

    HTML 规范 分离的标记.样式和脚本 结构.表现.行为分离 在可能情况下验证你的标记 使用编辑器验证你的标记是否正确,一般编辑器都自带有这个功能. 技术不支持的时候使用备胎,如canvas 编码格式 ...

  3. CSS书写规范

    一.CSS书写顺序 1.位置属性(position,top,right,z-index,display,float等) 2.大小(width,height,padding,margin) 3.文字系列 ...

  4. 推荐大家使用的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  5. 分享给大家的CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经 ...

  6. CSS书写规范及顺序

    CSS书写顺序 1.位置属性(position, top, right, z-index, display, float等)2.大小(width, height, padding, margin)3. ...

  7. 推荐大家使用的CSS书写规范及顺序

    @设计达人网 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里我总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文 ...

  8. CSS书写规范、顺序

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,总结一个CSS书写规范.CSS书写顺序供大家参考,这些是参考了国外一些文章以及我的个人经验总 ...

  9. CSS书写规范、顺序和命名规则

    写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体验,这里总结一个CSS书写规范.CSS书写顺序供大家参考   这些是参考了国外一些文章以及我的个 ...

  10. 推荐大家使用的CSS书写规范、顺序(转载)

    转自:http://www.admin10000.com/document/2979.html 写了这么久的CSS,但大部分前端er都没有按照良好的CSS书写规范来写CSS代码,这样会影响代码的阅读体 ...

随机推荐

  1. Oracle 删除数据后释放数据文件所占磁盘空间

    测试的时候向数据库中插入了大量的数据,测试完成后删除了测试用户以及其全部数据,但是数据文件却没有缩小.经查阅资料之后发现这是 Oracle “高水位”所致,那么怎么把这些数据文件的大小降下来呢?解决办 ...

  2. [转]iOS技巧之获取本机通讯录中的内容,解析通讯录源代码

    一.在工程中添加AddressBook.framework和AddressBookUI.framework 二.获取通讯录 1.在infterface中定义数组并在init方法中初始化 ? 1 2 3 ...

  3. cocos2d3.0跑酷代码讲解和源码

    最近在网上看到一个跑酷代码的例子,写的很不错,连接如下 http://www.waitingfy.com/archives/783 现在我把他精简了一下,去除了一些比较简单的特效,着重保留了主角的跳跃 ...

  4. 剑指Offer:面试题14——调整数组顺序使奇数位于偶数前面(java实现)

    问题描述 输入一个整数数组,实现一个函数来调整该数组中数字的顺序,使得所有奇数位于数组的前半部分,所有偶数位于数组的后半部分. 思路: 1.最简单的想法,不考虑时间复杂度,扫描数组,遇到偶数,先取出这 ...

  5. cocos2d-x 3.x丨搭建Android环境下的开发环境

    所需要的一些工具软件: 1.JDK  官网下载地址:http://www.oracle.com/ttechnetwork/java/javase/downloads/index.html 2.Andr ...

  6. Drupal8开发教程:认识.info.yml文件

    YAML 文件是新引入的重要项目文件,在 Drupal 8 中,无论是模块.主题还是安装配置文件,都需要 .info.yml 文件来为其存储项目相关的基础信息. 在 Drupal 中,.info.ym ...

  7. JS实现电子时钟

          目前有个小项目,在首页头部导航栏里需要一个电子时钟的效果,于是我就采用如下代码实现了一个电子时钟的效果.不过不完美,第一种方式容易导致网页莫名其妙的异常,后来觉得可能是做的操作太多了,然后 ...

  8. asp.net中如何绑定combox下拉框数据(调用存储过程)

    #region 绑定类型(商品类型.仓库名称) public void DataType_Bind(int _peoid) { DataTable dt_goodsname = new DataTab ...

  9. IOS异步和多线程操作&&在sqlite3中的应用

    1,数据库I/O操作(异步) 数据库本身是存储在磁盘上.访问和修改数据库,即对磁盘进行读写,即I/O操作. 磁盘属于计算机硬件,具有DMA能力,不需要CPU干预,可以实现异步操作. I/O操作一般是消 ...

  10. 开源安全平台Ossim 4.5系统使用入门(高清视频)

    开源安全平台Ossim 4.5系统使用入门 时长:15分钟 观看地址: http://www.tudou.com/programs/view/Yb0m4vPYlIQ/ 视频截图: 650) this. ...