编码规范
作为软件开发者，我们可能会接到低等级的小项目，当我们不能就因此写出低质量的代码。不论于个人，团队，公司来说都不是一个有益的方向。所以，如何实施质量保证，是我们需要关注的重要问题，而编码规范则是实施质量保证的第一步。
回顾以前，其实编码规范从一开始到现在都有人在询问这个问题，几乎每个项目，每家公司都会定义自己的编码规范。但每个程序员都有自己的编程习惯，管理者也没有真正去严格要求，所以在真正实施时，却可能并没有正真的按照编码规范去做。有些人可能对编码规范有疑问甚至提出反对，认为其付出和获得并不成比例，并没有必要一定要去做到。我认为，编码规范，在软件构件以及项目管理中，甚至是个人成长方面，都发挥着重要的作用，好的编码规范是提高我们代码质量的最有效的工具之一。
编码规范的作用是什么
-
提高可读性
“任何一个傻瓜都能写出计算机可以理解的代码，唯有写出人类容易理解的代码，才是优先的程序员。”编码规范，帮助我们写出人类容易理解的代码，它为我们提供了最基本的模板，良好的编码风格，使代码具有一定的描述性，可以通过名字来获取一些需要IDE才能得到的提示，如可访问性、继承基类等。 -
统一全局，促进团队协作
开发软件是一个团队活动，而不是个人的英雄主义。编码规范，要求团队成员遵守这一统一的全局决策，这样成员之间可以轻松地阅读对方的代码，所有成员正以一种清晰而一致的风格进行编码。而且，开发人员也可以集中精力关注他们真正应该关注的问题——自身代码的业务逻辑，与需求的契合度等局部问题。 -
有助于知识传递，加快工作交接
风格的相似性，能让开发人员更迅速，更容易理解一些陌生的代码，更快速地理解别人的代码。因为，他和你的代码风格是一样的，你没有必要对他的一些个性化风格进行揣测。这样的好处是开发人员可以很快的接手项目组其他成员的工作，快速完成工作交接。 -
减少名字增生，降低维护成本
在没有规范的情况下，和容易为同一类型的实例起不同的名字。对于以后维护这些代码程序员来说会产生疑惑。
强调变量之间的关系，降低缺陷引人的机会 命名可以表示一定的逻辑关系，是开发人员在使用时保持警惕，从而一定程度上减少缺陷被引人的机会。 -
提高程序员的个人能力
不可否认，每个程序员都应该养成良好的编码习惯，而编码规范无疑是教材之一。从一个程序员的代码本身能看出很多东西。所以，即便是为了自身发展，作为程序员也没有理由抵制这种规则的存在。你可能没有认识到，我们正默默地得益于编码规范。
编写编码规范的一些建议
- 求同存异 不要妄图改变组织的编码习惯，除非有绝对合理的理由，否则还是以民主为主，毕竟你没有权利要求所有人都沿用你的编码习惯。
- 定义编码规范越早越好 也早使用编码规范，也早享受其带来的好处。
- 将规范分为强制部分和推荐部分 求同存异的具体实现。将最基本的规范列放在强制部分，所有成员必须遵守；将好的但不重要的习惯列在推荐部分，开发人员可以根据自己习惯选择是否使用。
- 编码规范不要太长 太长的文档没人看，所有人都一样，除了礼品单和工资单没人愿意看长的东西，所以编码规范必须精炼，最好是只有2~3页，让开发人员可以打印出来随时查看。
- 必须是约定俗成的 规范必须是行业中约定俗成的，不要有什么个性化发挥。
CSS书写规范
- tab 用两个空格表示
- css的 :后加个空格， {前加个空格
- 每条声明后都加上分号
- 换行，而不是放到一行
- 颜色用小写，用缩写, #fff
- 小数不用写前缀, 0.5s -> .5s；0不用加单位
- 尽量缩写， margin: 5px 10px 5px 10px -> margin: 5px 10px
命名技巧
语义化
- 语义化标签优先
- 基于功能命名、基于内容命名、基于表现命名
- 简略、明了、无后患
命名范例
-
所有命名都使用英文小写
推荐：<div class="navbar"></div>
不推荐：<div class="Navbar"></div> -
命名用引号包裹
推荐：<div id="button"></div>
不推荐：<div id=button></div> -
用中横线连接
推荐：<div class="main-left"></div>
不推荐：<div class="mainleft"></div> -
命名体现功能，不涉及表现样式(颜色、字体、边框、背景等)
推荐：<div class="navbar"></div>
不推荐： `<div class="back-yellow"></div>
范例
<!-- 不好 -->
<div class="article">
<div class="article_title">编码规范</div>
<div class="the_content">今天讲的内容是编码规范，讲师
<div class="darkbold">若愚</div> @饥人谷</div>
</div>
<!-- 好 -->
<article>
<h1>编码规范</h1>
<p>今天讲的内容是编码规范，讲师
<b>若愚</b> @饥人谷</p>
</article>
<!-- 不好 -->
<div class="left"></div>
<div class="red"></div>
<div class="s"></div>
<a class="link" href="#"></a>
<!-- 好 -->
<div class="success"></div>
<div class="theme-color"></div>
<a class="login" href="#"></a>
<!-- 好 -->
<article class="movies">...</article>
<article class="news">...</article>
<!-- 不好 -->
<article class="blue">...</article>
<article class="redBg mt30 bigText">...</article>
常见命名
.wrap或.wrapper -- 用于外侧包裹
.container或 .ct -- 包裹容器
.header -- 用于头部
.body -- 页面 body
.footer -- 页面尾部
aside、sidebar -- 用于侧边栏
.content -- 和header footer 对应，用于主要内容
.navigation -- 导航元素
.breadcrumbs -- 导航列表、面包屑
.dropdown -- 下拉菜单
.article -- 文章
.main -- 用于主体
.button、.btn -- 按钮
.ad -- 广告
.subnav -- 二级导航
.menu -- 菜单
.tag -- 标签
.logo -- logo
.search -- 搜索框
.login -- 登录
