摘要
说到开发规范,相信很多人都可能有话要说。对于开发规范,有些人了解,有些人不了解。所以,我们应该时常去看看那些优秀开发人员的代码,这样不但能查漏补缺,而且还能够学习一下他们编写代码时的开发规范。
说到开发规范,相信很多人都可能有话要说。对于开发规范,有些人了解,有些人不了解。所以,我们应该时常去看看那些优秀开发人员的代码,这样不但能查漏补缺,而且还能够学习一下他们编写代码时的开发规范。
不同的公司可能有着不同的开发规范。笔者曾经在网上看到过一家公司的开发规范,洋洋洒洒用word写了好几页,从HTML、CSS到JavaScript等,里面细节之处小到标点符号。从这一点不难看出,这家公司是很注重开发规范的。
常言道:细节决定成败。可能很多程序员对此嗤之以鼻。在他们的心里,也许认为能写出代码才是王道,这一点笔者也不否认。对于大多数公司来说,一个产品做完后,都要进行后期维护。站在长远的角度来讲,遵守开发规范的代码对于后期维护来讲能容易很多。
这个时候,良好的开发规范便显得极为重要。
1、class尽量反映元素用途和目的
- /* bad */
- .red {
- color: #f00;
- }
- /* good */
- .important {
- color: #f00;
- }
2、合理的使用ID
- /* bad */
- #header .logo {
- width: 200px;
- }
- /* good */
- .header .logo {
- width: 200px;
- }
注:书写样式的时候,尽量使用class而不是id,id的权重要高于class,与其进行父子选择器的书写,还不如直接给.logo一个#logo省事。
3、避免使用标签名
- /* bad */
- .header div {
- width: 200px;
- }
- /* good */
- .header .logo {
- width: 200px;
- }
注:这样做的目的是避免标签样式带来潜在问题。某一天我们突然要把这个div改为p,这时,如果忘了修改样式便会造成破版。更重要的一点是,class的解析速度优于标签名。
4、尽量使用缩写属性
- /* bad */
- .nav {
- margin-left: auto;
- margin-top: 0;
- margin-right: auto;
- margin-bottom: 0;
- }
- /* good */
- .nav {
- margin: 0 auto;
- }
5、0后面不带单位
- /* bad */
- .nav {
- margin-left: 0px;
- }
- /* good */
- .nav {
- margin-left: 0;
- }
6、尽量使用子选择器
- /* bad */
- .nav .link {
- padding: 0 10px;
- }
- /* good */
- .nav > .link {
- padding: 0 10px;
- }
注:很多时候,我们不需要进行通用样式,但是我们却会忽略子选择器,进而一定程度上带来性能损失。
7、16进制颜色代码缩写
- /* bad */
- .link {
- color: #333333;
- }
- /* good */
- .link {
- color: #333;
- }
8、去掉小数点前的0
- /* bad */
- .link {
- font-size: 0.8em;
- }
- /* good */
- .link {
- font-size: .8em;
- }
9、连字符尽量使用-
- /* bad */
- .sub_link {
- font-size: 0.8em;
- }
- /* good */
- .sub-link {
- font-size: .8em;
- }