成为一个合格的web 前端开发工程师要知道的小事情
CSS规范：
1，命名：
class应优先虑以这元素具体目的来进行命名，应尽量简短且富有含义。
统一采用小写英文字母、数字、“-” 的组合。其中不得包含汉字、空格和特殊字符。
不推荐
.demoimage {} /* "demo" 和 "image" 中间没加 "-" */
不推荐
.error_status {}
推荐
.n-sample {}
原则上，不建议缩写，除非一看就懂的缩写，如nav。
尽量避免使用id来控制样式。
2，选择器：
避免出现过多的祖先选择器，各浏览器会有性能差异，消耗在选择器的时间也不尽相同。
1，尽量最多控制在3级以内。
不推荐
ul.example {}
.example1 .example2 .example3 .example4 {}
推荐
.example {}
.example1,
.example2 {}
2，非必要的情况下不要使用元素标签名和ID或class进行组合
不推荐
ul#example {}
div.error {}
推荐
#example {}
.error {}
3，书写顺序：
同一声明下的属性在书写时，应按功能进行分组，并以 Formatting Model（布局方式、位置） > Box Model（尺寸） > Typographic（文本相关） > Visual（视觉效果） 的顺序书写，以提高代码的可读性。
解释：
Formatting Model 相关属性包括：position / top / right / bottom / left / float / display / overflow 等
Box Model 相关属性包括：border / margin / padding / width / height 等
Typographic 相关属性包括：font / line-height / text-align / word-wrap 等
Visual 相关属性包括：background / color / transition / list-style 等
另外，如果包含 content 属性，应放在最前面。
4，属性简写：
在可以使用缩写的情况下，尽量使用属性缩写。
推荐
.post {
font: 12px/1.5 arial, sans-serif;
}
不推荐
.post {
font-family: arial, sans-serif;
font-size: 12px;
line-height: 1.5;
}
使用 border / margin / padding 等缩写时，应注意隐含值对实际数值的影响，确实需要设置多个方向的值时才使用缩写。
border / margin / padding 等缩写会同时设置多个属性的值，容易覆盖不需要覆盖的设定。如某些方向需要继承其他声明的值，则应该分开设置。
5，0和单位：
省略“0”值后面的单位。不要在0值后面使用单位，除非有值。
不推荐
padding-bottom: 0px;
margin: 0em;
推荐
padding-bottom: 0;
margin: 0;
6，十六进制表示法：
在可能的情况下，使用3个字符的十六进制表示法。
颜色值允许这样表示，3个字符的十六进制表示法更简短。始终使用小写的十六进制数字。
不推荐
color: #FF33AA;
推荐
color: #f3a;
7，带前缀的属性：
当使用特定厂商的带有前缀的属性时，通过缩进的方式，让每个属性的值在垂直方向对齐，这样便于多行编辑。
.selector {
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15);
box-shadow: 0 1px 2px rgba(0,0,0,.15);
}
8，！important：
尽量不使用 !important 声明。当需要强制指定样式且不允许任何场景覆盖时，通过标签内联和 !important 定义样式。
CSS样式与文件命名参考表：
CSS样式命名说明
wrapper页面外围控制整体布局宽度container容器,用于最外层layout布局header页头部分
footer页脚部分、nav主导航、subnav二级导航、menu菜单、submenu子菜单、sidebar侧栏main页面、主体tag、标签msg 、message提示信息、tips小技巧、vote投票、friendlink友情连接、title标题、summary摘要、loginbar登录条、searchInput搜索输入框、hot热门热点、search搜索、search-output搜索输出和搜索结果相似、search-bar搜索条、search-results搜索结果copyright版权信息、branding商标logo网站LOGO标志、joinus加入我们、partner合作伙伴service服务、regsiter注册、arr/arrow箭头、guild指南、sitemap网站地图、list列表、homepage首页、subpage二级页面子页面、tool, toolbar工具条、drop下拉、dorpmenu下拉菜单、status状态、scroll滚动、.tab标签页、.left .right .center居左、中、右、news新闻、download下载、banner广告条(顶部广告条)、products产品、products-prices产品价格products-description产品描述、products-review产品评论、editor-review编辑评论、news-release最新产品、publisher生产商、screenshot缩略图、faqs常见问题、keyword关键词、blog博客、forum论坛
CSS文件命名说明base.css基本共用layout.css布局，版面master.css或style.css主要的module.css模块themes.css主题columns.css专栏font.css文字、字体form.css表单
JavaScript规范：
1，文件命名可读性强：
文件夹、文件的命名与命名空间应能代表代码功能，可读性强。
2，嵌入规则：
Javascript代码应该尽量放在.js格式的文件中，需要调用的时候在页面中以的形式包含进来。Javascript代码若不是该页面专用的，则应尽量避免在页面中直接编写Javascript代码。
3，全局命名空间无法与IIFE：
总是将代码包裹成一个IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域。这一举措可防止全局命名空间被污染。
IIFE 还可确保代码不会轻易被其它全局命名空间里的代码所修改（第三方库，window 引用，被覆盖的未定义的关键字等等）。
// 不推荐
var x = 10,
y = 100;
console.log(window.x + ' ' + window.y);
// 推荐
(function(log, w, undefined){
var x = 10,
y = 100;
console.log((w.x === undefined) + ' ' + (w.y === undefined));
}(window.console.log, window));
无论何时，想要创建一个新的封闭的定义域，那就用 IIFE。它不仅避免了干扰，也使得内存在执行完后立即释放。
所有脚本文件建议都从 IIFE 开始。
立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。
不推荐
(function(){})();
推荐
(function(){}());
如果想引用全局变量或者是外层 IIFE 的变量，可以通过下列方式传参：
(function($, w, d){
$(function() {
w.alert(d.querySelectorAll('div').length);
});
}(jQuery, window, document));
4，引号：
统一使用单引号(‘’)，不使用双引号(“”)。这在创建 HTML 字符串非常有好处：
var msg = 'This is some HTML';
5，变量生命：
总是使用 var 来声明变量。如不指定 var，变量将被隐式地声明为全局变量，这将对变量难以控制。如果没有声明，变量处于什么定义域就变得不清（可以是在 Document 或 Window 中，也可以很容易地进入本地定义域）。所以，请总是使用 var 来声明变量。驼峰命名法。
不推荐
x = 10;
y = 100;
推荐
var x = 10,
y = 100;
6，数组和对象字面量：
用数组和对象字面量来代替数组和对象构造器。数组构造器很容易让人在它的参数上犯错。
不推荐
var a1 = new Array(x1, x2, x3);
var a2 = new Array(x1, x2);
var a3 = new Array(x1);
var a4 = new Array();
正因如此，如果将代码传参从两个变为一个，那数组很有可能发生意料不到的长度变化。为避免此类怪异状况，请总是采用更多可读的数组字面量。
推荐
var a = [x1, x2, x3];
var a2 = [x1, x2];
var a3 = [x1];
var a4 = [];
对象构造器不会有类似的问题，但是为了可读性和统一性，我们应该使用对象字面量。
不推荐
var o = new Object();
var o2 = new Object();
o2.a = 0;
o2.b = 1;
o2.c = 2;
o2['strange key'] = 3;
推荐
var o = {};
var o2 = {
a: 0,
b: 1,
c: 2,
'strange key': 3
};
7，函数声明：
函数应在调用前进行声明，内部函数应在 var 声明内部变量的语句之后声明，可以清晰地表明内部变量和内部函数的作用域。
此外，函数名紧接左括号'('之间，而右括号')'和后面的'{'之间要有个空格，以清楚地显示函数名以其参数部分，和函数体的开始。若函数为匿名 / 无名函数，则 function 关键字和左括号'('之间要留空格，否则可能误认为该函数的函数名为 function。
var innerA = 1;
function outF () {
var innerA = 2;
function _inf () {
alert(‘valueA=’+innerA);
}
_inF();
}
outF ();
_inF();
8，语句块内的函数声明：
切勿在语句块内声明函数，在 ECMAScript 5 的严格模式下，这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。
不推荐
if (x) {
function foo() {}
}
推荐
if (x) {
var foo = function() {};
}
9，流程控制：
if、while、for、do语句的执行体总是用"{"和"}"括起来，即使在其结构体内只有一条语句
if (s==100) {
alert('shit!');
}
不要使用 switch。switch 在所有的编程语言中都是个非常错误的难以控制的语句，建议用 if else 来替换它。
10，操作符：
（1）三元条件判断（if 的快捷方法）
用三元操作符分配或返回语句。在比较简单的情况下使用，避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。
不推荐
if(x === 10) {
return 'valid';
} else {
return 'invalid';
}
推荐
return x === 10 ? 'valid' : 'invalid';
11，注释：
（1）文件注释
文件注释要标明作者、文件版本、创建/修改时间、重大版本修改记录
函数描述
文件版本、创建或者修改时间、功能、作者
/**
* @file Image.js
* @description 功能详细描述
*/
函数或者类等都要添加头描述
/**
* 简述
*
* 功能详细描述
*
* @param arg1 参数1
* @param arg2 参数2，默认为0
* @return 看xxx是否成功
*/
function fooFunction (arg1, arg2) {
}
（2）操作注释
单行注释，写在代码上面
多行注释
/*
* 注释操作说明
*/
for( var i = 0; i < obj.lenght; i++) {
}
