Skip to content

Commit b05a2c2

Browse files
Yuri4everYuri4ever
committed
加入css,scss规范
1 parent 9169bc2 commit b05a2c2

34 files changed

+1045
-431
lines changed

‎.csslintrc

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
{
2+
"box-model": false,
3+
"adjoining-classes": false,
4+
"box-sizing": false,
5+
"compatible-vendor-prefixes": false,
6+
"gradients": false,
7+
"text-indent": false,
8+
"fallback-colors": false,
9+
"star-property-hack": false,
10+
"underscore-property-hack": false,
11+
"bulletproof-font-face": false,
12+
"font-faces": false,
13+
"import": false,
14+
"regex-selectors": false,
15+
"universal-selector": false,
16+
"unqualified-attributes": false,
17+
"overqualified-elements": false,
18+
"duplicate-background-images": false,
19+
"floats": false,
20+
"font-sizes": false,
21+
"ids": false,
22+
"important": false,
23+
"outline-none": false,
24+
"qualified-headings": false,
25+
"unique-headings": false
26+
}

‎.scss-lint.yml

Lines changed: 207 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,207 @@
1+
scss_files: "**/*.scss"
2+
3+
linters:
4+
BangFormat:
5+
enabled: true
6+
space_before_bang: true
7+
space_after_bang: false
8+
9+
BemDepth:
10+
enabled: false
11+
max_elements: 1
12+
13+
BorderZero:
14+
enabled: true
15+
convention: zero # or `none`
16+
17+
ColorKeyword:
18+
enabled: false
19+
20+
ColorVariable:
21+
enabled: false
22+
23+
Comment:
24+
enabled: true
25+
26+
DebugStatement:
27+
enabled: true
28+
29+
DeclarationOrder:
30+
enabled: true
31+
32+
DuplicateProperty:
33+
enabled: false
34+
35+
ElsePlacement:
36+
enabled: true
37+
style: same_line # or 'new_line'
38+
39+
EmptyLineBetweenBlocks:
40+
enabled: true
41+
ignore_single_line_blocks: false
42+
43+
EmptyRule:
44+
enabled: true
45+
46+
FinalNewline:
47+
enabled: false
48+
present: true
49+
50+
HexLength:
51+
enabled: true
52+
style: short # or 'long'
53+
54+
HexNotation:
55+
enabled: true
56+
style: lowercase # or 'uppercase'
57+
58+
HexValidation:
59+
enabled: true
60+
61+
IdSelector:
62+
enabled: false
63+
64+
ImportantRule:
65+
enabled: false
66+
67+
ImportPath:
68+
enabled: true
69+
leading_underscore: false
70+
filename_extension: false
71+
72+
Indentation:
73+
enabled: true
74+
allow_non_nested_indentation: false
75+
character: space # or 'tab'
76+
width: 4
77+
78+
LeadingZero:
79+
enabled: true
80+
style: exclude_zero # or 'include_zero'
81+
82+
MergeableSelector:
83+
enabled: true
84+
force_nesting: false
85+
86+
NameFormat:
87+
enabled: true
88+
allow_leading_underscore: false
89+
convention: hyphenated_lowercase # or 'camel_case', or 'snake_case', or a regex pattern
90+
91+
NestingDepth:
92+
enabled: true
93+
max_depth: 5
94+
95+
PlaceholderInExtend:
96+
enabled: true
97+
98+
PropertyCount:
99+
enabled: false
100+
include_nested: false
101+
max_properties: 10
102+
103+
PropertyUnits:
104+
enabled: true
105+
global: [
106+
'ch', 'em', 'ex', 'rem', # Font-relative lengths
107+
'cm', 'in', 'mm', 'pc', 'pt', 'px', 'q', # Absolute lengths
108+
'vh', 'vw', 'vmin', 'vmax', # Viewport-percentage lengths
109+
'deg', 'grad', 'rad', 'turn', # Angle
110+
'ms', 's', # Duration
111+
'Hz', 'kHz', # Frequency
112+
'dpi', 'dpcm', 'dppx', # Resolution
113+
'%'] # Other
114+
properties: {}
115+
116+
PropertySortOrder:
117+
enabled: false
118+
ignore_unspecified: false
119+
min_properties: 2
120+
separate_groups: true
121+
122+
PropertySpelling:
123+
enabled: true
124+
extra_properties: []
125+
126+
QualifyingElement:
127+
enabled: false
128+
allow_element_with_attribute: false
129+
allow_element_with_class: false
130+
allow_element_with_id: false
131+
132+
SelectorDepth:
133+
enabled: true
134+
max_depth: 4
135+
136+
SelectorFormat:
137+
enabled: true
138+
convention: hyphenated_lowercase # or 'strict_BEM', or 'hyphenated_BEM', or 'snake_case', or 'camel_case', or a regex pattern
139+
ignored_types: ['id']
140+
141+
Shorthand:
142+
enabled: true
143+
allowed_shorthands: [1, 2, 3]
144+
145+
SingleLinePerProperty:
146+
enabled: true
147+
allow_single_line_rule_sets: false
148+
149+
SingleLinePerSelector:
150+
enabled: true
151+
152+
SpaceAfterComma:
153+
enabled: true
154+
155+
SpaceAfterPropertyColon:
156+
enabled: true
157+
style: one_space # or 'no_space', or 'at_least_one_space', or 'aligned'
158+
159+
SpaceAfterPropertyName:
160+
enabled: true
161+
162+
SpaceBeforeBrace:
163+
enabled: true
164+
style: space # or 'new_line'
165+
allow_single_line_padding: false
166+
167+
SpaceBetweenParens:
168+
enabled: true
169+
spaces: 0
170+
171+
StringQuotes:
172+
enabled: true
173+
style: double_quotes # or single_quotes
174+
175+
TrailingSemicolon:
176+
enabled: true
177+
178+
TrailingZero:
179+
enabled: true
180+
181+
UnnecessaryMantissa:
182+
enabled: true
183+
184+
UnnecessaryParentReference:
185+
enabled: true
186+
187+
UrlFormat:
188+
enabled: false
189+
190+
UrlQuotes:
191+
enabled: true
192+
193+
VariableForProperty:
194+
enabled: false
195+
properties: []
196+
197+
VendorPrefix:
198+
enabled: false
199+
identifier_list: base
200+
additional_identifiers: []
201+
excluded_identifiers: []
202+
203+
ZeroUnit:
204+
enabled: true
205+
206+
Compass::*:
207+
enabled: false

