前端代码标准最佳实践:CSS

标签: 前端 代码 标准 | 发表时间:2012-08-08 09:54 | 作者:powertoolsteam
出处:http://blog.csdn.net

上一篇《 前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能。那么接着上一篇,我们再来谈谈CSS代码的一些标准实践。

1,命名

和其他语言规范一样,css的命名也讲究命名要有意义,命名要尽可能短但是要足够表达含义;命名的词用连字符连接。

不规范的命名:

#navigation{
}
.demoimage{
}
.error_status{
}


规范的命名:
  
#nav{
}
.demo-image{
}
.error-status{
}

2, css选择器

不同的标签类型尽可能不用相同的css类名;尽可能不用标签类型选择器,用css类名和ID足够定义css,因为ID是可以唯一确定Dom元素的,而css类是不推荐用于不同的标签的;另外应该少用ID选择器定义,因为ID的唯一性使得定义的css无法重用。

不规范定义:

  
ul#menus{
}
div.info{
}


规范定义:

 

  
.main-menus{
}
.info{
}


3,属性名称和值的定义精简

css的某些属性定义可以可以分拆为各个独立项,比如padding,border, margin, background, font等,虽然分拆定义的可读性会好一些,但是就目前的经验来看,前端工程师们对这些常用的css理解程度足够好,合并后的定义不会对可读性带来影响,反而代码更简洁;此外对属性值为0的单位可以省略,在0后面添加入px em cm等单位是毫无意义的;对小数值可以省略小数点前的0;url值两端的引号可以省略。

不规范的定义:


 

规范定义:

 

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
margin: .8em;
background: #00FF00 url(bgimage.gif) no-repeat fixed top;

4,css代码的格式

漂亮统一的代码格式可以提高代码的可读性和可维护性,css的最佳代码格式主要有以下几点:定义顺序以字母序排列,不考虑浏览器前缀;定义以分号结束;属性名称定义的分号后添加一个空格;多个选择器定义时,每个定义单独占一行。

  
/*css定义顺序以字母序排列;结束用分号;属性名称与值之间添加空格*/
background: fuchsia;
border: 1px solid;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
color: black;
text-align: center;
text-indent: 2em;

/*多个选择器定义时,每个选择器单独占用一行*/
h1,
h2,
h3 {
    font-weight: normal;
    line-height: 1.2;
}


5,避免写兼容某个浏览器的css代码

避免写特定浏览器兼容代码,这里说的特定浏览器主要指的是万恶的IE系列浏览器,IE6,7尤为严重。碰到浏览器兼容问题,首先考虑的是能否换一种其它的解决方案,如果没有合适的解决方案,记得单独写一个css文件给这些特定的浏览器,不要把兼容代码和常规代码混合,这样方便代码的维护,如果后期不支持这些老旧浏览器,可以直接删除这些单独的css文件即可。

  
<!--[if IE 6]>
<link rel="stylesheet" type="text/css" href="css/ie6.css" />
<![endif]-->
<!--[if IE 7]>
<link rel="stylesheet" type="text/css" href="css/ie7.css" />
<![endif]-->


6,记住块元素和行内元素的区别,避免写无用的css代码

块级元素显示会独占一行,而行内元素不会独占一行。常见的块级元素有:div p ul ol table h1~h6 等;行内元素有:a em img input label select span strong textarea等。块级元素的display默认样式是block,而行内元素是inline,可以通过重新定义display来互转块级元素和行内元素。但是记住以下的css样式对行内元素是无效的:width height 和垂直方向设置的margin padding,所以避免给行内元素定义这些无用的样式。

7,记住css定义的权重

css的选择器是有权重的,当有多个样式时,权重高的样式会起作用。说一个插曲,前段时间面试了不少前端工程师,问得最多的一个问题就是css权重问题,很可惜的是知道css权重的不多。以下是权重的规则:标签的权重为1,class的权重为10,id的权重为100,以下例子是演示各种定义的权重值:

  
/*权重为1*/
div{
}
/*权重为10*/
.class1{
}
/*权重为100*/
#id1{
}
/*权重为100+1=101*/
#id1 div{
}
/*权重为10+1=11*/
.class1 div{
}
/*权重为10+10+1=21*/
.class1 .class2 div{
}


