首页 > 网页教程 > CSS > 高效CSS开发需要注意的要点以及提升性能的做法

高效CSS开发需要注意的要点以及提升性能的做法

时间:2012-12-11    来源:图灵社区

本文参考了业界规范及主流趋势,详尽整理了CSS开发中需要注意的要点以及关乎性能的一些问题,希望对您有所帮助,也可收藏作为参考。

1. 基本原则

1.1 把CSS放在HTML页面头部

由于浏览器需要在所有的样式表加载完成后才能开始渲染页面,样式表加载完成之前页面会一直显示空白,因此需要将样式表放在头部。

@import 相当于把 标签放在页面的底部,因此从优化性能的角度考虑,应避免使用 @import。

1.2 避免使用 CSS Expressions

Expression 只有 IE 支持,而且他的执行比大多数人想象的要频繁的多。不仅页面渲染和改变大小 (resize) 时会执行,页面滚动 (scroll) 时也会执行,甚至连鼠标在页面上滑动时都会执行。在 expression 里面加上一个计数器就会知道,expression 的执行上相当频繁的。鼠标的滚动很容易就会使 expression 的执行次数超过 10000。

1.3 CSS简写

1.3.1 16进制颜色值简写

/* Not recommended */
   color: #eebbcc;
/* Recommended */
   color: #ebc;

1.3.2 属性值简写

   margin-top: 2px;
   margin-right: 5px;
   margin-bottom: 2em;
   margin-left: 15px;     ----->>     margin: 2px 5px 2em 15px; 
   border-width: 1px;
   border-style: solid;
   border-color: #000     ----->>     border: 1px solid #000 
   font-style: italic;
   font-variant: small-caps;
   font-weight: bold;
   font-size: 1em;
   line-height: 140%;
   font-family: sans-serif;  ----->>  font: italic small-caps bold 1em 140% sans-serief 
   background-color: #f00;
   background-image: url(background.gif);
   background-repeat: no-repeat;
   background-attachment: fixed;
   background-position: 0 0;   ----->>background: #f00 url(background.gif) no-repeat fixed 0 0 
   list-style-type: square;
   list-style-position: inside;
   list-style-image: url(image.gif)  ----->> list-style: square inside url(image.gif) 

1.4 尽量抽取相似部分

   .class1{position: absolute; left: 20px; top: 30px;}
   .class2{position: absolute; left: 20px; top: 30px;}
   .class3{position: absolute; left: 20px; top: 30px;}
   .class4{position: absolute; left: 20px; top: 30px;}
   .class5{position: absolute; left: 20px; top: 30px;}
   .class6{position: absolute; left: 20px; top: 30px;} 
   -------------------->>>>>>> 
   .class1 .class2 .class3 .class4 .class5 .class6{
   Position: absolute; left: 20px; top: 20px;
   }

2. 关键要点

2.1 只使用小写

<!-- Not recommended -->
<A HREF="/">Home</A>
<!-- Recommended -->
<img src="google.png" alt="Google">

2.2 不要有多余的空格(划线处)

<!-- Not recommended -->
<p>What?_
<!-- Recommended -->
<p>Yes please.

2.3 使用utf8编码

html中:

<meta charset="utf-8"> 

css中:

@charset "utf-8";

2.4 使用html5文档类型

<!DOCTYPE html>

2.5 验证HTML与CSS文档

验证HTML
验证CSS

2.6 使文档语义化

<!-- Not recommended -->
<div onclick="goToRecommendations();"<All recommendations</div<
<!-- Recommended -->
<a href="recommendations/">All recommendations</a>

2.7 多媒体(多终端)兼容

<!-- Not recommended -->
<img src="spreadsheet.png">
<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot.">

2.8 不要使用实体引用

<!-- Not recommended -->
   The currency symbol for the Euro is "&eur;".
<!-- Recommended -->
   The currency symbol for the Euro is "€".

2.9 使用带有语义的id和class

/* Not recommended: meaningless */
   #yee-1901 {}
/* Not recommended: presentational */
   .button-green {}
   .clear {}
/* Recommended: specific */
   #gallery {}
   #login {}
   .video {}
/* Recommended: generic */
   .aux {}
   .alt {}

2.10 省略零值的单位

margin: 0;
padding: 0;

2.11 省略起始的零

font-size: .8em;

2.12 尽量避免CSS hacks

尝试换种解决方案

相关推荐
CSS工具之SASS样式开发指南
CSS:清除多余的标签让代码更加有意义
DIV+CSS布局两列右列宽度自适应布局的不同实现方法
CSS排版中常遇到的五个问题及解决办法
CSS网页布局有关中文排版的九个技巧
详解如何用div+css模拟表格对角线
Firefox与IE浏览器在CSS样式表中的差异
加一段代码让IE6支持hover伪类效果
用CSS来控制字符长度和显示长度
CSS代码不同书写风格的优缺点
如何使一个DIV层居中于浏览器中?
正确理解CSS规则的优先级算法
创建高效CSS代码的五个好习惯
最新全面兼容ie6,ie7,ie8,ff的CSS HACK写法
理解CSS的查找匹配原理,打造简洁高效的CSS代码
掌握跨浏览器兼容的CSS代码编写准则
21个令人惊叹的CSS技术(案例)展示
CSS框架到底有那些优点与缺点?
如何使用CSS控制网页打印页面格式?
深入理解CSS的margin属性(外边距)
CSS中30个最常用的选择器,你学会了吗?
CSS进阶:用Margin还是用Padding?
WEB前端开发应该注意的问题8点(原创技巧)
xhtml+css 复杂的视觉效果解决方案与技巧(原创技巧)
CSS新手入门教程:CSS代码编写须注意的八大细节
资深seo利用css样式作弊手法全解
CSS新手教程:30个CSS常见问题的分析及解决方法
10种导致CSS布局页面错乱的解决方法分享
css教程:解决float属性的元素父元素高度不能自适应
CSS教程:清理浮动简洁有效的方式分享
CSS Sprites(CSS精灵)技术及其优化经验分享
IE6下文字或图片神秘消失的原因及解决方法分享
CSS相对定位实现div容器绝对居中的简单方法分享
8种CSS清除浮动的方法优缺点分析
CSS3实现透明边框的方法分享
分析W3C官网超链接交互样式设计与实现方法

精彩推荐

热门教程