‎_config.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ name: Code Guide by @AlloyTeam
22
description: Standards for developing flexible, durable, and sustainable HTML and CSS, and maintainable JavaScript
33
url: https://github.com/AlloyTeam/CodeGuide
44

5-
include: [".editorconfig", ".jscsrc", ".jshintrc"]
5+
include: [".editorconfig", ".jscsrc", ".jshintrc", ".csslintrc", ".scss-lint.yml"]
66

77
markdown: rdiscount
88
permalink: pretty

‎_includes/check.html

Lines changed: 23 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,13 @@ <h3>sublime3插件</h3>
1212
<li>jscs <code>npm install jscs -g</code></li>
1313
<li>jshint <code>npm install jshint -g</code></li>
1414
<li>csscomb <code>npm install csscomb -g</code></li>
15+
<li>csslint <code>npm install csslint -g</code></li>
16+
</ul>
17+
</li>
18+
<li>
19+
<p>安装gem包</p>
20+
<ul>
21+
<li>scss-lint <code>gem install scss_lint</code></li>
1522
</ul>
1623
</li>
1724
<li>
@@ -32,6 +39,8 @@ <h3>sublime3插件</h3>
3239
<li><code>SublimeLinter</code></li>
3340
<li><code>SublimeLinter-jscs</code></li>
3441
<li><code>SublimeLinter-jshint</code></li>
42+
<li><code>SublimeLinter-csslint</code></li>
43+
<li><code>SublimeLinter-contrib-scss-lint</code></li>
3544
<li><code>JSFormat</code></li>
3645
<li><code>CSScomb</code></li>
3746
</ul>
@@ -49,6 +58,8 @@ <h3>sublime3插件</h3>
4958
<p>注意：全局变量需要手动加到配置文件的globals属性里，例：</p>
5059
{% highlight json %}{% include check/grunt_jscs_globals.json %}{% endhighlight %}
5160
</li>
61+
<li><code>CSSLint</code> <a href=".csslintrc" download=".csslintrc">配置文件</a></li>
62+
<li><code>SCSS-Lint</code> <a href=".scss-lint.yml" download=".scss-lint.yml">配置文件</a></li>
5263
</ul>
5364
</li>
5465
<li>
@@ -70,15 +81,14 @@ <h3>sublime3插件</h3>
7081
<p>右键->SublimeLinter->Lint Mode，有4种检查模式，建议选择 <code>Load/save</code></p>
7182
<p>右键->SublimeLinter->Mark Style，建议选择 <code>Outline</code></p>
7283
<p>右键->SublimeLinter->Choose Gutter Theme，建议选择 <code>Blueberry-round</code></p>
73-
<p>右键->SublimeLinter->Show Errors on Save</p>
74-
<p>右键->SublimeLinter->Open User Settings，将linter里面jscs的args改成 <code>["--verbose"]</code></p>
84+
<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>
7585
<p>当光标处于有错误的代码行时，详细的错误信息会显示在下面的状态栏中</p>
7686
<p>右键->SublimeLinter可以看到所有的快捷键，其中 <code>ctrl+k, a</code> 可以列出所有错误</p>
7787
</li>
7888
<li>
7989
<p><code>CSScomb</code></p>
8090
<p>Preferences->Package Settings->CSScomb->Setting-User，下载<a href="csscomb_setting_user.json" download="csscomb_setting_user.json">配置文件</a>覆盖</p>
81-
<p>配置好后格式化的默认快捷键是 <code>ctrl+alt+c</code></p>
91+
<p>配置好后格式化的默认快捷键是 <code>ctrl+shift+c</code></p>
8292
</li>
8393
</ul>
8494
</li>
@@ -95,6 +105,8 @@ <h3>grunt插件</h3>
95105
<ul>
96106
<li>jscs <code>npm install grunt-jscs --save-dev</code></li>
97107
<li>jshint <code>npm install grunt-contrib-jshint --save-dev</code></li>
108+
<li>csslint <code>npm install grunt-contrib-csslint --save-dev</code></li>
109+
<li>scss-lint <code>npm install grunt-scss-lint --save-dev</code></li>
98110
</ul>
99111
</li>
100112
<li>
@@ -108,6 +120,14 @@ <h3>grunt插件</h3>
108120
<code>JSHint</code>
109121
{% highlight javascript %}{% include check/grunt_jshint.js %}{% endhighlight %}
110122
</li>
123+
<li>
124+
<code>CSSLint</code>
125+
{% highlight javascript %}{% include check/grunt_csslint.js %}{% endhighlight %}
126+
</li>
127+
<li>
128+
<code>SCSS-Lint</code>
129+
{% highlight javascript %}{% include check/grunt_scsslint.js %}{% endhighlight %}
130+
</li>
111131
</ul>
112132
</li>
113133
</ol>

‎_includes/check/grunt_csslint.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
options: {
3+
csslintrc: '.csslintrc'
4+
},
5+
files: {
6+
src: [...]
7+
}
8+
}

‎_includes/check/grunt_scsslint.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
options: {
3+
config: '.scss-lint.yml'
4+
},
5+
files: {
6+
src: [...]
7+
}
8+
}

‎_includes/css/blank_line.css

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
/* not good */
2+
.element {
3+
...
4+
}
5+
.dialog {
6+
color: red;
7+
&:after {
8+
...
9+
}
10+
}
11+
12+
/* good */
13+
.element {
14+
...
15+
}
16+
17+
.dialog {
18+
color: red;
19+
20+
&:after {
21+
...
22+
}
23+
}

‎_includes/css/class-names.css

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎_includes/css/color.css

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
/* not good */
2+
.element {
3+
color: #ABCDEF;
4+
background-color: #001122;
5+
}
6+
7+
/* good */
8+
.element {
9+
color: #abcdef;
10+
background-color: #012;
11+
}

0 commit comments

Comments
 (0)