Nesting depth 3 greater than max of 2 Open
&.fa {
- Read upRead up
- Exclude checks
Nesting Depth
Rule nesting-depth
will enforce how deeply a selector can be nested.
Options
-
max-depth
: number (defaults to2
)
Examples
When enabled (assuming max-depth: 2
) the deepest element (&:hover
and &--modifier
) are at at depth 2. Any nested selector deeper is disallowed:
.foo {
.baz {
&:hover {
// Deepest Nest Allowed
}
}
}
.block {
&__element {
&--modifier {
// Deepest Nest Allowed
}
}
}
Nesting depth 3 greater than max of 2 Open
i {
- Read upRead up
- Exclude checks
Nesting Depth
Rule nesting-depth
will enforce how deeply a selector can be nested.
Options
-
max-depth
: number (defaults to2
)
Examples
When enabled (assuming max-depth: 2
) the deepest element (&:hover
and &--modifier
) are at at depth 2. Any nested selector deeper is disallowed:
.foo {
.baz {
&:hover {
// Deepest Nest Allowed
}
}
}
.block {
&__element {
&--modifier {
// Deepest Nest Allowed
}
}
}
Pseudo-class should be nested within its parent Type-selector Open
a:not(.dropdown-item) {
- Read upRead up
- Exclude checks
Force Pseudo Nesting
Rule force-pseudo-nesting
will enforce the nesting of pseudo elements/classes.
Examples
When enabled, the following are disallowed: ```scss p:nth-of-type(2) { margin: 0; }
.parent { .child { p::first-line { color: #ff0000; } } }
.parent { .child { .sub p::first-line { color: #ff0000; } } } ```
When enabled, the following are allowed:
p {
&:nth-of-type(2) {
margin: 0;
}
}
.parent {
.child {
p {
&::first-line {
color: #ff0000;
}
}
}
}
.parent {
.child {
.sub p {
&::first-line {
color: #ff0000;
}
}
}
}
Multiline style comments should not be used Open
/* Margin bottom by footer height */
- Read upRead up
- Exclude checks
No CSS Comments
Rule no-css-comments
will enforce the use of Sass single-line comments and disallow CSS comments. Bang comments (/*! */
, will be printed even in minified mode) are still allowed.
Examples
When enabled the following are allowed:
// This is a good comment
// =========
// This is a good comment
// =========
//////////////////
// This is a good comment
//////////////////
/*! This is a good bang comment */
/*!
* This is a good bang comment
**/
When enabled the following are disallowed:
/* This comment will appear in your compiled css */
/*
* Mulitline comments are bad
*/
Pseudo-class should be nested within its parent Type-selector Open
a:not(.dropdown-item) {
- Read upRead up
- Exclude checks
Force Pseudo Nesting
Rule force-pseudo-nesting
will enforce the nesting of pseudo elements/classes.
Examples
When enabled, the following are disallowed: ```scss p:nth-of-type(2) { margin: 0; }
.parent { .child { p::first-line { color: #ff0000; } } }
.parent { .child { .sub p::first-line { color: #ff0000; } } } ```
When enabled, the following are allowed:
p {
&:nth-of-type(2) {
margin: 0;
}
}
.parent {
.child {
p {
&::first-line {
color: #ff0000;
}
}
}
}
.parent {
.child {
.sub p {
&::first-line {
color: #ff0000;
}
}
}
}
Rule .dropdown-menu .dropdown-item
should be merged with the rule on line 393 Open
.dropdown-menu .dropdown-item {
- Read upRead up
- Exclude checks
No Mergeable Selectors
Rule no-mergeable-selectors
will enforce that selectors aren't repeated and that their properties are merged. You may also pass a whitelist of selectors you wish to exclude from merging.
Options
-
whitelist
:[array of selectors]
(defaults to empty array[]
)
Examples
When enabled
with the default options, the following will generate a warning/error :
.foo {
content: 'bar';
}
//duplicate selector
.foo {
color: red;
}
h1,
h2,
h3 {
content: '';
}
// mergeable idents
h1, h2, h3 {
content: '';
}
.test {
.bar {
color: blue;
}
}
// 2 mergeable selectors .test & .test .bar
.test {
.bar {
color: red;
}
}
When whitelist: ['div p', 'div a']
the following will be allowed and no longer generate any mergeable warnings or errors:
div p {
color: red;
}
// will not be warned as mergeable / duplicate
div p {
content: '';
}
div a {
color: blue;
}
// will not be warned as mergeable / duplicate
div a {
content: '';
}
Note for Sass syntax users
Due to a bug in the current version of the AST we use, gonzales-pe, we are currently unable to enforce this rule within media queries, SCSS syntax is unaffected. We hope to rectify this soon.
Multiline style comments should not be used Open
/* Container text */
- Read upRead up
- Exclude checks
No CSS Comments
Rule no-css-comments
will enforce the use of Sass single-line comments and disallow CSS comments. Bang comments (/*! */
, will be printed even in minified mode) are still allowed.
Examples
When enabled the following are allowed:
// This is a good comment
// =========
// This is a good comment
// =========
//////////////////
// This is a good comment
//////////////////
/*! This is a good bang comment */
/*!
* This is a good bang comment
**/
When enabled the following are disallowed:
/* This comment will appear in your compiled css */
/*
* Mulitline comments are bad
*/
Pseudo-class should be nested within its parent Type-selector Open
a:hover span.vote-cancel {
- Read upRead up
- Exclude checks
Force Pseudo Nesting
Rule force-pseudo-nesting
will enforce the nesting of pseudo elements/classes.
Examples
When enabled, the following are disallowed: ```scss p:nth-of-type(2) { margin: 0; }
.parent { .child { p::first-line { color: #ff0000; } } }
.parent { .child { .sub p::first-line { color: #ff0000; } } } ```
When enabled, the following are allowed:
p {
&:nth-of-type(2) {
margin: 0;
}
}
.parent {
.child {
p {
&::first-line {
color: #ff0000;
}
}
}
}
.parent {
.child {
.sub p {
&::first-line {
color: #ff0000;
}
}
}
}
Multiline style comments should not be used Open
line-height: 30px; /* Vertically center the text there */
- Read upRead up
- Exclude checks
No CSS Comments
Rule no-css-comments
will enforce the use of Sass single-line comments and disallow CSS comments. Bang comments (/*! */
, will be printed even in minified mode) are still allowed.
Examples
When enabled the following are allowed:
// This is a good comment
// =========
// This is a good comment
// =========
//////////////////
// This is a good comment
//////////////////
/*! This is a good bang comment */
/*!
* This is a good bang comment
**/
When enabled the following are disallowed:
/* This comment will appear in your compiled css */
/*
* Mulitline comments are bad
*/
Multiline style comments should not be used Open
/* Set the fixed height of the footer here */
- Read upRead up
- Exclude checks
No CSS Comments
Rule no-css-comments
will enforce the use of Sass single-line comments and disallow CSS comments. Bang comments (/*! */
, will be printed even in minified mode) are still allowed.
Examples
When enabled the following are allowed:
// This is a good comment
// =========
// This is a good comment
// =========
//////////////////
// This is a good comment
//////////////////
/*! This is a good bang comment */
/*!
* This is a good bang comment
**/
When enabled the following are disallowed:
/* This comment will appear in your compiled css */
/*
* Mulitline comments are bad
*/
Multiline style comments should not be used Open
/* Global overrides */
- Read upRead up
- Exclude checks
No CSS Comments
Rule no-css-comments
will enforce the use of Sass single-line comments and disallow CSS comments. Bang comments (/*! */
, will be printed even in minified mode) are still allowed.
Examples
When enabled the following are allowed:
// This is a good comment
// =========
// This is a good comment
// =========
//////////////////
// This is a good comment
//////////////////
/*! This is a good bang comment */
/*!
* This is a good bang comment
**/
When enabled the following are disallowed:
/* This comment will appear in your compiled css */
/*
* Mulitline comments are bad
*/
Pseudo-class should be nested within its parent Type-selector Open
a:hover span.vote-status {
- Read upRead up
- Exclude checks
Force Pseudo Nesting
Rule force-pseudo-nesting
will enforce the nesting of pseudo elements/classes.
Examples
When enabled, the following are disallowed: ```scss p:nth-of-type(2) { margin: 0; }
.parent { .child { p::first-line { color: #ff0000; } } }
.parent { .child { .sub p::first-line { color: #ff0000; } } } ```
When enabled, the following are allowed:
p {
&:nth-of-type(2) {
margin: 0;
}
}
.parent {
.child {
p {
&::first-line {
color: #ff0000;
}
}
}
}
.parent {
.child {
.sub p {
&::first-line {
color: #ff0000;
}
}
}
}
Multiline style comments should not be used Open
/* Classes */
- Read upRead up
- Exclude checks
No CSS Comments
Rule no-css-comments
will enforce the use of Sass single-line comments and disallow CSS comments. Bang comments (/*! */
, will be printed even in minified mode) are still allowed.
Examples
When enabled the following are allowed:
// This is a good comment
// =========
// This is a good comment
// =========
//////////////////
// This is a good comment
//////////////////
/*! This is a good bang comment */
/*!
* This is a good bang comment
**/
When enabled the following are disallowed:
/* This comment will appear in your compiled css */
/*
* Mulitline comments are bad
*/
Vendor prefixes should not be used Open
-webkit-clip-path: none;
- Read upRead up
- Exclude checks
No Vendor Prefixes
Rule no-vendor-prefixes
will enforce that vendor prefixes are not allowed to be used.
List of prefixes affected by default: * webkit * moz * ms
Options
-
additional-identifiers
:[array of additional prefixes to check for]
(defaults to empty array[]
) -
excluded-identifiers
:[array of prefixes to exclude checking for]
(defaults to empty array[]
) -
ignore-non-standard
:true
:false
(defaults tofalse
)
Examples
When enabled, the following are disallowed:
@-webkit-keyframes anim {
0% { opacity: 0; }
}
.ms-block {
-ms-hyphenate-limit-lines: no-limit;
}
::-moz-placeholder {
content: '';
}
.foo {
-webkit-transition: none;
}
.bar {
position: -moz-sticky;
}
Additional Identifiers
When additional-identifiers
contains a custom prefix value of khtml
as show below
no-vendor-prefixes:
- 1
-
additional-identifiers:
- khtml
The following would now also be disallowed
.baz {
position: -khtml-sticky;
}
Excluded Identifiers
When excluded-identifiers
contains currently disallowed prefix values such as webkit
and moz
as show below
no-vendor-prefixes:
- 1
-
excluded-identifiers:
- webkit
- moz
The following would now be allowed
@-webkit-keyframes anim {
0% { opacity: 0; }
}
::-moz-placeholder {
content: '';
}
.foo {
-webkit-transition: none;
}
.bar {
position: -moz-sticky;
}
While the following would remain disallowed
.ms-block {
-ms-hyphenate-limit-lines: no-limit;
}
Ignore Non Standard
ignore-non-standard
is an option that allows you to specify whether only standard properties from our properties list should be affected by this rule or if any prefixed property / element should be affected.
When ignore-non-standard
is set to false
the following are disallowed, when ignore-non-standard
is set to true
the following are allowed:
html {
-webkit-tap-highlight-color: $link-color-hover;
}
button::-moz-focus-inner,
input::-moz-focus-inner {
border: 0;
padding: 0;
}
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
height: auto;
}