不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的。 ----代码黄金定律
一、前言
在写css时，每次都会遇到是先控制子元素还是先控制父容器；是先把明显的样式写出来（如颜色、背景），还是先控制元素位置等等。自己由于是初学前端，没有什么固定的书写规范，看一些规范性的文档，来规范自己以后的demo。
二、html篇
优先使用语义化的html：对于html的编写，我们应尽量选择语义化的html，什么是语义化的html呢？简单来说就是，使用合适的标签，标记合适的内容。它们可以帮助程序员更好的理解网站中信息的不同方面。但是不要以牺牲实用性为代价。任何时候都要尽量使用最少的标签并保持最小的复杂度。
布尔（boolean）型属性：布尔型属性可以在声明时不赋值。XHTML 规范要求为其赋值，但是 HTML5 规范不需要。
元素的布尔型属性如果有值，就是 true，如果没有值，就是 false。
如果一定要为其赋值的话，请参考 WhatWG 规范：
如果属性存在，其值必须是空字符串或 [...] 属性的规范名称，并且不要在首尾添加空白符。简单来说，就是不用赋值。
对于属性值的命名：应基于功能命名、基于内容命名、基于表现命名，使表达简略、明了，方便阅读html。
常见的属性值命名
.wrap 或 .wrapper -- 用于外侧包裹
.container 或 .ct -- 包裹容器
.header -- 用于头部
.body -- 页面 body
.footer -- 页面尾部
.aside 或 .sidebar -- 用于侧边栏
.content -- 和header footer 对应，用于主要内容
.navigation -- 导航元素
.pagination -- 分页
.tabs > .tab -- tab 切换
.breadcrumbs -- 导航列表、面包屑
.dropdown -- 下拉菜单
.article -- 文章
.main -- 用于主体
.thumbnail -- 头像，小图像
.media -- 媒体资源
.panel -- 面板
.tooltip -- 鼠标放置上去的提示
.popup -- 鼠标点击弹出的提示
.button、.btn -- 按钮
.ad -- 广告
.subnav -- 二级导航
.menu -- 菜单
.tag -- 标签
.message 或 .notice -- 提示消息
.summary -- 摘要
.logo -- logo
.search -- 搜索框
.login -- 登录
.register -- 注册
.username -- 用户名
.password -- 密码
.banner -- 广告条
.copyright -- 版权
.modal 或 .dialog -- 弹窗
三、CSS规范
语法
tab用两个空格表示- css的
:后加个空格，{前加个空格 - 每条声明后都加上分号
; - 换行，而不是放到一行
- 颜色用小写，用缩写,
#fff - 小数不用写前缀,
0.5s->.5s；0不用加单位 - 尽量缩写，
margin: 5px 10px 5px 10px;->margin: 5px 10px;
声明顺序
相关的属性声明应当归为一组，并按照下面的顺序排列：
.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;
}
- Positioning
- Box model
- Typographic
- Visual
- Misc
由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位。盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的 内部 或者是不影响前两组属性，因此排在后面。
简写形式的属性声明：在需要显示地设置所有值的情况下，应当尽量限制使用简写形式的属性声明。常见的滥用简写属性声明的情况:
padding、margin 、font、background、border、border-radius
/* Bad example */
.element {
margin: 0 0 10px;
background: red;
background: url("image.jpg");
border-radius: 3px 3px 0 0;
}
/* Good example */
.element {
margin-bottom: 10px;
background-color: red;
background-image: url("image.jpg");
border-top-left-radius: 3px;
border-top-right-radius: 3px;
}
大部分情况下，我们不需要为简写形式的属性声明指定所有值。例如，HTML 的标题元素只需要设置上、下边距（margin）的值，因此，在必要的时候，只需覆盖这两个值就可以了。0 值表示对浏览器默认值或以前指定的值的覆盖。
过多地使用属性的简写形式会导致代码出现不必要的覆盖和意外的副作用。
参考：编码规范
