规范整合简化

xuqi
Commit 36f4ea9fb07cb0de32feb4afae06f12002f54500 1 parent c9b2846f
Showing 4 changed files with 133 additions and 705 deletions
前端开发相关/代码规范/JS代码规范.md
前端开发相关/代码规范/css-sass代码规范.md
前端开发相关/代码规范/html代码规范.md
前端开发相关/代码规范/通用代码规范.md
--- a/前端开发相关/代码规范/JS代码规范.md
View file @36f4ea9
+++ b/前端开发相关/代码规范/JS代码规范.md
View file @36f4ea9
 # JavaScript代码规范
-## 缩进
-缩进由**4个空格**组成（由于tab在各编辑器和系统之间解析有差异，所以建议使用空格）
-
 ## 行的长度
-每行长度不应该超过**120**个字符，如果一行多余120个字符，应该在一个运算符后换行，下一行增加**2**级缩进，即8个空格）
+每行长度不应该超过**80**个字符，如果一行多余80个字符，应该在一个运算符后换行，下一行增加**2**级缩进，即8个空格）
     doSomething(argument1, argument2, argument3, argument4,
             argument5);
@@ -32,13 +29,20 @@
         var str = 'I am a programer.I love JS and \
                 Node';
+##空行
+* 方法之间添加空行分隔
+* 单行或多行注释前添加空行
+* 逻辑块之间添加空行增加可读性
+
 ## null使用场景
 * 用来初始化一个变量，该变量可能被赋值为一个对象
 * 用来和一个已经初始化的变量比较
 * 当函数的参数期望为对象时，被用作参数传入
 * 当函数的返回值期望是对象时，被用作返回值传出
+
 ## undefined
 禁止使用`name === undefined`判断一个变量是否定义。应该使用`typeof(name) === 'undefined'`;
+
 ## 对象直接量
 * 起始左括号应该与表达式保持一行
 * 每个属性的键名前保持一个缩进，第一个属性应该在左括号后另一起行
@@ -80,19 +84,16 @@
             sex,
             ...
+另外，变量名需要给出注释，否则别人很难读懂接下来代码的意思。
+
 #### 变量术语约定
-* `get/set` 不要和一个字段相连，除非它被定义为私有变量
-* 前缀为`is`的变量名 应该 为布尔值，同理可以为`has`,`can` 或者`should`
-* `compute`作为变量名应为已经计算完成的变量
-* `find`作为变量名应为已经查找完成的变量
-* `initialize`或者`init`作为变量名应为已经实例化（初始化）完成的类或者其他类型的变量
-* UI控制变量应在名称后加控制类型，例如:leftComboBox, topScrollPane
-* 如果变量表示多个实例，必须用复数单词，如：cats
-* 带有 `num` 或者 `count` 开头的变量名约定为数字
-* 重复变量建议使用 `i`, `j`, `k` （依次类推）等名称的变量
-* 能缩写的名称尽量使用缩写。如：prod表示产品
-* 避免产生歧义的布尔变量名称，例如：isNotError, isNotFound为非法
-* 错误类建议在变量名称后加上 `Exception` 或者 `Error`
+变量可以按照一定规则命名也表示某些特定功能，比如：
+
+* is前缀可以表示boolean值
+* num或者count表示计数
+* 错误加上Exception或者Error后缀
+* ...
+
 ### 函数
 * 函数在使用前应该先定义
 * 函数名和开始圆括号之间无空格（包括匿名函数的function关键字与圆括号之间）
@@ -110,22 +111,53 @@
             doSomething();
         };
+另外，IIFE的标准格式也在这里指出：
+
+    (function(args) {
+        //
+    }(args)); //(args)位于外层括号内
+
+其他声明函数需要注意的方面：
+
+* 循环中切勿加入函数，很容易因为闭包的原因造成错误。
+    
+        //BAD
+        for(i = 0; i < 3; i++) {
+            setTimeout(function() {
+                console.log(i);
+          }, 0);
+        }
+
+* “代码块”中切勿加入函数声明，混淆作用域
+        
+        //BAD
+        if (conditions) {
+            function() {
+                //doSomethings
+            }
+        }
+
 ## 命名
 ### 变量：
 * 采用小驼峰命名格式
 * 变量命名为名词（区别函数）
 * 变量中不使用_
+
 ### 常量：
 * 所有字符大写，不同单词之间适用单个下划线隔开
+
 ### 函数：
 * 采用小驼峰命名格式
 * 函数命名为动词（区别变量）
 * 函数名中是使用_
+
 ### 构造函数：
 * 采用大驼峰命名格式
 * 命名应该是名词
+
 ### 私有成员：
 * 一个对象中不希望外部访问的以下划线开头（约定）
+
 ## 表达式
 ### 赋值
 当给变量赋值时，如果右侧是含有比较语句等形式的表达式时，用圆括号包裹
@@ -191,7 +223,8 @@
 #### switch语句
 * 每一个case保持一个缩进，除第一个之外包括default在内的每一个case都应该在之前保留一个空行
-* 每一组语句都应该以break，return等结尾，或者用一行注释表示跳过
+* 每一组语句都应该以break，return等结尾，或者用一行注释表示跳过(falling through)
+* 无default的情况也要注释特别说明
         switch (val) {
             case 1:
@@ -232,6 +265,15 @@
      * date
      */
+函数的说明也采取类似格式：
+
+    /**
+     * 函数功能描述
+     * @param ...
+     * @returns ...
+     */
+附[标签说明](http://usejsdoc.org/)
+
 ### JQuery插件规范
 * 文件命名为jquery.plugin-name.js
 * 所有新方法附加到jquery.fn对象，所有新功能附加到jquery对象
@@ -239,105 +281,4 @@
 * 插件的开头带一个`;`,防止代码合并出现问题
 * 除特殊注明外，所有方法必须返回jquery对象以便于链式调用
 * 使用this.each迭代匹配的元素
-* 在插件代码中使用`JQuery`而不是`$`，减少命名冲突对我们的影响
-
-### 全局命名空间污染与 IIFE
-总是将代码包裹成一个IIFE(Immediately-Invoked Function Expression)，用以创建独立隔绝的定义域，防止全局命名空间被污染。
-
-    //GOOD
-    (function(log, w, undefined){
-      'use strict';
-     
-      var x = 10,
-          y = 100;
-     
-      // Will output 'true true'
-      log((w.x === undefined) + ' ' + (w.y === undefined));
-     
-    }(window.console.log, window));
-
-    //BAD
-    var x = 10,
-    y = 100;
-    // Declaring variables in the global scope is resulting in global scope pollution. All variables declared like this
-    // will be stored in the window object. This is very unclean and needs to be avoided.
-    console.log(window.x + ' ' + window.y);
-
-立即执行的函数表达式的执行括号应该写在外包括号内。虽然写在内还是写在外都是有效的，但写在内使得整个表达式看起来更像一个整体，因此推荐这么做。like: `(function(){}());`。
-so，用下列写法来格式化你的 IIFE 代码：
-
-    (function(){
-      'use strict';
-     
-      // Code goes here
-     
-    }());
-
-如果你想引用全局变量或者是外层 IIFE 的变量，可以通过下列方式传参：
-
-    (function($, w, d){
-      'use strict';
-     
-      $(function() {
-        w.alert(d.querySelectorAll('div').length);
-      });
-    }(jQuery, window, document));
-
-### 严格模式
-use strict;
-
-### 语句块内的函数声明
-切勿在语句块内声明函数，在 ECMAScript 5 的严格模式下，这是不合法的。函数声明应该在定义域的顶层。但在语句块内可将函数申明转化为函数表达式赋值给变量。
-
-    //BAD
-    if (x) {
-      function foo() {}
-    }
-    //GOOD
-    var foo;
-    if (x) {
-      foo = function() {};
-    }
-
-### 标准特性
-总是优先考虑使用标准特性。从性能、扩展性、兼容性方面考虑，总是首选标准的特性（e.g.：首选 string.charAt(3) 而不是 string[3]）。
-
-### 切勿在循环中创建函数
-在简单的循环语句中加入函数是非常容易形成闭包而带来隐患的
-
-    //GOOD
-    (function(log, w){
-      'use strict';
-      //
-      var numbers = [1, 2, 3],
-          i;
-     
-      numbers.forEach(function(number, index) {
-        w.setTimeout(function() {
-          w.alert('Index ' + index + ' with number ' + number);
-        }, 0);
-      });
-     
-    }(window.console.log, window));
-
-    //BAD
-    (function(log, w){
-      'use strict';
-      //
-      var numbers = [1, 2, 3],
-          i;
-     
-      for(i = 0; i < numbers.length; i++) {
-        w.setTimeout(function() {
-          w.alert('Index ' + i + ' with number ' + numbers[i]);
-        }, 0);
-      }
-     
-    }(window.console.log, window));
-
-
-### this
-限制this使用场景
-
-* 在构造函数中
-* 在对象的方法中（包括由此创建出的闭包内）
+* 在插件代码中使用`JQuery`而不是`$`，减少命名冲突对我们的影响
--- a/前端开发相关/代码规范/css-sass代码规范.md
View file @36f4ea9
+++ b/前端开发相关/代码规范/css-sass代码规范.md
View file @36f4ea9
 # css / sass代码规范
-## id和class命名
-id和class总是使用可以反应元素目的和用途的名称，或其他通用名称。而不使用表象或者晦涩难懂的名称。
-
-    //GOOD
-    .heavy {
-        font-weight: 800;
-    }
-     
-    .important {
-        color: red;
-    }
-
-    //BAD
-    .fw-800 {
-        font-weight: 800;
-    }
-     
-    .red {
-        color: red;
-    }
-
-## 合理的避免使用id
-一般情况下id不应该被应用于样式，id选择器权重很高，样式很难被覆盖
-
-    //GOOD
-    .content .title {
-        font-size: 2em;
-    }
-
-    //BAD
-    #content .title {
-        font-size: 2em;
+## 选择器
+* 使用class进行样式匹配，而不是id和标签
+* 避免使用属性选择器，会影响浏览器性能
+* 控制选择器长度，每个组合应该控制在3个以内
+* 尽可能精确的元素定位
+
+## 规则细节
+
+    .ele-header,  /*规则1：每个选择器声明总是使用新的一行*/
+    .ele-body,
+    .ele-footer {   /*规则2：'{' 前需要添加1个空格*/
+        line-height: 1.2; /*规则3；样式声明以;结束，每个样式声明独占一行*/
+        font-weight: normal;  /*规则4：属性声明的:后添加1个空格*/
+        margin: 0;  /*规则5：属性值为0时不添加单位*/
+        background-color: #f3d; /*规则6：十六进制小写和缩写*/
+    }
+    /*规则7：没组选择器声明之间适用一空行间隔*/
+    .ele2 {
+        font-family: "open sans", arial, sans-serif; /*规则8：使用" "，而不是' '*/ 
+        padding: 0 1em 2em; /*规则9：适当缩写但不滥用*/
+        border-top: 1px;
+        background-color: rgba(0,0,0,.5); /*规则10：颜色值rgba等中不需要增加空格，并且去除浮点数前面不必要的0*/
     }
-## CSS选择器中避免标签名
-当构建选择器时应该使用清晰、准确和有语义的class名，而不使用标签选择器。从分离的角度考虑,在表现层中不应该分配html标记/语义。
-
-    //GOOD
-    .content > .content-header > .title {
-        font-size: 2em;
-    }
-
-    //BAD
-    div.content > header.content-header > h2.title {
-        font-size: 2em;
-    }
-
-## 尽可能的精确
-很多前端开发人员写选择器链的时候不使用直接子选择器（区别于后代选择器）。有时，这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而，在任何情况下，这是一个非常不好的做法。如果你不写很通用的，需要匹配到DOM末端的选择器， 你应该总是考虑直接子选择器。
-
-## 缩写属性
-CSS提供了各种缩写属性（如 font 字体）应该尽可能使用，即使在只设置一个值的情况下。使用缩写属性对于代码效率和可读性是有很有用的。
-
-    //GOOD
-    border-top: 0;
-    font: 100%/1.6 palatino, georgia, serif;
-    padding: 0 1em 2em;
-
-    //BAD
-    border-top-style: none;
-    font-family: palatino, georgia, serif;
-    font-size: 100%;
-    line-height: 1.6;
-    padding-bottom: 2em;
-    padding-left: 1em;
-    padding-right: 1em;
-    padding-top: 0;
-
-## 0和单位
-省略“0”值后面的单位。不要在0值后面使用单位，除非有值。
-    
-    //GOOD
-    padding-bottom: 0;
-    margin: 0;
-
-    //BAD
-    padding-bottom: 0px;
-    margin: 0em;
-
-## 十六进制表示法
-始终使用**小写**以及**简写**的十六进制数字
-
-    //GOOD
-    color: #f3a;
-
-    //BAD
-    color: #FF33AA;
-
-## id和class名的分隔符
-使用连字符（`-`）分隔id和class名中的单词。
-
-    //GOOD
-    .video-id {}
-    .ads-sample {}
-
-    //BAD
-    .demoimage {}
-    .error_status {}
-
 ## 声明顺序
 这是一个选择器内书写CSS属性顺序的大致轮廓，作为最佳实践，我们应该遵循以下顺序：
-1. 结构性属性：
-    display,
-    position, left, top, right,
-    overflow, float, clear,
-    margin, padding
-    ...
-2. 表现性属性：
-    background, border,
-    font, text
-    ...
-   
-        //GOOD
-        .box {
-            display: block;
-            position: absolute;
-            left: 30%;
-            right: 30%;
-            overflow: hidden;
-            margin: 1em;
-            padding: 1em;
-            background-color: #eee;
-            border: 3px solid #ddd;
-            font-family: 'Arial', sans-serif;
-            font-size: 1.5rem;
-            text-transform: uppercase;
-        }
+* Position属性 (position,top,right,z-index...)
+* Box Model属性 (display,float,width...)
+* Typographic属性 (font,line-height,color,text-align...)
+* Visual属性 (background,border,border-radius...)
-## 声明结束
-为了保证一致性和可扩展性，每个声明应该用分号结束，每个声明换行。
+因为Position属性可以是一个元素脱离正常的文本流并可以覆盖盒模型相关样式，所以Position排第一位。盒模型决定一个元素位置和大小紧跟其后。后面属性属于元素内部或不会对前两者产生影响的，排在后面。
-    //GOOD
-    .test {
-        display: block;
-        height: 100px;
-    }
-
-    //BAD
-    .test {
-        display: block; height: 100px
-    }
-
-## 属性名结束
-属性名的冒号后使用一个空格。出于一致性的原因，属性和值（但属性和冒号之间没有空格）的之间始终使用一个空格。
-
-    //GOOD
-    h3 {
-        font-weight: bold;
-    }
-
-    //BAD
-    h3 {
-        font-weight:bold;
-    }
-
-## 选择器和声明分离
-每个选择器和属性声明总是使用新的一行。
-
-    //GOOD
-    h1,
-    h2,
-    h3 {
-        font-weight: normal;
-        line-height: 1.2;
-    }
-    //BAD
-    a:focus, a:active {
-        position: relative; top: 1px;
-    }
+完整属性顺序参考[Recsss](http://twitter.github.com/recess)
-## 规则分隔
-规则之间始终有一个空行分隔。
+## 媒体查询
+媒体查询的位置靠近他们相关的规则。
     //GOOD
-    html {
-      background: #fff;
-    }
-     
-    body {
-      margin: auto;
-      width: 50%;
+    @media (min-width: 480px) {
+        .media-element {
+            //some attr
+        }
     }
-## CSS引号
-属性选择器或属性值用双引号（""），而不是单引号（''）括起来。URI / URL不要使用引号。
+## 前缀属性
+使用前缀属性时，通过缩进使取值垂直对齐。
     //GOOD
-    @import url(//cdn.com/foundation.css);
-     
-    html {
-      font-family: "open sans", arial, sans-serif;
-    }
-     
-    body:after {
-      content: "pause";
-    }
-
-    //BAD
-    @import url('//cdn.com/foundation.css');
-     
-    html {
-      font-family: 'open sans', arial, sans-serif;
-    }
-     
-    body:after {
-      content: 'pause';
+    .selector {
+        -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.5);
+                box-shadow: 0 1px 2px rgba(0,0,0,.5); 
     }
 -----------------------------------------------------------------------
-## SASS嵌套规则
+## SASS规则
 ### 选择器嵌套
-在Sass中你可以嵌套选择器，这可以使代码变得更清洁和可读。嵌套所有的选择器，但尽量避免嵌套没有任何内容的选择器。如果你需要指定一些子元素的样式属性，而父元素将不使用什么样式属性，可以使用常规的CSS选择器链。
+避免不必要的嵌套。只有在需要给父元素增加样式并且有多个子元素时才考虑嵌套
     //GOOD
     .content {
@@ -239,112 +85,13 @@ CSS憬改 font 摮砲撠賢雿輻嚗雿
     //GOOD
     .content {
         display: block;
-       
+        //SPACE HERE
         > .news-article {
             background-color: #eee;
-         
-            > .title {
-                font-size: 1.2em;
-            }
-         
-            > .article-footnote {
-                font-size: 0.8em;
-            }
-        }
-    }
-
-### 上下文媒体查询
-在Sass中，当你嵌套你的选择器时也可以使用上下文媒体查询，你可以在任何给定的嵌套层次中使用媒体查询。
-
-    //GOOD
-    .content-page {
-      font-size: 1.2rem;
-     
-      @media screen and (min-width: 641px) {
-        font-size: 1rem;
-      }
-     
-      > .main {
-        background-color: whitesmoke;
-     
-        > .latest-news {
-          padding: 1rem;
-     
-          > .news-article {
-            padding: 1rem;
-     
-            > .title {
-              font-size: 2rem;
-     
-              @media screen and (min-width: 641px) {
-                font-size: 3rem;
-              }
-            }
-          }
-        }
-     
-        > .content {
-          margin-top: 2rem;
-          padding: 1rem;
-        }
-      }
-     
-      > .page-footer {
-        margin-top: 2rem;
-        font-size: 1rem;
-     
-        @media screen and (min-width: 641px) {
-          font-size: 0.8rem;
-        }
-      }
-    }
-
-    //BAD 
-    .content-page {
-      font-size: 1.2rem;
-     
-      > .main {
-        background-color: whitesmoke;
-     
-        > .latest-news {
-          padding: 1rem;
-     
-          > .news-article {
-            padding: 1rem;
-     
-            > .title {
-              font-size: 2rem;
-            }
-          }
-        }
-     
-        > .content {
-          margin-top: 2rem;
-          padding: 1rem;
-        }
-      }
-     
-      > .page-footer {
-        margin-top: 2rem;
-        font-size: 1rem;
-      }
-    }
-     
-    @media screen and (min-width: 641px) {
-      .content-page {
-        font-size: 1rem;
-     
-        > .main > .latest-news > .news-article > .title {
-          font-size: 3rem;
-        }
-     
-        > .page-footer {
-          font-size: 0.8rem;
         }
-      }
     }
-### 嵌套顺序和父级选择器
+### 嵌套顺序
 当使用Sass的嵌套功能的时候，重要的是有一个明确的嵌套顺序，以下内容是一个scss块应具有的顺序：
 1. 当前选择器的样式属性
--- a/前端开发相关/代码规范/html代码规范.md
View file @36f4ea9
+++ b/前端开发相关/代码规范/html代码规范.md
View file @36f4ea9
 # HTML代码规范
-## 文档类型
-使用 HTML5 的文档类型声明： <!DOCTYPE html>。建议使用 text/html 格式的 HTML。避免使用 XHTML。XHTML 以及它的属性，比如 application/xhtml+xml 在浏览器中的应用支持与优化空间都十分有限。
-
-HTML 中最好不要将无内容元素的标签闭合，例如：使用 <br> 而非 <br />。
-
-*ps:无内容元素标签包括：`area`,`base`, `br`, `col`, `command`, `embed`,` hr`, `img`, `input`, `keygen`, `link`, `meta`, `param`, `source`, `track`, `wbr`*
-
-## 语义化
-根据元素（有时被错误地称作“标签”）被创造出来时的初始意义来使用它。打个比方，用heading元素来定义头部标题，p元素来定义文字段落，用a元素来定义链接锚点，等等。
-有根据有目的地使用 HTML 元素，对于可访问性、代码重用、代码效率来说意义重大。
-
-    //GOOD
-    <!-- The page header should go into a header element -->
-    <header>
-      <!-- As this title belongs to the page structure it's a heading and h1 should be used -->
-      <h1>My page title</h1>
-    </header>
-     
-    <!-- All navigation should go into a nav element -->
-    <nav class="top-navigation">
-      <!-- A listing of elements should always go to UL (OL for ordered listings) -->
-      <ul>
-        <li class="nav-item"><a href="#home">Home</a></li>
-        <li class="nav-item"><a href="#news">News</a></li>
-        <li class="nav-item"><a href="#about">About</a></li>
-      </ul>
-    </nav>
-     
-    <!-- The main part of the page should go into a main element (also use role="main" for accessibility) -->
-    <main class="news-page" role="main">
-      <!-- A section of a page should go into a section element. Divide a page into sections with semantic elements. -->
-      <section class="page-section news">
-        <!-- A section header should go into a section element -->
-        <header>
-          <!-- As a page section belongs to the page structure heading elements should be used (in this case h2) -->
-          <h2 class="title">All news articles</h2>
-        </header>
-     
-        <!-- If a section / module can be seen as an article (news article, blog entry, products teaser, any other
-         re-usable module / section that can occur multiple times on a page) a article element should be used -->
-        <article class="news-article">
-          <!-- An article can contain a header that contains the summary / introduction information of the article -->
-          <header>
-            <!-- As a article title does not belong to the overall page structure there should not be any heading tag! -->
-            <div class="article-title">Good article</div>
-            <!-- Small can optionally be used to reduce importance -->
-            <small class="intro">Introduction sub-title</small>
-          </header>
-     
-          <!-- For the main content in a section or article there is no semantic element -->
-          <div class="content">
-            <p>This is a good example for HTML semantics</p>
-          </div>
-          <!-- For content that is represented as side note or less important information in a given context use aside -->
-          <aside class="article-side-notes">
-            <p>I think I'm more on the side and should not receive the main credits</p>
-          </aside>
-          <!-- Articles can also contain footers. If you have footnotes for an article place them into a footer element -->
-          <footer class="article-foot-notes">
-            <!-- The time element can be used to annotate a timestamp. Use the datetime attribute to specify ISO time
-             while the actual text in the time element can also be more human readable / relative -->
-            <p>This article was created by David <time datetime="2014-01-01 00:00" class="time">1 month ago</time></p>
-          </footer>
-        </article>
-     
-        <!-- In a section, footnotes or similar information can also go into a footer element -->
-        <footer class="section-footer">
-          <p>Related sections: Events, Public holidays</p>
-        </footer>
-      </section>
-    </main>
-     
-    <!-- Your page footer should go into a global footer element -->
-    <footer class="page-footer">
-      Copyright 2014
-    </footer>
-
-    //BAD
-    <b>My page title</b>
-    <div class="top-navigation">
-      <div class="nav-item"><a href="#home">Home</a></div>
-      <div class="nav-item"><a href="#news">News</a></div>
-      <div class="nav-item"><a href="#about">About</a></div>
-    </div>
-     
-    <div class="news-page">
-      <div class="page-section news">
-        <div class="title">All news articles</div>
-        <div class="news-article">
-          <h2>Bad article</h2>
-          <div class="intro">Introduction sub-title</div>
-          <div class="content">This is a very bad example for HTML semantics</div>
-          <div class="article-side-notes">I think I'm more on the side and should not receive the main credits</div>
-          <div class="article-foot-notes">
-            This article was created by David <div class="time">2014-01-01 00:00</div>
-          </div>
-        </div>
-     
-        <div class="section-footer">
-          Related sections: Events, Public holidays
-        </div>
-      </div>
-    </div>
-     
-    <div class="page-footer">
-      Copyright 2014
-    </div>
-
-## 多媒体回溯
-对页面上的媒体而言，像图片、视频、canvas 动画等，要确保其有可替代的接入接口。图片文件我们可采用有意义的备选文本（alt），视频和音频文件我们可以为其加上说明文字或字幕。
-
-    //GOOD
-    <img src="luke-skywalker.jpg" alt="Luke skywalker riding an alien horse">
-
-    //BAD
-    <img src="luke-skywalker.jpg">
-
-## 关注点分离
-严格地保证**结构HTML**、**表现CSS**、**行为JS**三者分离。
-
-清晰的分层意味着：
-    不使用超过一到两张样式表
-    不使用超过一到两个脚本（学会用合并脚本）
-    不使用行内样式
-    不在元素上使用 style 属性
-    不使用行内脚本
-    不使用表象元素（`b`, `u`, `center`, `font`, `b` ... ）
-    不使用表象 class 名（i.e. red, left, center）
-
-    //GOOD
-    <!DOCTYPE html>
-    <html>
-    <head>
-      <!-- Concatinate your style sheets into a single one -->
-      <link rel="stylesheet" href="main.css">
-    </head>
-    <body>
-      <!-- Don't use style attributes but assign sensible classes and apply styles in the stylesheet -->
-      <h1 class="title"></h1>
-      <!-- Don't use presentational elements and assign sensible classes -->
-      <div class="sub-title">I'm a subtitle and I'm bold!</div>
-      <!-- Maybe your comments get centered in your presentation but that decision is up to the stylesheet -->
-      <span class="comment">Dare you center me!</span>
-      <!-- You wanted to make it red because it's important so then also name the class important and decide in the stylesheet
-       what you want to do with it -->
-      <div class="important">I'm important!</div>
-     
-      <!-- Put all your scripts into files and concatinate them into a single one -->
-      <script async src="main.js"></script>
-    </body>
-    </html>
-
-
-    //BAD
-    <!DOCTYPE html>
-    <html>
-    <head>
-      <link rel="stylesheet" href="base.css">
-      <link rel="stylesheet" href="grid.css">
-      <link rel="stylesheet" href="type.css">
-      <link rel="stylesheet" href="modules/teaser.css">
-    </head>
-    <body>
-      <h1 style="font-size: 3rem"></h1>
-      <b>I'm a subtitle and I'm bold!</b>
-      <center>Dare you center me!</center>
-      <script>
-        alert('Just dont...');
-      </script>
-      <div class="red">I'm important!</div>
-    </body>
-    </html>
-
-## HTML 内容至上
-不要让非内容信息污染了你的HTML。HTML就应该只关注内容，HTML标签的目的，就是为了不断地展示内容信息。
-
-* 不要引入一些特定的 HTML 结构来解决一些视觉设计问题
-* 不要将 img 元素当做专门用来做视觉设计的元素
+## HTML 引号
+使用双引号(" ") 而不是单引号(' ') 。
-        //GOOD
-        <!-- That's clean markup! -->
-        <span class="text-box">
-          See the square next to me?
-        </span>
+## 标签闭合
+在自动闭合标签后不要使用斜线`/`。
-        /* We use a :before pseudo element to solve the design problem of placing a colored square in front of the text content */
-        .text-box:before {
-          content: "";
-          display: inline-block;
-          width: 1rem;
-          height: 1rem;
-          background-color: red;
-        }
+## 属性顺序
+HTML属性应该按照特定顺序出现在标签内
-        //BAD
-        <!-- We should not introduce an additional element just to solve a design problem  -->
-        <span class="text-box">
-          <span class="square"></span>
-          See the square next to me?
-        </span>
+* id
+* class
+* name
+* data-
+* src, for, type, href
+* title, alt
+* aria-*, role
-        .text-box > .square {
-          display: inline-block;
-          width: 1rem;
-          height: 1rem;
-          background-color: red;
-        }
+## boolean属性
+不需要为boolean属性添加取值，存在表示true，不存在则表示false。比如：selected，disabled等。
-图片和SVG能被引入到HTML中的唯一理由是它们呈现出了与内容相关的一些信息。
+## 减少不必要的标签嵌套
     //GOOD
-    <!-- That's clean markup! -->
-    <span class="text-box">
-      See the square next to me?
-    </span>
-
-    /* We use a :before pseudo element with a background image to solve the problem */
-    .text-box:before {
-      content: "";
-      display: inline-block;
-      width: 1rem;
-      height: 1rem;
-      background: url(square.svg) no-repeat;
-      background-size: 100%;
-    }
+    <img class="avatar" src="..." alt="...">
     //BAD
-    <!-- Content images should never be used for design elements!  -->
-    <span class="text-box">
-      <img src="square.svg" alt="Square" />
-      See the square next to me?
+    <span class="avatar">
+        <img src="..." alt="...">
     </span>
-## type属性
-省略样式表与脚本上的type属性。鉴于HTML5中以上两者默认的type值就是text/css和text/javascript，所以type属性一般是可以忽略掉的。甚至在老旧版本的浏览器中这么做也是安全可靠的。
-
-    //GOOD
-    <link rel="stylesheet" href="main.css">
-    <script src="main.js"></script>
-
-    //BAD
-    <link rel="stylesheet" href="main.css" type="text/css">
-    <script src="main.js" type="text/javascript"></script>
-
-## 格式化规则
-在每一个块状元素，列表元素和表格元素后，加上一新空白行，并对其子孙元素进行缩进。内联元素写在一行内，块状元素还有列表和表格要另起一行。
-
-    //GOOD
-    <blockquote>
-      <p><em>Space</em>, the final frontier.</p>
-    </blockquote>
-     
-    <ul>
-      <li>Moe</li>
-      <li>Larry</li>
-      <li>Curly</li>
-    </ul>
-     
-    <table>
-      <thead>
-        <tr>
-          <th scope="col">Income</th>
-          <th scope="col">Taxes</th>
-        </tr>
-      </thead>
-      <tbody>
-        <tr>
-          <td>$ 5.00</td>
-          <td>$ 4.50</td>
-        </tr>
-      </tbody>
-    </table>
-
-## HTML 引号
-使用双引号(" ") 而不是单引号(' ') 。
+## class和id命名
+* 保持小写以及中划线`-`分隔
+* 命名简短但是也要明确指示角色和意图
+* 必要时可以使用父节点的class作为前缀
-[参考](http://www.css88.com/archives/5364)
+[参考资料1](http://alloyteam.github.io/code-guide/#html)
+[参考资料2](http://www.css88.com/archives/5364)
--- a/前端开发相关/代码规范/通用代码规范.md
View file @36f4ea9
+++ b/前端开发相关/代码规范/通用代码规范.md
View file @36f4ea9
 # 通用代码规范
 ## 文件/资源命名
-在 web 项目中，所有的文件名应该都遵循同一命名约定。以可读性而言，减号`-`是用来分隔文件名的不二之选。同时它也是常见的 URL 分隔符（i.e. //example.com/blog/my-blog-entry or //s.example.com/images/big-black-background.jpg），所以理所当然的，减号应该也是用来分隔资源名称的好选择。
+文件，资源，目录等全部**小写**命名，有多个单词组成时以中划线`-`分隔；有复数结构时，采用复数命名。
-**请确保文件命名总是以字母开头而不是数字**。而以特殊字符开头命名的文件，一般都有特殊的含义与用处（比如compass中的下划线就是用来标记跳过直接编译的文件用的）。
-
-**资源的字母名称必须全为小写**，这是因为在某些对大小写字母敏感的操作系统中，当文件通过工具压缩混淆后，或者人为修改过后，大小写不同而导致引用文件不同的错误，很难被发现。
-
-还有一些情况下，需要对文件增加前后缀或特定的扩展名（比如 .min.js, .min.css），抑或一串前缀（比如 3fa89b.main.min.css）。这种情况下，建议使用**点分隔符**来区分这些在文件名中带有清晰意义的元数据。
+对于压缩文件等有需要特殊前缀的文件使用点`.`进行划分，比如a.min.js。
     //GOOD
     my-script.js
@@ -23,28 +19,11 @@
     1001-scripts.js
     my-file-min.css
-## 协议
-不要指定引入资源所带的具体协议。当引入样式和脚本，图片或其他媒体文件时，URL所指向的具体路径，不要指定协议部分（http:，https:），除非这两者协议都不可用。不指定协议使得 URL 从绝对的获取路径转变为相对的，在请求资源协议无法确定时非常好用，而且还能为文件大小节省几个字节。
-    
-    //GOOD
-    <script src="//cdn.com/foundation.min.js"></script>
-    //
-    .example {
-        background: url(//static.example.com/images/bg.jpg);
-    }
-
-    //BAD
-    <script src="http://cdn.com/foundation.min.js"></script>
-    //
-    .example {
-        background: url(http://static.example.com/images/bg.jpg);
-    }
-
 ## 文本缩进
 一次缩进4个空格
 ## 注释
-原则：**适量，并且切中要害***
+原则：**适量，并且切中要害**
 必要的注释使用场景
 1. 代码晦涩难懂
 2. 可能被别人误认为是错误的代码
@@ -59,4 +38,5 @@ NOTE：大段的代码注释尽量予以避免，N久后，那段代码的存在
 对于 JavaScript的代码检查，建议使用*JSHint*。(sublime Text中可以安装jshint插件)
-[参考资料](http://www.css88.com/archives/5361)
+[参考资料1](http://www.css88.com/archives/5361)
+[参考资料2](http://alloyteam.github.io/code-guide/)