本节向大家介绍三个编写高效整洁CSS代码原则，它们分别是使用Reset但并非全局Reset，良好的命名习惯和使用代码缩写，相信通过本文的学习你对如何编写高效整洁CSS代码有一定的认识。

专注于为中小企业提供做网站、网站建设服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业通江免费做网站提供优质的服务。我们立足成都，凝聚了一批互联网行业人才，有力地推动了近千家企业的稳健成长，帮助中小企业通过网站建设实现规模扩充和转变。

高效整洁CSS代码原则

CSS学起来并不难，但在大型项目中，就变得难以管理，特别是不同的人在CSS代码书写风格上稍有不同，团队上就更加难以沟通，为此总结了一些如何实现高效整洁的CSS代码原则：

1.使用Reset但并非全局Reset

　　不同浏览器元素的默认属性有所不同，使用Reset可重置浏览器元素的一些默认属性，以达到浏览器的兼容。但需要注意的是，请不要使用全局Reset：

viewsourceprint?

 
 
 

  
  
  
*{margin:0;padding:0;} 
  
  
  

 
 
 

　　这不仅仅因为它是缓慢和低效率的方法，而且还会导致一些不必要的元素也重置了外边距和内边距。在此建议参考YUIReset和EricMeyer的做法。我跟EricMeyer的观点相同，Reset并不是一成不变的，具体还需要根据项目的不同需求做适当的修改，以达到浏览器的兼容和操作上的便利性。我使用的Reset如下:

viewsourceprint?

 
 
 

  
  
  
/**清除内外边距**/ 
  
  
  

  
  
  
body,h1,h2,h3,h4,h5,h6,hr,p, 
  
  
  

  
  
  
blockquote,/*structuralelements结构元素*/ 
  
  
  

  
  
  
dl,dt,dd,ul,ol,li,/*listelements列表元素*/ 
  
  
  

  
  
  
pre,/*textformattingelements文本格式元素*/ 
  
  
  

  
  
  
form,fieldset,legend,button,input,textarea,/*formelements表单元素*/ 
  
  
  

  
  
  
th,td,/*tableelements表格元素*/ 
  
  
  

  
  
  
img/*imgelements图片元素*/{ 
  
  
  

  
  
  
border:mediumnone; 
  
  
  

  
  
  
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;} 
  
  
  

 
 
 

 #p#2.良好的CSS代码命名习惯

　　无疑乱七八糟或者无语义命名的CSS代码，谁看了都会抓狂。就像这样的代码：

viewsourceprint?

 
 
 

  
  
  
.aaabb{margin:2px;color:red;} 
  
  
  

 
 
 

　　我想即使是初学者，也不至于会在实际项目中如此命名一个class，但有没有想过这样的CSS代码同样是很有问题的：

viewsourceprint?

 
 
 

  
  
  
MynameisWiky
  
  
  

 
 
 

　　问题在于如果你需要把所有原本红色的字体改成蓝色，那修改后就样式就会变成：

viewsourceprint?

 
 
 

  
  
  
.red{color:bule;} 
  
  
  

 
 
 

　　这样的命名就会很让人费解，同样的命名为.leftBar的侧边栏如果需要修改成右侧边栏也会很麻烦。所以，请不要使用元素的特性（颜色，位置，大小等）来命名一个class或id，您可以选择意义的命名如：#navigation{...}，.sidebar{...}，.postwrap{...}

　　这样，无论你如何修改定义这些class或id的样式，都不影响它跟HTML元素间的联系。

　　另外还有一种情况，一些固定的样式，定义后就不会修改的了，那你命名时就不用担忧刚刚说的那种情况，如

viewsourceprint?

 
 
 

  
  
  
.alignleft{float:left;margin-right:20px;} 
  
  
  

  
  
  
.alignright{float:right;text-align:right;margin-left:20px;} 
  
  
  

  
  
  
.clear{clear:both;text-indent:-9999px;} 
 
 
 

　　那么对于这样一个段落

viewsourceprint?

 
 
 

  
  
  
我是一个段落！

  
  
  

 
 
 

　　如果需要把这个段落由原先的左对齐修改为右对齐，那么只需要修改它的className就为alignright就可以了。#p#

3.CSS代码缩写

　　CSS代码缩写可以提高你写代码的速度，精简你的代码量。在CSS里面有不少可以缩写的属性，包括margin，padding，border，font，background和颜色值等，如果您学会了代码缩写，原本这样的代码：

viewsourceprint?

 
 
 

  
  
  
li{ 
  
  
  

  
  
  
font-family:Arial,Helvetica,sans-serif; 
  
  
  

  
  
  
font-size:1.2em; 
  
  
  

  
  
  
line-height:1.4em; 
  
  
  

  
  
  
padding-top:5px; 
  
  
  

  
  
  
padding-bottom:10px; 
  
  
  

  
  
  
padding-left:5px; 
  
  
  

  
  
  
} 
  
  
  

  
  
  
就可以缩写为： 
  
  
  

  
  
  
viewsourceprint?li{ 
  
  
  

  
  
  
font:1.2em/1.4emArial,Helvetica,sans-serif; 
  
  
  

  
  
  
padding:5px010px5px; 
  
  
  

  
  
  
} 
  
  
  

 
 
 

　　如果您想更了解这些属性要怎么缩写，可以参考《常用CSS缩写语法总结》或者下载CSS-Shorthand-Cheat-Sheet.pdf。

网页标题：编写高效整洁CSS代码三大原则
文章转载：http://www.gawzjz.com/qtweb/news0/184800.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联