Hello World!
Extra semicolons are usually introduced by mistake, for example because:
;;
Having the import of the same file twice, makes one of them useless. Leaving them in reduces the code's readability, since their presence can be 2 | confusing.
5 | @import 'a.css'; 6 | @import 'a.css'; // Noncompliant 7 | 8 | @import url("a.css"); 9 | @import url("a.css"); // Noncompliant 10 |
This rule ignores @import in less files.
@import
less
An invalid color definition will by default be interpreted as black, which is likely to have unintended impacts on the expected look and feel of 2 | the website.
This rule raises an issue when a color definition (color, background-color) is not valid. The color definition is 4 | considered valid when it is made of hexadecimal characters:
color
background-color
11 | a { 12 | color: #3c; /* Noncompliant; shorthand should be made of 3 characters */ 13 | } 14 | div { 15 | background-color: #3cb371a; /* Noncompliant; alpha should have 2 characters */ 16 | } 17 |
20 | a { 21 | color: #3cc; 22 | } 23 | div { 24 | background-color: #3cb371ac; 25 | } 26 |
Having duplicated font names doesn't help to read the font declaration and may be an indicator the author of the line was not sure how to configure 2 | it. This rule raises an issue when font or font-family properties contain a duplicated font name. This rule ignores 3 | $sass, @less, and var(--custom-property) variable syntaxes.
font
font-family
$sass
@less
var(--custom-property)
6 | a { 7 | font-family: 'Georgia', Georgia, serif; /* Noncompliant; 'Georgia' is duplicated */ 8 | } 9 |
12 | a { 13 | font-family: Georgia, serif; 14 | } 15 |
If none of the font names defined in a font or font-family declaration are available on the browser of the user, the 2 | browser will display the text using its default font. It's recommended to always define a generic font family for each declaration of 3 | font or font-family to get a less degraded situation than relying on the default browser font. All browsers should implement 4 | a list of generic font matching these families: Serif, Sans-serif, cursive, fantasy, 5 | Monospace.
Serif
Sans-serif
cursive
fantasy
Monospace
8 | a { 9 | font-family: Helvetica, Arial, Verdana, Tahoma; /* Noncompliant; there is no generic font family in the list */ 10 | } 11 |
14 | a { 15 | font-family: Helvetica, Arial, Verdana, Tahoma, sans-serif; 16 | } 17 |
calc is a CSS3 function that provides the possibility to do simple math in CSS (add, subtract, divide, multiply). Without spaces 2 | around operators, calc will have no effect.
calc
More precisely, before an operator, there must be a single whitespace or a newline plus indentation. After an operator, there must be a single 4 | whitespace or a newline.
7 | #div1 { 8 | position: absolute; 9 | width: calc(100%- 100px); /* Noncompliant; no space after the % sign */ 10 | } 11 |
14 | #div1 { 15 | position: absolute; 16 | width: calc(100% - 100px); 17 | } 18 |
linear-gradient was standardized with CSS3. Before that, it was possible to use different non-standard values to define the gradient's 2 | direction. Because these values are not standard, they are not supported in all browsers and therefore they should no longer be used in order to get 3 | the expected gradient in the latest browser versions that support CSS3.
linear-gradient
This rule raises an issue when the first parameter of a linear-gradient is not a valid <side-or-corner> or 5 | angle.
<side-or-corner>
angle
8 | .foo { 9 | background: -webkit-linear-gradient(to top, #fff, #000); 10 | background: linear-gradient(top, #fff, #000); 11 | } 12 | 13 | .bar { 14 | background: linear-gradient(45, #fff, #000); 15 | } 16 |
19 | .foo { 20 | background: -webkit-linear-gradient(top, #fff, #000); 21 | background: linear-gradient(to top, #fff, #000); 22 | } 23 | 24 | .bar { 25 | background: linear-gradient(45deg, #fff, #000); 26 | } 27 |
According to the W3C specifications:
3 | A string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 4 | (U+000A), such as "\A" or "\00000a". 5 | [...] 6 | It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with 7 | a backslash (\). 8 |
A string cannot directly contain a newline. To include a newline in a string, use an escape representing the line feed character in ISO-10646 4 | (U+000A), such as "\A" or "\00000a".
[...]
It is possible to break strings over several lines, for aesthetic or other reasons, but in such a case the newline itself has to be escaped with 7 | a backslash (\).
11 | a { 12 | content: "first 13 | second"; 14 | } 15 |
18 | a { 19 | content: "first\Asecond"; 20 | } 21 |
The W3C specifications define the units that can be used with lengths. A unit that is not part of the list of supported ones is likely 2 | to be a typo and will be seen as a UI bug by the user.
units
This rule raises an issue each time a unit is not officially supported.
6 | a { 7 | width: 10pixels; /* Noncompliant; "pixels" is not a valid unit */ 8 | } 9 |
12 | a { 13 | width: 10px; 14 | } 15 |
The W3C specifications define the valid CSS properties. Only the official and browser-specific properties should be used to get the expected impact 2 | in the final rendering.
This rule ignores:
-moz-align-self
-webkit-align-self
10 | a { 11 | colour: blue; /* Noncompliant; colour is not part of the specifications */ 12 | } 13 |
16 | a { 17 | color: blue; 18 | } 19 |
!important within keyframes declarations is completely ignored in some browsers and therefore it should not be used to be consistent 2 | among all browsers.
!important
5 | @keyframes kf { 6 | from { margin-top: 50px; } 7 | 50% { margin-top: 150px !important; } /* Noncompliant; ignored */ 8 | to { margin-top: 100px; } 9 | } 10 |
13 | @keyframes kf { 14 | from { margin-top: 50px; } 15 | 50% { margin-top: 150px; } 16 | to { margin-top: 100px; } 17 | } 18 |
CSS allows duplicate property names but only the last instance of a duplicated name determines the actual value that will be used for it. 2 | Therefore, changing values of other occurrences of a duplicated name will have no effect and may cause misunderstandings and bugs.
This rule ignores $sass, @less, and var(--custom-property) variable syntaxes.
6 | a { 7 | color: pink; 8 | background: orange; 9 | color: orange 10 | } 11 |
14 | a { 15 | color: pink; 16 | background: orange 17 | } 18 |
A shorthand property defined after a longhand property will completely override the value defined in the longhand property making the longhand one 2 | useless. The code should be refactored to consider the longhand property or to remove it completely.
5 | a { 6 | padding-left: 10px; 7 | padding: 20px; /* Noncompliant; padding is overriding padding-left making it useless */ 8 | } 9 |
12 | a { 13 | padding: 10px; /* Compliant; padding is defining a general behaviour and padding-left, just after, is precising the left case */ 14 | padding-left: 20px; 15 | } 16 |
Leftover empty blocks are usually introduced by mistake. They are useless and prevent readability of the code. They should be removed or completed 2 | with real code.
5 | a { } 6 |
9 | a { color: pink; } 10 |
The W3C specifications define the valid pseudo-class selectors. Only the official and browser-specific pseudo-class selectors should be used to get 2 | the expected impact in the final rendering.
5 | a:hoverr { /* Noncompliant; there is a typo on the word "hover" */ 6 | ... 7 | } 8 |
11 | a:hover { 12 | ... 13 | } 14 |
The W3C specifications define the valid pseudo-element selectors. Only the official and browser-specific pseudo-element selectors should be used to 2 | get the expected impact in the final rendering.
5 | a::beforre { /* Noncompliant; there is a typo on the word "before" */ 6 | ... 7 | } 8 |
11 | a::before { 12 | ... 13 | } 14 |
The W3C specifications define the valid media features. Only the official and browser-specific media features should be used to get the expected 2 | impact in the final rendering.
5 | @media screen and (unknown: 1000px) { .. } 6 |
9 | @media screen and (width: 1000px) { .. } 10 |
@media
The W3C specifications define the valid at-rules. Only the official and browser-specific at-rules should be used to get 2 | the expected impact in the final rendering.
at-rules
5 | @encoding "utf-8"; 6 |
9 | @charset "utf-8"; 10 |
An empty multi-line comment is likely to be a mistake and doesn't help to improve the readability of the code. For these reasons, it should be 2 | removed.
5 | /* */ 6 | 7 | /* 8 | 9 | */ 10 |
Order of instructions in CSS is important: instructions with equal specificity that occur later in the file take the priority. But when a selector 2 | with a higher specificity (e.g. p a { color: green;}) comes before the selector it overrides (e.g.: a { color: green;}), the 3 | priority is given to the first one. Even if it works properly, this is harder to anticipate the behaviour of the stylesheet while reading as it goes 4 | against the principle that the last instruction takes the priority.
p a { color: green;}
a { color: green;}
7 | p a { 8 | color: green; 9 | } 10 | 11 | a { 12 | color: blue; 13 | } 14 |
17 | a { 18 | color: blue; 19 | } 20 | 21 | p a { 22 | color: green; 23 | } 24 |
Duplication of selectors might indicate a copy-paste mistake. The rule detects the following kinds of duplications:
8 | .foo, .bar, .foo { ... } /* Noncompliant */ 9 | 10 | .class1 { ... } 11 | .class1 { ... } /* Noncompliant */ 12 |
15 | .foo, .bar { ... } 16 | 17 | .class1 { ... } 18 | .class2 { ... } 19 |
This rule raises an issue when a CSS file is empty (ie: containing only spaces).
The W3C specifications say comments should be defined using /* ... */. The use of // is not supported on all browsers and 2 | can lead to unexpected results.
/* ... */
//
5 | // some comment 6 | a { color: pink; } 7 |
10 | /* some comment */ 11 | a { color: pink; } 12 |
This rule ignores single line comments in less and scss files.
scss
HTML, SVG, and MathML define the selectors which can be used in a CSS. A selector that is not part of them is likely to be a typo or a 2 | misunderstanding of the CSS syntax.
5 | field {} 6 | 7 | ul list {} 8 |
11 | input {} 12 | 13 | ul li {} 14 |
To perform calculations when specifying a CSS property calc() function can be used. This function takes single expression as 2 | parameter. When writing this expression some rules must be respected:
calc()
Otherwise calc() function will be invalid and the entire rule using it will be ignored.
12 | .btn { 13 | border: solid black 1px; 14 | width: calc(100% 80px); /* Noncompliant */ 15 | } 16 |
19 | .btn { 20 | border: solid black 1px; 21 | width: calc(100% - 80px); 22 | } 23 |