如果权重相同,则最后定义的样式会起作用,但是应该避免这种情况出现,因为光是靠前后的样式定义来影响最终的样式是不靠谱的,也会给后期的维护埋下一个雷区;另外为了代码的重用性,应尽可能定义小的权重,这和不推荐使用id来定义样式是一样的道理。

8,使用css reset

各个浏览器对不同的标签有其不同的内置的样式,为了使得在不同的浏览器下标签的表现相同,可以定义一个单独的base.css文件,重新定义各种标签的默认样式。另外推荐的css文件组织是:定义一个base.css,用于css reset,定义一个common.css,用于定义各种公用css类。这里有一份base.css,其实是以上提到的base.css和common.css的合并,分享给大家: base.css

9,多组合少继承

这种设计方式越来越受到大家的欢迎,各种前端框架中也能看到大量这样的设计。设计的核心思想是:把css定义中的固定部分和可变部分分开定义,使得代码达到最大程度的重用,这样的结果是增加了元素上添加的css类个数,但是提高了代码的维护性和可读性。如下的例子代码来自bootstrap的按钮样式定义

按钮有一个固定的基础样式btn

  
.btn {
  display: inline-block;
  *display: inline;
  padding: 4px 10px 4px;
  margin-bottom: 0;
  *margin-left: .3em;
  font-size: 13px;
  line-height: 18px;
  *line-height: 20px;
  color: #333333;
  ...
  *zoom: 1;
  -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
     -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
}


在此基础上定义各种按钮的特定样式

  
.btn.disabled,
.btn[disabled] {
  cursor: default;
  background-color: #e6e6e6;
  background-image: none;
  opacity: 0.65;
  filter: alpha(opacity=65);
  -webkit-box-shadow: none;
     -moz-box-shadow: none;
          box-shadow: none;
}

.btn-large {
  padding: 9px 14px;
  font-size: 15px;
  line-height: normal;
  -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
          border-radius: 5px;
}

.btn-large [class^="icon-"] {
  margin-top: 1px;
}

.btn-small {
  padding: 5px 9px;
  font-size: 11px;
  line-height: 16px;
}

.btn-small [class^="icon-"] {
  margin-top: -1px;
}

.btn-mini {
  padding: 2px 6px;
  font-size: 11px;
  line-height: 14px;
}


另外再推荐一下 bootstrap框架,在github中排名第一的前端框架,出自于twitter。

10,雪碧图(css sprite)

这项技术是将多张背景图合并为一张,然后通过设置不同的background-position属性来展示不同的背景。现在越来越多的网站采用这项技术,例如:亚马逊,苹果,Google, YouTube等,我们目前的项目 MSB也部分使用了这些技术。其优点是减少http请求背景图的次数,降低服务器的压力,页面的背景图能同时出现,避免出现空白背景。缺点是不好维护,另外有试验的结果显示会稍微影响渲染的速度,因为要计算position,但是其优点大于缺点,尤其是网站的背景图多的时候。现在也有多个工具可以帮助我们自动合并背景图和生成相应的background-position。

http://spritegen.website-performance.org/

http://csssprites.com/

http://drupal.org/project/sprites

另外,如果你使用的是asp.net来开发网站,可以使用微软开源的一款工具,可以在运行时生成对应的css srite。

具体参考这里: GENERATE CSS SPRITES IN ASP.NET

 

以上就是我认为比较重要CSS标准实践,都是从整体来关注css的标准实践,其实css中细节的的一些最佳实践还有很多,需要具体问题需要具体讨论,目前各个工程师写的css代码多种多样,也比较混乱,也与css代码容易上手并且相同的效果实现方法有多种多样有关。不管语言的灵活性如何,养成一个良好的写代码习惯非常重要,这些需要在实践中不断总结和提高,希望这篇文章能给刚开始学习css的同行们提供一些帮助,在技术的提高过程中少走一些弯路。

作者:powertoolsteam 发表于2012-8-8 9:54:57 原文链接
阅读:6 评论:0 查看评论

相关 [前端 代码 标准] 推荐:

前端代码标准最佳实践:CSS

- - CSDN博客推荐文章
上一篇《 前端代码标准最佳实践:javascript》发表后,大家讨论还是很热烈,从侧面体现了前端工程师对写标准的前端代码的重视程度很高. 这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能. 那么接着上一篇,我们再来谈谈CSS代码的一些标准实践.

最佳实践系列:前端代码标准和最佳实践

