你的位置:首页 > 软件开发 > 网页设计 > 前端代码9种标准最佳实践:CSS

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

发布时间:2016-01-05 09:00:05
前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能。那么接着上一篇,我们再来谈谈CSS代码的一些标准实践。 1,命名和其他语言规范一样,css的命名也讲 ...

前端工程师对写标准的前端代码的重视程度很高。这些最佳标准实践并不是那个权威组织发布的,而是由大量的前端工程师们在实践过程中的经验总结,目的在于提高代码的可读性,可维护性和性能。那么接着上一篇,我们再来谈谈CSS代码的一些标准实践。

 

1,命名

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

不规范的命名:

1 #navigation{2 }3 .demoimage{4 }5 .error_status{6 }
 1 /*css定义顺序以字母序排列;结束用分号;属性名称与值之间添加空格*/ 2 background: fuchsia; 3 border: 1px solid; 4 -moz-border-radius: 4px; 5 -webkit-border-radius: 4px; 6 border-radius: 4px; 7 color: black; 8 text-align: center; 9 text-indent: 2em;10 11 /* http://www.cnblogs.com/sosoft/ */12 /*多个选择器定义时,每个选择器单独占用一行*/13 h1,14 h2,15 h3 {16   font-weight: normal;17   line-height: 1.2;18 }
前端代码9种标准最佳实践:CSS

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

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

1 <!--[if IE 6]>2 <link rel="stylesheet" type="text/css" href="css/ie6.css" />3 <![endif]-->4 <!--[if IE 7]>5 <link rel="stylesheet" type="text/css" href="css/ie7.css" />6 <![endif]-->
 1 /*权重为1*/ 2 div{ 3 } 4 /*权重为10*/ 5 .class1{ 6 } 7 /*权重为100*/ 8 #id1{ 9 }10 /*权重为100+1=101*/11 #id1 div{12 }13 /*权重为10+1=11*/14 .class1 div{15 }16 /*权重为10+10+1=21*/17 .class1 .class2 div{18 }
前端代码9种标准最佳实践:CSS

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

前端代码9种标准最佳实践:CSS
 1 .btn.disabled, 2 .btn[disabled] { 3  cursor: default; 4  background-color: #e6e6e6; 5  background-image: none; 6  opacity: 0.65; 7  filter: alpha(opacity=65); 8  -webkit-box-shadow: none; 9   -moz-box-shadow: none;10      box-shadow: none;11 }12 13 .btn-large {14  padding: 9px 14px;15  font-size: 15px;16  line-height: normal;17  -webkit-border-radius: 5px;18   -moz-border-radius: 5px;19      border-radius: 5px;20 }21 22 .btn-large [class^="icon-"] {23  margin-top: 1px;24 }25 26 .btn-small {27  padding: 5px 9px;28  font-size: 11px;29  line-height: 16px;30 }31 32 .btn-small [class^="icon-"] {33  margin-top: -1px;34 }35 36 .btn-mini {37  padding: 2px 6px;38  font-size: 11px;39  line-height: 14px;40 }
前端代码9种标准最佳实践:CSS

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


原标题:前端代码9种标准最佳实践:CSS

关键词:CSS

CSS
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。