-
Notifications
You must be signed in to change notification settings - Fork 10
/
about.html
251 lines (179 loc) · 15.6 KB
/
about.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>About</title>
<link rel="stylesheet" href="style.css">
<style>
pre {
background-color: #FFFFE2;
padding: 10px;
}
</style>
</head>
<body>
<div class="head">
<div class="page">
<div class="unit size1of2">
<h1 class="logo">CSS <strong>LINT</strong></h1>
</div>
<div class="unit size1of2 lastUnit">
<div class="intro">
<p>Will hurt your feelings<a href="http://www.jslint.com/">*</a></p>
<p>(And help you code better)</p>
</div>
</div>
</div>
</div>
<div class="body">
<div class="page">
<div>
<div class="line">
<div class="unit size1of2">
<p class="summary">CSS Lint is a tool to help point out problems with your CSS code. It does basic syntax checking as well as applying a set of rules to the code that look for problematic patterns or signs of inefficiency. The rules are all pluggable, so you can easily write your own or omit ones you don't want.</p>
</div>
<div class="unit size1of2 lastUnit">
<a class="bigButton" href="index.html">Go Lint!</a>
</div>
</div>
</div>
</div>
</div>
<div class="foot">
<div class="page docs">
<h2 id="docs">The CSS Lint Rules</h2>
<h3>Parsing errors should be fixed</h3>
<p>By default, CSS Lint shows any parsing errors. Parsing errors usually mean you mistyped a character and may cause the browser to drop your rule or a property. Parsing errors are presented as errors by CSS Lint, the most important issues to fix.</p>
<h3 class="mbn"><strong title="id">adjoining-classes</strong> Don't use adjoining classes</h3>
<p>Adjoining classes look like <code>.foo.bar</code>. While technically allowed in CSS, these aren't handled properly by Internet Explorer 6 and earlier.</p>
<h3><strong title="id">empty-rules</strong> Remove empty rules</h3>
<p>Any rule that doesn't contain any properties, such as:</p>
<div class="highlight">
<pre><span class="nc">.foo</span> <span class="p">{</span><span class="p">}</span>
</pre>
</div>
<p>A lot of times, empty rules appear as a result of refactoring without further cleanup. Eliminating empty rules results in smaller file sizes and less style information for the browser to deal with.</p>
<h3><strong title="id">display-property-grouping</strong>Use correct properties for a display</h3>
<p>Even though you can define any group of properties together in a CSS rule, some of them will be ignored due to the <code>display</code> of the element. This leads to extra cruft in the CSS file. The list of properties that CSS Lint checks for are:</p>
<ul>
<li>
<code>display: inline</code> should not use <code>width</code>, <code>height</code>, <code>margin</code> (and all variants), <code>padding</code> (and all variants), or <code>float</code>.</li>
<li>
<code>display: inline-block</code> should not use <code>float</code>.</li>
<li>
<code>display: block</code> should not use <code>vertical-align</code>.</li>
<li>
<code>display: table-*</code> should not use <code>margin</code> (and all variants) or <code>float</code>.</li>
</ul>
<p>Removed the ignored or problematic properties decreases file size and improves performance.</p>
<h3><strong title="id">floats</strong> Don't use too many floats</h3>
<p>Using <code>float</code> for layout isn't a great idea, but sometimes you have to. CSS Lint simply checks to see if you've used <code>float</code> more than 10 times, and if so, displays a warning. Using this many floats usually means you need some sort of abstraction to achieve the layout.</p>
<h3><strong title="id">font-faces</strong> Don't use too many web fonts</h3>
<p>Web fonts are growing in popularity and use of <code>@font-face</code> is on the rise. However, using web fonts comes with performance implications as font files can be quite large and some browsers block rendering while downloading them. For this reason, CSS Lint will warn you when there are more than five web fonts in a style sheet.</p>
<h3><strong title="id">shorthand</strong> Require shorthand properties</h3>
<p>Sometimes when editing a rule you may end up defining multiple properties that can better be represented using shorthand. This rule checks to see if you're using <code>margin-left</code>, <code>margin-right</code>, <code>margin-top</code>, and <code>margin-bottom</code> together and suggests to use just <code>margin</code> instead. The same is done for the variants of <code>padding</code>.</p>
<h3><strong title="id">font-sizes</strong> Don't use too may font-size declarations</h3>
<p>A site is typically made up of a finite number of font treatments, including font size. If you have 10 or more font sizes specified, you probably want to refactor into a standard set of font size classes that can be used in markup.</p>
<h3><strong title="id">ids</strong> Don't use IDs in selectors</h3>
<p>IDs shouldn't be used in selectors because these rules are too tightly coupled with the HTML and have no possibility of reuse. It's much preferred to use classes in selectors and then apply a class to an element in the page.</p>
<h3><strong title="id">qualified-headings</strong> Don't qualify headings</h3>
<p>Heading elements (<code>h1</code>-<code>h6</code>) should be defined as top-level styles and not scoped to particular areas of the page. For example, this is an example of an overqualified heading:</p>
<div class="highlight">
<pre><span class="nc">.foo</span> <span class="nt">h1</span> <span class="p">{</span>
<span class="k">font-size</span><span class="o">:</span> <span class="m">110</span><span class="o">%</span><span class="p">;</span>
<span class="p">}</span>
</pre>
</div>
<p>Heading elements should have a consistent appearance across a site.</p>
<h3><strong title="id">unique-headings</strong> Heading styles should only be defined once</h3>
<p>Heading elements (<code>h1</code>-<code>h6</code>) should have exactly one rule on a site. CSS Lint warns if it finds more than one.</p>
<!--<h3>Be careful using width: 100%</h3>
<p>Using <code>width: 100%</code> on an element whose parent element has padding will result in the child stretching outside of the parent's bounding box. It's generally not a good idea to use <code>width: 100%</code>. Instead, use <code>width: auto</code> or <code>display: block</code>.</p>-->
<h3><strong title="id">zero-units</strong> Zero values don't need units</h3>
<p>An easy way to save bytes in CSS is not include units when a value is 0. For instance, <code>0px</code> and <code>0</code> are the exact same measurement, so leave off the units and save!</p>
<h3><strong title="id">vendor-prefix</strong> Vendor prefixed properties should also have the standard</h3>
<p>When using vendor-prefixed properties such as <code>-moz-border-radius</code>, make sure to also include the standard property. The standard property should preferably come after the vendor-prefixed one, such as:</p>
<div class="highlight">
<pre><span class="nc">.foo</span> <span class="p">{</span>
<span class="o">-</span><span class="n">moz</span><span class="o">-</span><span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span>
<span class="k">border</span><span class="o">-</span><span class="n">radius</span><span class="o">:</span> <span class="m">5px</span><span class="p">;</span>
<span class="p">}</span>
</pre>
</div>
<h3><strong title="id">gradients</strong> CSS gradients require all browser prefixes</h3>
<p>Right now, there is no standard CSS gradient implementation, which means using CSS gradients in a cross-browser way requires using many different vendor-prefixed versions. CSS Lint warns when a rule with a CSS gradient doesn't have gradients for all supporting browsers. </p>
<h3><strong title="id">regex-selectors</strong> Avoid selectors that look like regular expressions</h3>
<p>CSS3 adds complex attribute selectors such as <code>~=</code> that are slow. When using attribute selectors, don't use the complex equality operators to avoid performance penalties.</p>
<h3><strong title="id">box-model</strong> Beware of broken box models</h3>
<p>Borders and padding add space outside of an element's content. Setting <code>width</code> or <code>height</code> along with borders and padding is usually a mistake because you won't get the visual result you're looking for. CSS Lint warns when a rule uses <code>width</code> or <code>height</code> in addition to padding and/or border.</p>
<h3><strong title="id">import</strong>Don't use @import</h3>
<p>The <code>@import</code> directive prevents some browsers from downloading resources in parallel (see: <a href="http://www.stevesouders.com/blog/2009/04/09/dont-use-import/">Don't use @import</a>)</p>
<h3><strong title="id">important</strong> Don't use !important</h3>
<p>Using <code>!important</code> overides any cascaded rule and may lead to specificity war. CSS Lint checks if you've used <code>!important</code>, and if so, displays a warning. If there's at least 10 <code>!important</code> declaration in your code CSSLint displays an error.</p>
<h3><strong title="id">compatible-vendor-prefixes</strong> Include all compatible vendor prefixes</h3>
<p>Most CSS3 properties have vendor-prefixed equivalents for multiple vendors, including Firefox (-moz), Safari/Chrome (-webkit), Opera (-o), and Internet Explorer (-ms). Including all compatible vendor prefixes will give a consistent appearance for a wider range of users.</p>
<h3><strong title="id">duplicate-properties</strong> Avoid duplicate properties</h3>
<p>When you include the same property twice, it may be intentional (to provide a fallback) or unintentional (copy-paste error). If duplicate properties are found one after the other with different values, this is okay. For example:</p>
<pre><code>.foo {
background: #fff;
background: rgba(255, 255, 255, 0.5);
}</code></pre>
<p>However, if the properties either have the same value or are located at different spots in the rule, this results in a warning. For example:</p>
<pre><code>.foo {
background: #fff;
color: #000;
background: rgba(255, 255, 255, 0.5);
}</code></pre>
<h2 id="contribute">Contribute</h2>
<p>Many people have expressed an interest in contributing to the CSS Lint project. We were waiting to have a solid plugable architecture and API before taking contributions. The exciting news is that we are now ready! There are several ways you can contribute:</p>
<ol class="enumlist">
<li>If you are comfortable with CSS, <a href="https://github.com/stubbornella/csslint/issues">submit rule ideas</a>. You must provide the rule name, a human readable explanation, browsers affected, and a test case.</li>
<li>If you are comfortable in JavaScript, <a href="https://github.com/stubbornella/csslint">fork the github project</a>, code up a rule, and submit a pull request. You'll need to provide all the same documentation requsted in item 1.</li>
<li>If you are comfortable with Node or Rhino, <a href="https://github.com/stubbornella/csslint/tree/master/src/cli">test out the command line version</a>, submit feature requests.</li>
</ol>
<h2 id="node">CSS Lint Command Line</h2>
<p>There are two options for using CSS Lint on the command line. First, if you have Node.js and <a href="https://www.npmjs.org/">npm</a> installed, you can install CSS Lint easily using the following:</p>
<pre><code>sudo npm install -g csslint</code></pre>
<p>If you prefer to use <a href="https://developer.mozilla.org/en-US/docs/Mozilla/Projects/Rhino">Rhino instead</a>, grab <a href="https://github.com/CSSLint/csslint/blob/master/dist/csslint-rhino.js">csslint-rhino.js</a>.</p>
<p>Both the Node.js and Rhino command line interfaces work the same way. Run them and pass in any number of CSS files or directories containing CSS files. For Node.js:</p>
<pre><code>csslint test.css dir_of_css/ test2.css</code></pre>
<p>For Rhino:</p>
<pre><code>java -jar rhino.jar csslint-rhino.js test.css dir_of_css/ test2.css</code></pre>
<p>You'll receive the same errors and warnings as you would with the web interface.</p>
<p>If you'd like to customize the rules that the command line uses, do set by setting the <code>rules=</code> option and passing a comma-separated list of rule IDs.
For Node.js:</p>
<pre><code>csslint --rules=ids,important,import test.css</code></pre>
<p>For Rhino:</p>
<pre><code>java -jar rhino.jar csslint-rhino.js --rules=ids,important,import test.css</code></pre>
<p>You can change the results output format by using the <code>--format</code> option. The available options are:</p>
<ul>
<li><code>text</code> - the default</li>
<li><code>lint-xml</code> - a language-agnostic variant of "JSLint XML" format (basically uses <code><lint/></code> instead of <code><jslint/></code>)</li>
</ul>
<p>Change the output format at any time via (also works with Rhino):</p>
<pre><code>csslint --format=lint-xml test.css</code></pre>
<h2>Thanks</h2>
<p>Many people encouraged me to build this tool. Deepest thank you to Chris Klaiber, Gonzalo Cordero, Douglas Crockford and JSLint, Rebecca Murphy, the guys at GitHub, and everyone at JSConf.</p>
<!-- insert in this table -->
<div id="output"></div>
<ul class="inlineList piped footList">
<li><a href="https://www.nczonline.net/">Nicholas</a></li>
<li><a href="about.html">About</a></li>
<li><a href="about.html#contribute">Contribute</a></li>
<li><a href="https://github.com/CSSLint/csslint/">Source</a></li>
<li><a href="about.html#node">Node</a></li>
<li><a href="about.html#docs">Documentation</a></li>
<li><a href="http://www.stubbornella.org/">Nicole</a></li>
</ul>
</div>
</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-25221469-1', 'csslint.net');
ga('send', 'pageview');
</script>
</body>
</html>