标签：
刚进入前端这行，一直在奋斗中，小公司无人指导，只能慢慢摸索咯！
做什么事情都要有习惯！代码也不例外。（估计很多人都忽略了吧！我也是其中一个0.0 ）
写代码有好的习惯，可以避免许多意想不到的错误。很多人学习时都会忽略，直到把那些错误的习惯用到熟，改起来就困难了。
所以在写代码时你应该好好看看一些细节及规范，不需要一次就记住，通读一遍有个印象，在实战中遇到了就翻一翻，时间长了，就会了嘛。
现在开始整理（个人理解）:
1.代码为什么要有好的代码习惯？
答案当然是方便查找错误，减少出错的几率。
2.html+css要注意的地方有哪些？（建议）
html部分：
1. 页面声明：
以前那么多标准，烦都烦死了，直到html5来了，我喜欢，简单粗暴有内涵。
<!DOCTYPE HTML>
简单吧，直接秒杀4.0，4.1....
2. 把css放到<head>中，避免用@import(因为使用了import之后就相当于把另外的CSS放在了标签的底部)——然而我还没有用到
3. 避免使用css表达式，css表达式只有在IE中有用，他的执行的次数随着页面的缩小、放大和滚动等会有出现变化。
ps：想到了一个相关的知识，用表达式解决的。
问题：去掉点击a标签后产生的虚线框。
解决办法：
body a{outline:none;blr:expression(this.onFocus=this.blur());}
兼容大部分主流浏览器。 详细后面会介绍
4. 语言属性声明。
<html lang="zh-CN">
5. html标签使用小写。（大写不是不能用，但是不方便阅读。经常遇到熟悉的单词大写就不认识了...）
6. 使用utf-8编码。
html中： <meta charset="utf-8">
css中： @charset "utf-8";
7. IE兼容模式
完美解决IE兼容模式代码： <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
8. 用空格代替table制表符。（曾近在日包的学长说过，日本审核很严格，每行都会去看你是不是按了4下空格键，天朝╮(╯▽╰)╭）。
9. 在html中已经声明 自闭合元素(单闭合标签)后的斜杠可以省略，既然可以省略，省略更好，省字节。（双闭合标签千万别省,不然错那都不知道了，经常会因为这些小细节，找一下午，中枪有木有？）
10. 属性定义最好用双引号。(这个看着来)。
11. html5中提到js,css文件引入不需要定义type属性。（能省就省）。
12. 布尔类型声明不赋值，表单常用到。
如：<input type="checkbox" value="1" checked> 中的checked
13. 避免用javascript生成标签（不易查找、编辑且降低性能）。
css部分：
一行代码可以看出许多细节：
/* Bad CSS */
.selector, .selector-secondary, .selector[type=text] {
padding:15px;
margin:0px 0px 15px;
background-color:rgba(0, 0, 0, 0.5);
box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
上部分代码时不建议的写法，下部分的代码时建议的写法。
1. 选择器组合时，将单独的选择器单独放一行。
2. 声明块左括号前应该空一格。
3. 声明块右括号应该单独占一行。
4. 声明语句 ：的后面空一格
5. 多个属性值逗号后面空一格
6. 最后一行属性不要忘记 ; (这个地方我已经中过很多次了，都是在修改时(维护)容易出错。)
7. 零值后面的单位px和0值的起始值省略掉。 如0px=>0 ， 0.5=>.5
8.部分重复颜色值缩写。如#ffffff=>#fff (注意：#00ffac 、#eaeaea 不能乱缩写成#0fac，#eae。别搞错了).
其余要注意的地方：
9. css声明顺序
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
——>脱离文本流属性优先(依次position 、float、display)
——>盒模型属性(尺寸属性)
(width、height、margin、padding、border)
——>其他属性
10. 单行属性规则：
一行属性单独一行，多行属性分行书写
如：
.span1 { width：150px; }
.span2 {
width: 150px;
height: 150px;
}
经常检查错误时会遇到多行写到一起，报第50行出错，多行时就会不明显。
11. 不要使用 “标签+类名”、“标签+ID” 结构，如 a.str ......
可以避免修改页面元素的类型二导致样式失效，如 我把上述a标签改成span标签。结果样式失效了╮(╯▽╰)╭。
12. 不要使用实体引用
比如“>”尽量写成">" (这个==！例子忘记了，不过要小心。)
13.尽量避免后代选择器 也就是“>”。比较耗时 （别人说的...）
好了列了这么多估计都晕了.... 多看看不需要记，写代码留点心，时间长久练成习惯了。
还有许多细节，希望补充...一起学习一起进步
标签：
原文地址：http://www.cnblogs.com/webGeek/p/5074314.html