- - 博客园_旁观者
最佳实践系列:前端代码标准. @窝窝商城前端(刘轶/李晨/徐利/穆尚)翻译于2012年 版本0.55 @郑昀校对. isobar的这个前端代码标准和最佳实践文档,涵盖了Web应用开发的方方面面,我们翻译了大部分章节,并做了注解. 渐进增强; Combo Handler; Quirks Mode; 浏览器盒子模型; 选择器特殊性; Spacer Image; CSS Sprites; PNG8;.

前端代码规范

- - Web前端 - ITeye博客
1 结构、样式、行为三层分离;. 2 采用统一的缩进(两个或四个空格/Tab);. 3 嵌套标签应当缩进一次,必须合理嵌套;. 4 HTML页面必须包含文档类型声明,采用HTML5文档类型声明;. 5 CSS样式全部采用外链的方式在标签中引入;禁用行内样式,复用已有的样式规则;. 6 所有标签和属性名称必须小写,标签的属性值全部使用双引号,不采用属性简写方式;.

Web 开发指南:前端开发编码标准及最佳实践

- - 博客园_梦想天空
  本文向大家推荐来自 isobar(全球顶级数字公司)的前端开发编码标准和最佳实践. 这份文档涵盖 HTML、CSS 和 JavaScript 编码标准,可访问性,性能优化,浏览器兼容和测试和搜索引擎优化支持等众多内容,下面是全文目录:. 60款很酷的 jQuery 幻灯片演示和下载. 12个很棒的学习 jQuery 的网站推荐.

Web前端:11个让你代码整洁的原则

- - 博客 - 伯乐在线
写Web页面就像我们建设房子一样,地基牢固,房子才不会倒. 同样的,我们制作Web页面也一样,一个良好的HTML结构是制作一个美丽的网站的开始,同样的,良好的CSS只存在同样良好的HTML中,所以一个干净的,语义的HTML的优点很多,那么平时制作中,我们做到了这一点吗. 上图展示了两段代码,我想大家都只会喜欢第一种,我们先不说其语义,至少他的结构让我们看上去清爽,而第二种呢.

[Web] 几个原则让前端代码更整洁

- - 博客园_首页
    在讲解今天的知识点之前,我想先展示两个片段的代码,让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的,需要去改进的.     片段一  1 .     片段二是对片段一的改进,下面就改进点进行详细的讲解.     片段二的第 1 行,添加了代码 .

几个原则让前端代码更整洁

- - CSDN博客研发管理推荐文章
在讲解今天的知识点之前,我想先展示两个片段的代码,让大家看看这两段代码有哪些地方是值得以后的项目实践中需要注意的,需要去改进的.     片段二是对片段一的改进,下面就改进点进行详细的讲解.     片段二的第 1 行,添加了代码 .     编写HTML代码时,首先要使用"DOCTYPE"进行声明,这就像给你的代码以身份,HTML4.0.1或者XHTML1.0或者HTML5都有严格版本或者过度版本,这些都能很好的支持我们写的代码.

程序员,都去写一写前端代码吧

- - 四火的唠叨
文章系本人原创,转载请保持完整性并注明出自 《四火的唠叨》. 你可以认为我是一个极端的人,就像有许多人专注于自己的领域而不屑于其它“肤浅”的工作范畴一样. 比如我见过不少认为做portal没有技术含量的判定,做工程都是充满苦逼行为的言论,最近则还有那些“大数据”崇拜者的疯狂吐槽……我的极端则有些不同,我的极端在于我认为绝大多数优秀的程序员,都要尝试多方面的事情.

前端优化三续:用script存放html代码来减少DOM节点数

- - 博客园_旁观者
前端优化三续:美团的实践——用script存放html代码来减少DOM节点数. 玉伯在《 淘宝详情页的 BigRender 优化与存放大块 HTML 内容的最佳方式》中提到,. 与前面  textarea 存放 html 代码 一样,你也可以 用 script 来存放,目的都是减少 DOM 节点数.

【前端集锦】推荐十款精心挑选的在线 CSS3 代码生成工具

- - 博客园_梦想天空
  今天这篇文章向大家推荐十款非常有用的在线. CSS3 代码生成工具,这些工具能够帮助你方便的生成 CSS3 特效. CSS3 是对 CSS 规范的改善和增强,增加了圆角、旋转、阴影、渐变和动画等众多强大的特性,它使得 Web 开发人员可以很容易的在网站中加入时尚的效果. JavaScript 才能实现的效果,如今只需几句简单的.