kphp开源框架分享之高效css样式开发经验总结篇
标签:css样式,css学习,css代码 点击5168次 时间:2016-01-21
css的学习其实并不难,难的是如何合理而且科学的利用css样式为你开发出高效率的网站模板,而作为团队协作的前端开发团队来说,如何对大局观的布局设置是相当重要的,而css的兼容性也是所有开发者都要去考虑和比较头疼的事情。

css的学习其实并不难,难的是如何合理而且科学的利用css样式为你开发出高效率的网站模板,而作为团队协作的前端开发团队来说,如何对大局观的布局设置是相当重要的,而css的兼容性也是所有开发者都要去考虑和比较头疼的事情。下面我们就通过团队开发经验来给大家分享一下我们团队的开发流程和分享一些开发中运用的技巧。

1. 清除文档类型声明中的默认属性,达到各个浏览器的起步统一兼容。
因为现在很多浏览器(如谷歌,IE,Firefox等)的默认属性值是不一样的,要想达到项目代码的兼容性我们必须要清除默认的属性。
代码如下:
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,p,blockquote,th,td,img{margin:0;padding:0;border:medium none;}
table{border-collapse:collapse;border-spacing:0;}
fieldset,img{border:0;}
address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}
ol,ul {list-style:none;}
caption,th {text-align:left;}
h1,h2,h3,h4,h5,h6{font-size:100%;}
q:before,q:after{content:'';}

2. 规范css中class和id命名规则
在前台html页面中我们最常用的还是class属性,而id属性多用于后台和js绑定使用;在class和id命名的时候既要考虑到广泛性又要考虑到准确性。
命名要代码代码块的意思让团队开发者一目了然,不要使用元素的特性(颜色,位置,大小等)来命名一个class或id,以免后期更改出现混乱。
第一、公共使用的属性在设置上要有其实际意义;
如下代码:
.alignleft{float:left;text-align:left;}
.alignright{float:right;text-align:right;}
.clearl{clear:left;text-indent:-9999px;}
.clearr{clear:right;text-indent:-9999px;}
.clear{clear:both;text-indent:-9999px;}
第二、整体设置要有块结构理念有秩序;
比如将一个页面分成header,content,footer三块
如下代码:
.header{}
.content{}
.footer{}

3. css代码缩写
CSS代码缩写可以提高你写代码的速度,精简你的代码量。在CSS里面有不少可以缩写的属性,包括margin,padding,border,font,background和颜色值等,
div{
font-family:Arial;
font-size: 1.2em;
line-height: 1.2em;
padding-top:5px;
padding-bottom:10px;
padding-left:5px;
background-color: #00FF00;
background-image: url(bg.gif);
background-repeat:no-repeat;
background-attachment:fixed ;
}
div{
font: 1.2em/1.4em Arial, Helvetica;
padding:5px 0 10px 5px;
border:1px solid #ff000;
background: #00FF00 url(bg.gif) no-repeat fixed ;
}

4. 利用CSS代码继承
如果页面中父元素的多个子元素使用相同的样式,那最好把他们相同的样式定义在其父元素上,让它们继承这些CSS样式。这样你可以很好的维护你的代码,并且还可以减少代码量。那么本来这样的代码:
.content li{ font-family:Arial, Georgia, serif; }
.content p{ font-family:Arial, Georgia, serif; }
.content  h1{font-family:Arial, Georgia, serif; }
就可以简写成:
.content  { font-family:Arial, 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. 适当的代码注释
代码注释可以让别人更容易读懂你的代码,且合理的组织代码注释,可使得结构更加清晰。你可以选择做的样式表的开始添加目录:
/*------------------------------------
1. Reset
2. Header
3. Content
4. Footer
----------------------------------- */
 
如此你代码的结构就一目了然,你可以容易的查找和修改代码。
而对于代码的主内容,也应适当的加以划分,甚至在有必要的地方在对代码加以注释说明,这样也有利于团队开发:
/** Header **/
.header{ height:145px; position:relative; }
.header h1{ width:324px; margin:45px 0 0 20px; float:left; height:72px;}
/** Content **/
.content{ background:#fff; width:950px; float:left; min-height:600px; overflow:hidden;}
.content h1{color:#F00}/* 设置字体颜色 */
.content .posts{ overflow:hidden; }
.content .recent{ margin-bottom:20px; border-bottom:1px solid #f3f3f3; position:relative; overflow:hidden; }
/** Footer **/
.footer{ clear:both; padding:50px 5px 0; overflow:hidden;}
.footer h4{ color:#b99d7f; font-family:Arial, Helvetica, sans-serif; font-size:1.2em; }

7. 保持CSS代码的可读性
书写可读的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;
}
/*** 所有的样式属性写在同一行 ***/
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; }
 
当对于一些样式属性较少的选择器,我会写到一行:
/*** 选择器属性少的写在同一行 ***/
div{ background-color:#3399cc; color:#666;}
对于这个规则并非硬性规定,但无论您采用哪种写法,我的建议是始终保持代码一致。属性多的分行写,属性少于3个可以写一行。

8. 选择更优的样式属性值
CSS中有些属性采用不同的属性值,虽然达到的效果差不多,当性能上却存在着差异,如
区别在于border:0把border设为0px,虽然在页面上看不见,但按border默认值理解,浏览器依然对border-width/border-color进行了渲染,即已经占用了内存值。
而border:none把border设为“none”即没有,浏览器解析“none”时将不作出渲染动作,即不会消耗内存值。所以建议使用border:none;
同样的,display:none隐藏对象浏览器不作渲染,不占用内存。而visibility:hidden则会。

9. 使用<link>代替@import
首先,@import不属于XHTML标签,也不是Web标准的一部分,它对于较早期的浏览器兼容也不高,并且对于网站的性能有某些负面的影响。

10. 使用外部样式表
这个原则始终是一个很好的设计实践。不单可以更易于维护修改,更重要的是使用外部文件可以提高页面速度,因为CSS文件都能在浏览器中产生缓存。内置在HTML文档中的CSS则会在每次请求中随HTML文档重新下载。所以,在实际应用中,没有必要把CSS代码内置在HTML文档中:
<style type=“text/css” >
.content{  }
.sidebar{  }
</style>
而是使用<link>导入外部样式表:<link rel=“stylesheet” type=“text/css” href=“css/styles.css” />

11. 坚决避免使用CSS表达式(Expression)
CSS表达式是动态设置CSS属性的强大(但危险)方法。Internet Explorer从第5个版本开始支持CSS表达式。下面的例子中,使用CSS表达式可以实现隔一个小时切换一次背景颜色:
background-color: expression( (new Date())。getHours()%2 ? “#FF0040” : “#FF8800” );
如上所示,expression中使用了JavaScript表达式。CSS属性根据JavaScript表达式的计算结果来设置。
表达式的问题就在于它的计算频率要比我们想象的多。不仅仅是在页面显示和缩放时,就是在页面滚动、乃至移动鼠标时都会要重新计算一次。给CSS表达式增加一个计数器可以跟踪表达式的计算频率。在页面中随便移动鼠标都可以轻松达到10000次以上的计算量。
如果必须使用CSS表达式,一定要记住它们要计算成千上万次并且可能会对你页面的性能产生影响。所以,在非不得已,请避免使用CSS表达式。

12. css代码压缩
当你决定把网站项目部署到网络上,那你就要考虑对CSS进行压缩,出去注释和空格,以使得网页加载得更快。压缩您的代码,可以采用一些工具,如YUI Compressor,利用它可精简CSS代码,减少文件大小,以获得更高的加载速度。

最新动态

学习指南:

知识总结: