加入css,scss规范

.csslintrc

@@ -0,0 +1,26 @@
+{
+    "box-model": false,
+    "adjoining-classes": false,
+    "box-sizing": false,
+    "compatible-vendor-prefixes": false,
+    "gradients": false,
+    "text-indent": false,
+    "fallback-colors": false,
+    "star-property-hack": false,
+    "underscore-property-hack": false,
+    "bulletproof-font-face": false,
+    "font-faces": false,
+    "import": false,
+    "regex-selectors": false,
+    "universal-selector": false,
+    "unqualified-attributes": false,
+    "overqualified-elements": false,
+    "duplicate-background-images": false,
+    "floats": false,
+    "font-sizes": false,
+    "ids": false,
+    "important": false,
+    "outline-none": false,
+    "qualified-headings": false,
+    "unique-headings": false
+}

.scss-lint.yml

@@ -0,0 +1,207 @@
+scss_files: "**/*.scss"
+
+linters:
+  BangFormat:
+    enabled: true
+    space_before_bang: true
+    space_after_bang: false
+
+  BemDepth:
+    enabled: false
+    max_elements: 1
+
+  BorderZero:
+    enabled: true
+    convention: zero # or `none`
+
+  ColorKeyword:
+    enabled: false
+
+  ColorVariable:
+    enabled: false
+
+  Comment:
+    enabled: true
+
+  DebugStatement:
+    enabled: true
+
+  DeclarationOrder:
+    enabled: true
+
+  DuplicateProperty:
+    enabled: false
+
+  ElsePlacement:
+    enabled: true
+    style: same_line # or 'new_line'
+
+  EmptyLineBetweenBlocks:
+    enabled: true
+    ignore_single_line_blocks: false
+
+  EmptyRule:
+    enabled: true
+
+  FinalNewline:
+    enabled: false
+    present: true
+
+  HexLength:
+    enabled: true
+    style: short # or 'long'
+
+  HexNotation:
+    enabled: true
+    style: lowercase # or 'uppercase'
+
+  HexValidation:
+    enabled: true
+
+  IdSelector:
+    enabled: false
+
+  ImportantRule:
+    enabled: false
+
+  ImportPath:
+    enabled: true
+    leading_underscore: false
+    filename_extension: false
+
+  Indentation:
+    enabled: true
+    allow_non_nested_indentation: false
+    character: space # or 'tab'
+    width: 4
+
+  LeadingZero:
+    enabled: true
+    style: exclude_zero # or 'include_zero'
+
+  MergeableSelector:
+    enabled: true
+    force_nesting: false
+
+  NameFormat:
+    enabled: true
+    allow_leading_underscore: false
+    convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
+
+  NestingDepth:
+    enabled: true
+    max_depth: 5
+
+  PlaceholderInExtend:
+    enabled: true
+
+  PropertyCount:
+    enabled: false
+    include_nested: false
+    max_properties: 10
+
+  PropertyUnits:
+    enabled: true
+    global: [
+      'ch', 'em', 'ex', 'rem',                 # Font-relative lengths
+      'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
+      'vh', 'vw', 'vmin', 'vmax',              # Viewport-percentage lengths
+      'deg', 'grad', 'rad', 'turn',            # Angle
+      'ms', 's',                               # Duration
+      'Hz', 'kHz',                             # Frequency
+      'dpi', 'dpcm', 'dppx',                   # Resolution
+      '%']                                     # Other
+    properties: {}
+
+  PropertySortOrder:
+    enabled: false
+    ignore_unspecified: false
+    min_properties: 2
+    separate_groups: true
+
+  PropertySpelling:
+    enabled: true
+    extra_properties: []
+
+  QualifyingElement:
+    enabled: false
+    allow_element_with_attribute: false
+    allow_element_with_class: false
+    allow_element_with_id: false
+
+  SelectorDepth:
+    enabled: true
+    max_depth: 4
+
+  SelectorFormat:
+    enabled: true
+    convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
+    ignored_types: ['id']
+
+  Shorthand:
+    enabled: true
+    allowed_shorthands: [1, 2, 3]
+
+  SingleLinePerProperty:
+    enabled: true
+    allow_single_line_rule_sets: false
+
+  SingleLinePerSelector:
+    enabled: true
+
+  SpaceAfterComma:
+    enabled: true
+
+  SpaceAfterPropertyColon:
+    enabled: true
+    style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
+
+  SpaceAfterPropertyName:
+    enabled: true
+
+  SpaceBeforeBrace:
+    enabled: true
+    style: space # or 'new_line'
+    allow_single_line_padding: false
+
+  SpaceBetweenParens:
+    enabled: true
+    spaces: 0
+
+  StringQuotes:
+    enabled: true
+    style: double_quotes # or single_quotes
+
+  TrailingSemicolon:
+    enabled: true
+
+  TrailingZero:
+    enabled: true
+
+  UnnecessaryMantissa:
+    enabled: true
+
+  UnnecessaryParentReference:
+    enabled: true
+
+  UrlFormat:
+    enabled: false
+
+  UrlQuotes:
+    enabled: true
+
+  VariableForProperty:
+    enabled: false
+    properties: []
+
+  VendorPrefix:
+    enabled: false
+    identifier_list: base
+    additional_identifiers: []
+    excluded_identifiers: []
+
+  ZeroUnit:
+    enabled: true
+
+  Compass::*:
+    enabled: false

_config.yml

@@ -2,7 +2,7 @@ name:          Code Guide by @AlloyTeam
 description:   Standards for developing flexible, durable, and sustainable HTML and CSS, and maintainable JavaScript
 url:           https://github.com/AlloyTeam/CodeGuide
 
-include:       [".editorconfig", ".jscsrc", ".jshintrc"]
+include:       [".editorconfig", ".jscsrc", ".jshintrc", ".csslintrc", ".scss-lint.yml"]
 
 markdown:      rdiscount
 permalink:     pretty

_includes/check.html

@@ -12,6 +12,13 @@ <h3>sublime3插件</h3>
                     <li>jscs <code>npm install jscs -g</code></li>
                     <li>jshint <code>npm install jshint -g</code></li>
                     <li>csscomb <code>npm install csscomb -g</code></li>
+                    <li>csslint <code>npm install csslint -g</code></li>
+                </ul>
+            </li>
+            <li>
+                <p>安装gem包</p>
+                <ul>
+                    <li>scss-lint <code>gem install scss_lint</code></li>
                 </ul>
             </li>
             <li>
@@ -32,6 +39,8 @@ <h3>sublime3插件</h3>
                             <li><code>SublimeLinter</code></li>
                             <li><code>SublimeLinter-jscs</code></li>
                             <li><code>SublimeLinter-jshint</code></li>
+                            <li><code>SublimeLinter-csslint</code></li>
+                            <li><code>SublimeLinter-contrib-scss-lint</code></li>
                             <li><code>JSFormat</code></li>
                             <li><code>CSScomb</code></li>
                         </ul>
@@ -49,6 +58,8 @@ <h3>sublime3插件</h3>
                         <p>注意：全局变量需要手动加到配置文件的globals属性里，例：</p>
                         {% highlight json %}{% include check/grunt_jscs_globals.json %}{% endhighlight %}
                     </li>
+                    <li><code>CSSLint</code> <a href=".csslintrc" download=".csslintrc">配置文件</a></li>
+                    <li><code>SCSS-Lint</code> <a href=".scss-lint.yml" download=".scss-lint.yml">配置文件</a></li>
                 </ul>
             </li>
             <li>
@@ -70,15 +81,14 @@ <h3>sublime3插件</h3>
                         <p>右键->SublimeLinter->Lint Mode，有4种检查模式，建议选择 <code>Load/save</code></p>
                         <p>右键->SublimeLinter->Mark Style，建议选择 <code>Outline</code></p>
                         <p>右键->SublimeLinter->Choose Gutter Theme，建议选择 <code>Blueberry-round</code></p>
-                        <p>右键->SublimeLinter->Show Errors on Save</p>
-                        <p>右键->SublimeLinter->Open User Settings，将linter里面jscs的args改成 <code>["--verbose"]</code></p>
+                        <p>右键->SublimeLinter->Open User Settings，将linter里面jscs的args改成 <code>["--verbose"]</code>，将linter里面csslint的ignore改成 <code>"box-model,adjoining-classes,box-sizing,compatible-vendor-prefixes,gradients,text-indent,fallback-colors,star-property-hack,underscore-property-hack,bulletproof-font-face,font-faces,import,regex-selectors,universal-selector,unqualified-attributes,overqualified-elements,duplicate-background-images,floats,font-sizes,ids,important,outline-none,qualified-headings,unique-headings"</code></p>
                         <p>当光标处于有错误的代码行时，详细的错误信息会显示在下面的状态栏中</p>
                         <p>右键->SublimeLinter可以看到所有的快捷键，其中 <code>ctrl+k, a</code> 可以列出所有错误</p>
                     </li>
                     <li>
                         <p><code>CSScomb</code></p>
                         <p>Preferences->Package Settings->CSScomb->Setting-User，下载<a href="csscomb_setting_user.json" download="csscomb_setting_user.json">配置文件</a>覆盖</p>
-                        <p>配置好后格式化的默认快捷键是 <code>ctrl+alt+c</code></p>
+                        <p>配置好后格式化的默认快捷键是 <code>ctrl+shift+c</code></p>
                     </li>
                 </ul>
             </li>
@@ -95,6 +105,8 @@ <h3>grunt插件</h3>
                 <ul>
                     <li>jscs <code>npm install grunt-jscs --save-dev</code></li>
                     <li>jshint <code>npm install grunt-contrib-jshint --save-dev</code></li>
+                    <li>csslint <code>npm install grunt-contrib-csslint --save-dev</code></li>
+                    <li>scss-lint <code>npm install grunt-scss-lint --save-dev</code></li>
                 </ul>
             </li>
             <li>
@@ -108,6 +120,14 @@ <h3>grunt插件</h3>
                         <code>JSHint</code>
                         {% highlight javascript %}{% include check/grunt_jshint.js %}{% endhighlight %}
                     </li>
+                    <li>
+                        <code>CSSLint</code>
+                        {% highlight javascript %}{% include check/grunt_csslint.js %}{% endhighlight %}
+                    </li>
+                    <li>
+                        <code>SCSS-Lint</code>
+                        {% highlight javascript %}{% include check/grunt_scsslint.js %}{% endhighlight %}
+                    </li>
                 </ul>
             </li>
         </ol>

_includes/check/grunt_csslint.js

@@ -0,0 +1,8 @@
+{
+    options: {
+        csslintrc: '.csslintrc'
+    },
+    files: {
+        src: [...]
+    }
+}

_includes/check/grunt_scsslint.js

@@ -0,0 +1,8 @@
+{
+    options: {
+        config: '.scss-lint.yml'
+    },
+    files: {
+        src: [...]
+    }
+}

_includes/css/blank_line.css

@@ -0,0 +1,23 @@
+/* not good */
+.element {
+    ...
+}
+.dialog {
+    color: red;
+    &:after {
+        ...
+    }
+}
+
+/* good */
+.element {
+    ...
+}
+
+.dialog {
+    color: red;
+
+    &:after {
+        ...
+    }
+}

_includes/css/color.css

@@ -0,0 +1,11 @@
+/* not good */
+.element {
+    color: #ABCDEF;
+    background-color: #001122;
+}
+
+/* good */
+.element {
+    color: #abcdef;
+    background-color: #012;
+}