Type-selector should be nested within its parent Class Open
.content td {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Vendor prefixes should not be used Open
background-image: -moz-linear-gradient(top, $button-bg-active, $red);
- 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;
}
!important not allowed Open
margin: 0 !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Don't include leading zeros on numbers Open
padding: 0.6em 0;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Type-selector should be nested within its parent Type-selector Open
nav .sm li li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Hex values should use the shorthand format - 3 characters where possible Open
$lighter-blue: #66ccdd;
- Read upRead up
- Exclude checks
Hex Length
Rule hex-length
will enforce the length of hexadecimal values
Options
-
style
:short
/long
(defaults toshort
)
Examples
When style: short
, the following are allowed. When style: long
, the following are disallowed:
$foo-color: #456;
.bar {
background: linear-gradient(top, #3ff, #ddd);
}
.baz {
color: #fff;
}
When style: long
, the following are allowed. When style: short
, the following are disallowed:
$foo-color: #445566;
.bar {
background: linear-gradient(top, #33ffff, #dddddd);
}
.baz {
color: #ffffff;
}
In both cases the following will be allowed as the values cannot be shortened:
$quz-color: #abcdef;
.qux {
color: #123456;
}
Vendor prefixes should not be used Open
background-image: -webkit-linear-gradient(top, $button-bg, $button-bg-active);
- 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;
}
Don't include leading zeros on numbers Open
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Duplicate properties are not allowed within a block Open
background-image: -ms-linear-gradient(top,$button-bg-hover, $dark-red);
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Duplicate properties are not allowed within a block Open
background-image: -ms-linear-gradient(top, $button-bg-active, $red);
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}
Selectors must be placed on new lines Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
Vendor prefixes should not be used Open
-webkit-appearance: checkbox;
- 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;
}
Qualifying elements are not allowed for class selectors Open
a.button:hover {
- Read upRead up
- Exclude checks
No Qualifying Elements
Rule no-qualifying-elements
will enforce that selectors are not allowed to have qualifying elements.
Options
-
allow-element-with-attribute
:true
/false
(defaults tofalse
) -
allow-element-with-class
:true
/false
(defaults tofalse
) -
allow-element-with-id
:true
/false
(defaults tofalse
)
Examples
By default, the following are disallowed:
div.foo {
content: 'foo';
}
ul#foo {
content: 'foo';
}
input[type='email'] {
content: 'foo';
}
allow-element-with-attribute
When allow-element-with-attribute: true
, the following are allowed. When allow-element-with-attribute: false
, the following are disallowed.
input[type='email'] {
content: 'foo';
}
a[href] {
content: 'foo';
}
allow-element-with-class
When allow-element-with-class: true
, the following are allowed. When allow-element-with-class: false
, the following are disallowed.
div.foo {
content: 'foo';
}
h1.bar {
content: 'foo';
}
allow-element-with-id
When allow-element-with-id: true
, the following are allowed. When allow-element-with-id: false
, the following are disallowed.
ul#foo {
content: 'foo';
}
p#bar {
content: 'foo';
}
!important not allowed Open
margin: 0 2em 0 0 !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Don't include leading zeros on numbers Open
font-size: 0.8em;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Type-selector should be nested within its parent Type-selector Open
nav .sm li li:last-child a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Pseudo-class should be nested within its parent Class Open
.button:hover {
- 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;
}
}
}
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Vendor prefixes should not be used Open
background-image: -ms-linear-gradient(top, $button-bg-active, $red);
- 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;
}
Type-selector should be nested within its parent Class Open
.banner .button-large a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Duplicate properties are not allowed within a block Open
background-image: linear-gradient(top,$button-bg-hover, $dark-red);
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Qualifying elements are not allowed for attribute selectors Open
input[type="radio"] {
- Read upRead up
- Exclude checks
No Qualifying Elements
Rule no-qualifying-elements
will enforce that selectors are not allowed to have qualifying elements.
Options
-
allow-element-with-attribute
:true
/false
(defaults tofalse
) -
allow-element-with-class
:true
/false
(defaults tofalse
) -
allow-element-with-id
:true
/false
(defaults tofalse
)
Examples
By default, the following are disallowed:
div.foo {
content: 'foo';
}
ul#foo {
content: 'foo';
}
input[type='email'] {
content: 'foo';
}
allow-element-with-attribute
When allow-element-with-attribute: true
, the following are allowed. When allow-element-with-attribute: false
, the following are disallowed.
input[type='email'] {
content: 'foo';
}
a[href] {
content: 'foo';
}
allow-element-with-class
When allow-element-with-class: true
, the following are allowed. When allow-element-with-class: false
, the following are disallowed.
div.foo {
content: 'foo';
}
h1.bar {
content: 'foo';
}
allow-element-with-id
When allow-element-with-id: true
, the following are allowed. When allow-element-with-id: false
, the following are disallowed.
ul#foo {
content: 'foo';
}
p#bar {
content: 'foo';
}
Vendor prefixes should not be used Open
-webkit-appearance: radio;
- 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;
}
!important not allowed Open
margin: 0.5em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Don't include leading zeros on numbers Open
padding: 0 0.3em;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Duplicate properties are not allowed within a block Open
background-image: linear-gradient(top, $button-bg, $button-bg-active);
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Color functions such as 'rgba' should only be used in variable declarations Open
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Type-selector should be nested within its parent Class Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Class should be nested within its parent Type-selector Open
nav .sm a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Class Open
nav .sm li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Type-selector Open
nav .sm li li a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
padding: 0.6em !important;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Pseudo-class should be nested within its parent Type-selector Open
a:hover {
- 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;
}
}
}
}
Don't include leading zeros on numbers Open
padding: 0.5em;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Commas should be followed by a space Open
background-image: -moz-linear-gradient(top,$button-bg-hover, $dark-red);
- Read upRead up
- Exclude checks
Space After Comma
Rule space-after-comma
will enforce whether or not a space should be included after a comma (,
).
Options
-
include
:true
/false
(defaults totrue
)
Examples
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
@include baz('foo', 'bar');
box-shadow: 1px 1px black, 1px 1px black;
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
@include baz('foo','bar');
box-shadow: 1px 1px black,1px 1px black;
}
Duplicate properties are not allowed within a block Open
background-image: -webkit-linear-gradient(top,$button-bg-hover, $dark-red);
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Vendor prefixes should not be used Open
background-image: -webkit-linear-gradient(top, $button-bg-active, $red);
- 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;
}
Duplicate properties are not allowed within a block Open
background-image: linear-gradient(top, $button-bg-active, $red);
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}
No space allowed at beginning of parenthesis Open
clip: rect( 0 0 0 0 );
- Read upRead up
- Exclude checks
Space Between Parens
Rule space-between-parens
will enforce whether or not a space should be included before the first item and after the last item inside parenthesis (()
).
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
@function foo($bar) {
@return $bar;
}
@mixin bar($baz) {
content: $baz;
}
.foo {
@include bar('Hello');
content: foo('bar');
width: calc(100% - 10px);
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
@function foo( $bar ) {
@return $bar;
}
@mixin bar($baz ) {
content: $baz;
}
.foo {
@include bar( 'Hello' );
content: foo( 'bar');
width: calc( 100% - 10px);
}
No space allowed at end of parenthesis Open
clip: rect( 0 0 0 0 );
- Read upRead up
- Exclude checks
Space Between Parens
Rule space-between-parens
will enforce whether or not a space should be included before the first item and after the last item inside parenthesis (()
).
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
@function foo($bar) {
@return $bar;
}
@mixin bar($baz) {
content: $baz;
}
.foo {
@include bar('Hello');
content: foo('bar');
width: calc(100% - 10px);
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
@function foo( $bar ) {
@return $bar;
}
@mixin bar($baz ) {
content: $baz;
}
.foo {
@include bar( 'Hello' );
content: foo( 'bar');
width: calc( 100% - 10px);
}
Strings must use single quotes Open
input[type="checkbox"] {
- Read upRead up
- Exclude checks
Quotes
Rule quotes
will enforce whether single quotes (''
) or double quotes (""
) should be used for all strings.
Options
-
style
:single
/double
(defaults tosingle
)
Examples
When style: single
, the following are allowed. When style: double
, the following are disallowed:
.foo {
content: 'bar';
}
When style: double
, the following are allowed. When style: single
, the following are disallowed:
.foo {
content: "bar";
}
Selectors must be placed on new lines Open
strong, b {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
Pseudo-class should be nested within its parent Class Open
a.button:hover {
- 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;
}
}
}
}
Class should be nested within its parent Type-selector Open
nav .sm li li li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Hex values should use the shorthand format - 3 characters where possible Open
$alert-bg: #ffdddd;
- Read upRead up
- Exclude checks
Hex Length
Rule hex-length
will enforce the length of hexadecimal values
Options
-
style
:short
/long
(defaults toshort
)
Examples
When style: short
, the following are allowed. When style: long
, the following are disallowed:
$foo-color: #456;
.bar {
background: linear-gradient(top, #3ff, #ddd);
}
.baz {
color: #fff;
}
When style: long
, the following are allowed. When style: short
, the following are disallowed:
$foo-color: #445566;
.bar {
background: linear-gradient(top, #33ffff, #dddddd);
}
.baz {
color: #ffffff;
}
In both cases the following will be allowed as the values cannot be shortened:
$quz-color: #abcdef;
.qux {
color: #123456;
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Commas should be followed by a space Open
background-image: linear-gradient(top,$button-bg-hover, $dark-red);
- Read upRead up
- Exclude checks
Space After Comma
Rule space-after-comma
will enforce whether or not a space should be included after a comma (,
).
Options
-
include
:true
/false
(defaults totrue
)
Examples
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
@include baz('foo', 'bar');
box-shadow: 1px 1px black, 1px 1px black;
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
@include baz('foo','bar');
box-shadow: 1px 1px black,1px 1px black;
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Selectors must be placed on new lines Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
Attribute-selector should be nested within its parent Type-selector Open
input[type="checkbox"] {
- Read upRead up
- Exclude checks
Force Attribute Nesting
Rule force-attribute-nesting
will enforce the nesting of attributes
Examples
When enabled, the following are disallowed: ```scss input[type='radio'] { color: red; }
a[target='_blank'] { content: ''; }
.form { .class input[type='text'] { padding: 0; } } ```
When enabled, the following are allowed:
input {
&[type='radio'] {
color: red;
}
}
a {
&[target='_blank'] {
content: '';
}
}
.form {
.class input {
&[type='text'] {
padding: 0;
}
}
}
Qualifying elements are not allowed for attribute selectors Open
input[type="checkbox"] {
- Read upRead up
- Exclude checks
No Qualifying Elements
Rule no-qualifying-elements
will enforce that selectors are not allowed to have qualifying elements.
Options
-
allow-element-with-attribute
:true
/false
(defaults tofalse
) -
allow-element-with-class
:true
/false
(defaults tofalse
) -
allow-element-with-id
:true
/false
(defaults tofalse
)
Examples
By default, the following are disallowed:
div.foo {
content: 'foo';
}
ul#foo {
content: 'foo';
}
input[type='email'] {
content: 'foo';
}
allow-element-with-attribute
When allow-element-with-attribute: true
, the following are allowed. When allow-element-with-attribute: false
, the following are disallowed.
input[type='email'] {
content: 'foo';
}
a[href] {
content: 'foo';
}
allow-element-with-class
When allow-element-with-class: true
, the following are allowed. When allow-element-with-class: false
, the following are disallowed.
div.foo {
content: 'foo';
}
h1.bar {
content: 'foo';
}
allow-element-with-id
When allow-element-with-id: true
, the following are allowed. When allow-element-with-id: false
, the following are disallowed.
ul#foo {
content: 'foo';
}
p#bar {
content: 'foo';
}
Strings must use single quotes Open
input[type="radio"] {
- Read upRead up
- Exclude checks
Quotes
Rule quotes
will enforce whether single quotes (''
) or double quotes (""
) should be used for all strings.
Options
-
style
:single
/double
(defaults tosingle
)
Examples
When style: single
, the following are allowed. When style: double
, the following are disallowed:
.foo {
content: 'bar';
}
When style: double
, the following are allowed. When style: single
, the following are disallowed:
.foo {
content: "bar";
}
Type-selector should be nested within its parent Class Open
nav .sm li ul {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Type-selector Open
nav .sm li li a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Vendor prefixes should not be used Open
background-image: -moz-linear-gradient(top, $button-bg, $button-bg-active);
- 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;
}
Vendor prefixes should not be used Open
background-image: -ms-linear-gradient(top,$button-bg-hover, $dark-red);
- 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;
}
Class should be nested within its parent Type-selector Open
nav .sm li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Type-selector Open
.banner p a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Commas should be followed by a space Open
background-image: -webkit-linear-gradient(top,$button-bg-hover, $dark-red);
- Read upRead up
- Exclude checks
Space After Comma
Rule space-after-comma
will enforce whether or not a space should be included after a comma (,
).
Options
-
include
:true
/false
(defaults totrue
)
Examples
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
@include baz('foo', 'bar');
box-shadow: 1px 1px black, 1px 1px black;
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
@include baz('foo','bar');
box-shadow: 1px 1px black,1px 1px black;
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Type-selector should be nested within its parent Class Open
nav .sm li li a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Hex notation should all be lower case Open
$light-blue: #89C4F4;
- Read upRead up
- Exclude checks
Hex Notation
Rule hex-notation
will enforce the case of hexadecimal values
Options
-
style
:lowercase
/uppercase
(defaults tolowercase
)
Examples
When style: lowercase
, the following are allowed. When style: uppercase
, the following are disallowed:
$foo-color: #fff;
.bar {
background: linear-gradient(top, #cc2, #44d);
}
.baz {
color: #12a;
}
When style: uppercase
, the following are allowed. When style: lowercase
, the following are disallowed:
$foo-color: #FFF;
.bar {
background: linear-gradient(top, #CC2, #44D);
}
.baz {
color: #12A;
}
In both cases the following will be allowed as the values contain only numbers:
.qux {
color: #123;
}
Don't include leading zeros on numbers Open
margin: 0.5em 0;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Vendor prefixes should not be used Open
background-image: -moz-linear-gradient(top,$button-bg-hover, $dark-red);
- 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;
}
Vendor prefixes should not be used Open
background-image: -webkit-linear-gradient(top,$button-bg-hover, $dark-red);
- 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;
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Vendor prefixes should not be used Open
-moz-appearance: checkbox;
- 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;
}
Type-selector should be nested within its parent Class Open
nav .sm a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
color: $dark-blue-grey !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
nav .sm li li:last-child a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Duplicate properties are not allowed within a block Open
background-image: -ms-linear-gradient(top, $button-bg, $button-bg-active);
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
!important not allowed Open
color: $nearly-white !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Class should be nested within its parent Type-selector Open
nav .sm {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
padding: 0.6em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Don't include leading zeros on numbers Open
border-left: 0.2em solid $light-grey;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
!important not allowed Open
padding-left: 0 !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Class should be nested within its parent Type-selector Open
nav .sm li ul {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Class should be nested within its parent Type-selector Open
nav .sm li li a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
color: $light-blue !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Hex values should use the shorthand format - 3 characters where possible Open
$notice-bg: #ddffdd;
- Read upRead up
- Exclude checks
Hex Length
Rule hex-length
will enforce the length of hexadecimal values
Options
-
style
:short
/long
(defaults toshort
)
Examples
When style: short
, the following are allowed. When style: long
, the following are disallowed:
$foo-color: #456;
.bar {
background: linear-gradient(top, #3ff, #ddd);
}
.baz {
color: #fff;
}
When style: long
, the following are allowed. When style: short
, the following are disallowed:
$foo-color: #445566;
.bar {
background: linear-gradient(top, #33ffff, #dddddd);
}
.baz {
color: #ffffff;
}
In both cases the following will be allowed as the values cannot be shortened:
$quz-color: #abcdef;
.qux {
color: #123456;
}
Hex values should use the shorthand format - 3 characters where possible Open
$lightest-blue: #00eeff;
- Read upRead up
- Exclude checks
Hex Length
Rule hex-length
will enforce the length of hexadecimal values
Options
-
style
:short
/long
(defaults toshort
)
Examples
When style: short
, the following are allowed. When style: long
, the following are disallowed:
$foo-color: #456;
.bar {
background: linear-gradient(top, #3ff, #ddd);
}
.baz {
color: #fff;
}
When style: long
, the following are allowed. When style: short
, the following are disallowed:
$foo-color: #445566;
.bar {
background: linear-gradient(top, #33ffff, #dddddd);
}
.baz {
color: #ffffff;
}
In both cases the following will be allowed as the values cannot be shortened:
$quz-color: #abcdef;
.qux {
color: #123456;
}
Type-selector should be nested within its parent Type-selector Open
form div {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Color functions such as 'rgba' should only be used in variable declarations Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
No Color Literals
Rule no-color-literals
will disallow the use of color literals and basic color functions in any declarations other than variables or maps/lists.
The list of affected color functions are as follows:
* rgb
* rgba
* hsl
* hsla
Other color functions, such as adjust-color
and mix
, may be used, but the original color must be passed in as a variable.
Options
-
allow-map-identifiers
:true
/false
(defaults totrue
) -
allow-rgba
:true
/false
(defaults tofalse
) -
allow-variable-identifiers
:true
/false
(defaults totrue
)
Examples
When enabled and default options are used the following are disallowed.
.literal {
color: mediumslateblue;
}
.linear-gradient-func {
background: linear-gradient(top, #fff, white);
}
.box-shadow {
box-shadow: 1px 1px black, 1px 1px black;
}
.background {
background: 1px solid white;
}
.hex {
color: #fff;
}
// rgb function passed directly as function argument
.adj {
color: adjust-color(rgb(255, 0, 0), $blue: 5);
}
// hsl function passed directly as function argument
.scale {
color: scale-color(hsl(120, 70%, 80%), $lightness: 50%);
}
// hsl function passed directly as function argument
.change {
color: change-color(hsl(25, 100%, 80%), $lightness: 40%, $alpha: .8);
}
// color literal passed directly as function argument
.function {
color: test(#fff);
}
// color functions used directly as property values
.rgb {
color: rgb(255, 255, 255);
}
.rgba {
color: rgba(255, 255, 255, .3);
}
.hsl {
color: hsl(40, 50%, 50%);
}
.hsla {
color: hsla(40, 50%, 50%, .3);
}
When enabled and default options are used the following are allowed.
$literal: mediumslateblue;
$hexVar: #fff;
$rgb: rgb(255, 255, 255);
$rgba: rgba(255, 255, 255, .3);
$hsl: hsl(40, 50%, 50%);
$hsla: hsla(40, 50%, 50%, .3);
// using color literals as property names
$colors: (
red: #fff,
blue : (
orange: #fff
)
);
// using color literals as variable identifiers
$black: #000;
.literal {
color: $literal;
}
.linear-gradient-func {
background: linear-gradient(top, $hexVar, $literal);
}
.background {
background: 1px solid $literal;
}
.hex {
color: $hexVar;
}
.adj {
color: adjust-color($off-red, $blue: 5);
}
.scale {
color: scale-color($off-blue, $lightness: 50%);
}
.change {
color: change-color($orange-extra, $lightness: 40%, $alpha: .8);
}
.function {
color: test($hexVar);
}
.rgb {
color: $rgb;
}
.rgba {
color: $rgba;
}
.hsl {
color: $hsl;
}
.hsla {
color: $hsla;
}
[allow-rgba: true]
When enabled and allow-rgba
is set to true
, the following will be allowed:
// rgba in variables is still fine
$rgba: rgba(255, 0, 0, .5);
$red: rgb(255, 255, 255,);
// rgba can be used directly to alter a variables opacity
.color {
color: rgba($red, .3);
}
In addition, when enabled and allow-rgba
is set to true
, the following will be disallowed:
.color {
// you must use variables and not literals
color: rgba(0, 0, 0, .3);
color: rgba(black, .3);
}
[allow-variable-identifiers: false]
When enabled and allow-variable-identifiers
is set to false
, the following will be disallowed
// variable uses a color literal as an identifier
$black: #000
// variable using a color literal as an identifier is passed to a function
.test {
color: adjust-color($off-red, $blue: 5)
}
When enabled and allow-variable-identifiers
is set to false
, the following will be allowed
// variable not directly using a color literal as an identifier
$primary-black: #000
[allow-map-identifiers: false]
When enabled and allow-map-identifiers
is set to false
, the following will be disallowed
// map identifiers red, blue and orange share their name with a
// color literal and therefore shouldn't be used
$colors: (
red: #f00,
blue: (
orange: $orange
)
)
When enabled and allow-map-identifiers
is set to false
, the following will be allowed
$colors: (
primary-red: #f00,
map-blue: (
off-orange: $orange
)
)
Type-selector should be nested within its parent Class Open
.content tr {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Duplicate properties are not allowed within a block Open
background-image: -webkit-linear-gradient(top, $button-bg, $button-bg-active);
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}
Qualifying elements are not allowed for class selectors Open
input.long {
- Read upRead up
- Exclude checks
No Qualifying Elements
Rule no-qualifying-elements
will enforce that selectors are not allowed to have qualifying elements.
Options
-
allow-element-with-attribute
:true
/false
(defaults tofalse
) -
allow-element-with-class
:true
/false
(defaults tofalse
) -
allow-element-with-id
:true
/false
(defaults tofalse
)
Examples
By default, the following are disallowed:
div.foo {
content: 'foo';
}
ul#foo {
content: 'foo';
}
input[type='email'] {
content: 'foo';
}
allow-element-with-attribute
When allow-element-with-attribute: true
, the following are allowed. When allow-element-with-attribute: false
, the following are disallowed.
input[type='email'] {
content: 'foo';
}
a[href] {
content: 'foo';
}
allow-element-with-class
When allow-element-with-class: true
, the following are allowed. When allow-element-with-class: false
, the following are disallowed.
div.foo {
content: 'foo';
}
h1.bar {
content: 'foo';
}
allow-element-with-id
When allow-element-with-id: true
, the following are allowed. When allow-element-with-id: false
, the following are disallowed.
ul#foo {
content: 'foo';
}
p#bar {
content: 'foo';
}
Don't include leading zeros on numbers Open
margin: 0.4em;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Type-selector should be nested within its parent Class Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Pseudo-class should be nested within its parent Class Open
.button:active {
- 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;
}
}
}
}
Type-selector should be nested within its parent Type-selector Open
nav .sm li li a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Don't include leading zeros on numbers Open
margin: 0.5em !important;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Don't include leading zeros on numbers Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Don't include leading zeros on numbers Open
padding: 0.5em;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Class should be nested within its parent Type-selector Open
input.long {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
padding-left: 0.4em;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Vendor prefixes should not be used Open
background-image: -ms-linear-gradient(top, $button-bg, $button-bg-active);
- 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;
}
Type-selector should be nested within its parent Type-selector Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Class should be nested within its parent Type-selector Open
a.button:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Space expected after :
Open
background-color:$button-bg-hover;
- Read upRead up
- Exclude checks
Space After Colon
Rule space-after-colon
will enforce whether or not a space should be included after a colon (:
).
Options
-
include
:true
/false
(defaults totrue
)
Examples
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
content: 'bar';
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
content:'bar';
}
Type-selector should be nested within its parent Class Open
nav .sm li li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Pseudo-class should be nested within its parent Type-selector Open
nav .sm li li:last-child a {
- 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;
}
}
}
}
Duplicate properties are not allowed within a block Open
background-image: -webkit-linear-gradient(top, $button-bg-active, $red);
- Read upRead up
- Exclude checks
No Duplicate Properties
Rule no-duplicate-properties
will enforce that duplicate properties are not allowed within the same block.
Options
-
exclude
:[array of property names to be excluded from this rule]
(defaults to empty array[]
)
Examples
When enabled, the following are disallowed:
.foo {
margin: 0 0 15px;
margin: 0;
}
Exclude
When a property is added to the exclude array as shown below then you may place duplicate properties immediately after one another, this is to prevent accidental duplication of properties.
no-duplicate-properties:
- 1
-
exclude:
- display
When display
is added to the exclude array the following would be allowed:
.display-block {
display: flex;
display: inline-block;
float: right;
}
When display
is added to the exclude array the following would still be disallowed as the duplicate properties are separated by another property:
.display-block {
display: flex;
float: right;
display: inline-block;
}
Class should be nested within its parent Type-selector Open
input.medium {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Qualifying elements are not allowed for class selectors Open
input.medium {
- Read upRead up
- Exclude checks
No Qualifying Elements
Rule no-qualifying-elements
will enforce that selectors are not allowed to have qualifying elements.
Options
-
allow-element-with-attribute
:true
/false
(defaults tofalse
) -
allow-element-with-class
:true
/false
(defaults tofalse
) -
allow-element-with-id
:true
/false
(defaults tofalse
)
Examples
By default, the following are disallowed:
div.foo {
content: 'foo';
}
ul#foo {
content: 'foo';
}
input[type='email'] {
content: 'foo';
}
allow-element-with-attribute
When allow-element-with-attribute: true
, the following are allowed. When allow-element-with-attribute: false
, the following are disallowed.
input[type='email'] {
content: 'foo';
}
a[href] {
content: 'foo';
}
allow-element-with-class
When allow-element-with-class: true
, the following are allowed. When allow-element-with-class: false
, the following are disallowed.
div.foo {
content: 'foo';
}
h1.bar {
content: 'foo';
}
allow-element-with-id
When allow-element-with-id: true
, the following are allowed. When allow-element-with-id: false
, the following are disallowed.
ul#foo {
content: 'foo';
}
p#bar {
content: 'foo';
}
Type-selector should be nested within its parent Class Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Attribute-selector should be nested within its parent Type-selector Open
input[type="radio"] {
- Read upRead up
- Exclude checks
Force Attribute Nesting
Rule force-attribute-nesting
will enforce the nesting of attributes
Examples
When enabled, the following are disallowed: ```scss input[type='radio'] { color: red; }
a[target='_blank'] { content: ''; }
.form { .class input[type='text'] { padding: 0; } } ```
When enabled, the following are allowed:
input {
&[type='radio'] {
color: red;
}
}
a {
&[target='_blank'] {
content: '';
}
}
.form {
.class input {
&[type='text'] {
padding: 0;
}
}
}
Class should be nested within its parent Type-selector Open
nav .sm li li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
margin: 0 !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
nav .sm li li a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Class Open
nav .sm li li li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Commas should be followed by a space Open
background-image: -ms-linear-gradient(top,$button-bg-hover, $dark-red);
- Read upRead up
- Exclude checks
Space After Comma
Rule space-after-comma
will enforce whether or not a space should be included after a comma (,
).
Options
-
include
:true
/false
(defaults totrue
)
Examples
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
@include baz('foo', 'bar');
box-shadow: 1px 1px black, 1px 1px black;
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
@include baz('foo','bar');
box-shadow: 1px 1px black,1px 1px black;
}
Selectors must be placed on new lines Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
Vendor prefixes should not be used Open
-moz-appearance: radio;
- 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;
}
Type-selector should be nested within its parent Type-selector Open
nav .sm li ul {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
padding-bottom: 0.2em !important;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Type-selector should be nested within its parent Pseudo-class Open
nav .sm li li:last-child a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Class should be nested within its parent Type-selector Open
nav .sm li li:last-child a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Class Open
.banner p a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
ID selectors not allowed Open
#content h3 {
- Read upRead up
- Exclude checks
No IDs
Rule no-ids
will enforce that ID selectors are not allowed to be used.
Examples
When enabled, the following are disallowed:
#foo {
content: 'bar';
}
Pseudo-class should be nested within its parent Type-selector Open
.sidebar a:hover {
- 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;
}
}
}
}
!important not allowed Open
color: $blue !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.post img {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
font-size: 0.9em;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
!important not allowed Open
color: $blue !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.sidebar li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
padding: 0.5em;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Pseudo-class should be nested within its parent Type-selector Open
.banner p a:hover {
- 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;
}
}
}
}
ID selectors not allowed Open
#footer a:hover {
- Read upRead up
- Exclude checks
No IDs
Rule no-ids
will enforce that ID selectors are not allowed to be used.
Examples
When enabled, the following are disallowed:
#foo {
content: 'bar';
}
!important not allowed Open
color: $light-blue !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
!important not allowed Open
color: $dark-grey !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.comment footer {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
font-size: 1.3em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Color #ffdddd
should be written as #fdd
Open
$alert-bg: #ffdddd;
- Exclude checks
Type-selector should be nested within its parent Type-selector Open
nav .sm li li li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
margin: 0.5em !important;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Type-selector should be nested within its parent Id Open
#content h2 {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
color: $light-blue !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Pseudo-class should be nested within its parent Type-selector Open
nav .sm li li a:hover {
- 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;
}
}
}
}
!important not allowed Open
color: $blue !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
!important not allowed Open
margin: 0.5em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.sidebar header a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Color literals like rgba(255, 96, 96, 0.85)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Type-selector should be nested within its parent Class Open
.sidebar li:first-child {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
padding-top: 0 !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.algolia-logo img {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
color: $dark-blue-grey !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
!important not allowed Open
font-size: 0.9em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Don't include leading zeros on numbers Open
margin: 0.5em 0 0;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Color #89C4F4
should be written as #89c4f4
Open
$light-blue: #89C4F4;
- Exclude checks
Avoid vendor prefixes. Open
background-image: -moz-linear-gradient(top,$button-bg-hover, $dark-red);
- Exclude checks
Type-selector should be nested within its parent Class Open
.sidebar section {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Color literals like rgba(255, 192, 192, 0.5)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Type-selector should be nested within its parent Class Open
.check-list li,
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Id Open
#content h3 {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
padding: 0.2em 0;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
!important not allowed Open
color: $dark-blue-grey !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
ID selectors not allowed Open
#footer a {
- Read upRead up
- Exclude checks
No IDs
Rule no-ids
will enforce that ID selectors are not allowed to be used.
Examples
When enabled, the following are disallowed:
#foo {
content: 'bar';
}
Type-selector should be nested within its parent Class Open
.content header a,
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Type-selector Open
.content footer a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Class Open
.comment h2 {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Class '.comment_form' should be written in lowercase with hyphens Open
.comment_form p {
- Read upRead up
- Exclude checks
Class Name Format
Rule class-name-format
will enforce a convention for class names.
Options
-
allow-leading-underscore
:true
/false
(defaults totrue
) -
convention
:'hyphenatedlowercase'
(default),camelcase
,snakecase
,strictbem
,hyphenatedbem
, or a Regular Expression that the class name must match (e.g.^[_A-Z]+$
) -
convention-explanation
: Custom explanation to display to the user if a class doesn't adhere to the convention -
ignore
: Array of names to ignore
Example 1
Settings:
- allow-leading-underscore: true
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&._with-leading-underscore {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 2
Settings:
- allow-leading-underscore: false
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&.another-hyphenated-lowercase {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
._with-leading-underscore {
content: '';
}
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 3
Settings:
- convention: camelcase
When enabled, the following are allowed:
.camelCase {
content: '';
}
.foo {
@extend .anotherCamelCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 4
Settings:
- convention: pascalcase
When enabled, the following are allowed:
.PascalCase {
content: '';
}
.Foo {
@extend .AnotherPascalCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 5
Settings:
- convention: snakecase
When enabled, the following are allowed:
.snake_case {
content: '';
}
.foo {
@extend .another_snake_case;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 6
Settings:
- convention: strictbem
When enabled, the following are allowed:
.block-name__elem-name {
content: '';
}
.owner-name_mod-name_mod-val {
content: '';
}
.block-name__elem-name_mod-bool {
content: '';
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 7
Settings:
- convention: hyphenatedbem
When enabled, the following are allowed:
.site-search {
color: blue;
width: 50px;
height: 100%;
}
.site-search__field {
text-decoration: underline;
}
.site-search--full {
color: green;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 8
Settings:
- convention: ^[_A-Z]+$
- convention-explanation: 'Class must contain only uppercase letters and underscores'
When enabled, the following are allowed:
.SCREAMING_SNAKE_CASE {
content: '';
}
.foo {
@extend .SCREAMING_SNAKE_CASE;
}
When enabled, the following are disallowed:
(Each line with a class will report Class must contain only uppercase letters and underscores
when linted.)
.HYPHENATED-UPPERCASE {
content: '';
}
.snake_case {
content: '';
}
.foo {
@extend .camelCase;
}
Class should be nested within its parent Class Open
.comment_form .author {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
A value of none
is not allowed. 0
must be used. Open
border: none;
- Read upRead up
- Exclude checks
Border Zero
Rule border-zero
will enforce whether one should use 0
or none
when specifying a zero border
value
Options
-
convention
:'0'
/'none'
(defaults to0
)
If an invalid convention is provided the rule will default back to
convention: '0'
. An extra warning/error will also be thrown online 1
column 1
of a file with a lint issue to inform you of this fact.
Examples
When convention: '0'
, the following are allowed. When convention: 'none'
, the following are disallowed:
.foo {
border: 0;
}
.bar {
border-right: 0;
}
When convention: 'none'
, the following are allowed. When convention: '0'
, the following are disallowed:
.foo {
border: none;
}
.bar {
border-left: none;
}
Invalid conventions
When the invalid convention convention: 'zero'
is supplied, the following are allowed as the rule defaults to convention: '0'
.
.foo {
border: none;
}
.bar {
border-left: 0;
}
Color literals like rgba(255, 96, 96, 0.85)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Class should be nested within its parent Class Open
.banner .button-large a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
margin-bottom: 1em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Pseudo-class should be nested within its parent Type-selector Open
.sidebar li:first-child {
- 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;
}
}
}
}
Type-selector should be nested within its parent Type-selector Open
.content header a,
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Class Open
.content header a:hover,
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Pseudo-class should be nested within its parent Type-selector Open
.content footer a:hover {
- 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;
}
}
}
}
Type-selector should be nested within its parent Class Open
.comment header {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Class '.comment_form' should be written in lowercase with hyphens Open
.comment_form .author {
- Read upRead up
- Exclude checks
Class Name Format
Rule class-name-format
will enforce a convention for class names.
Options
-
allow-leading-underscore
:true
/false
(defaults totrue
) -
convention
:'hyphenatedlowercase'
(default),camelcase
,snakecase
,strictbem
,hyphenatedbem
, or a Regular Expression that the class name must match (e.g.^[_A-Z]+$
) -
convention-explanation
: Custom explanation to display to the user if a class doesn't adhere to the convention -
ignore
: Array of names to ignore
Example 1
Settings:
- allow-leading-underscore: true
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&._with-leading-underscore {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 2
Settings:
- allow-leading-underscore: false
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&.another-hyphenated-lowercase {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
._with-leading-underscore {
content: '';
}
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 3
Settings:
- convention: camelcase
When enabled, the following are allowed:
.camelCase {
content: '';
}
.foo {
@extend .anotherCamelCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 4
Settings:
- convention: pascalcase
When enabled, the following are allowed:
.PascalCase {
content: '';
}
.Foo {
@extend .AnotherPascalCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 5
Settings:
- convention: snakecase
When enabled, the following are allowed:
.snake_case {
content: '';
}
.foo {
@extend .another_snake_case;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 6
Settings:
- convention: strictbem
When enabled, the following are allowed:
.block-name__elem-name {
content: '';
}
.owner-name_mod-name_mod-val {
content: '';
}
.block-name__elem-name_mod-bool {
content: '';
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 7
Settings:
- convention: hyphenatedbem
When enabled, the following are allowed:
.site-search {
color: blue;
width: 50px;
height: 100%;
}
.site-search__field {
text-decoration: underline;
}
.site-search--full {
color: green;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 8
Settings:
- convention: ^[_A-Z]+$
- convention-explanation: 'Class must contain only uppercase letters and underscores'
When enabled, the following are allowed:
.SCREAMING_SNAKE_CASE {
content: '';
}
.foo {
@extend .SCREAMING_SNAKE_CASE;
}
When enabled, the following are disallowed:
(Each line with a class will report Class must contain only uppercase letters and underscores
when linted.)
.HYPHENATED-UPPERCASE {
content: '';
}
.snake_case {
content: '';
}
.foo {
@extend .camelCase;
}
Color #ddffdd
should be written as #dfd
Open
$notice-bg: #ddffdd;
- Exclude checks
Type-selector should be nested within its parent Type-selector Open
nav .sm li li a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
ID selectors not allowed Open
#content h2 {
- Read upRead up
- Exclude checks
No IDs
Rule no-ids
will enforce that ID selectors are not allowed to be used.
Examples
When enabled, the following are disallowed:
#foo {
content: 'bar';
}
!important not allowed Open
color: $dark-blue-grey !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
!important not allowed Open
padding: 1.5em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Selectors must be placed on new lines Open
.sidebar header, p {
- Read upRead up
- Exclude checks
Single Line Per Selector
Rule single-line-per-selector
will enforce whether selectors should be placed on a new line.
Examples
When enabled, the following are allowed:
.foo,
.bar {
content: 'baz';
}
When enabled, the following are disallowed:
.foo, .bar {
content: 'baz';
}
Pseudo-class should be nested within its parent Type-selector Open
#footer a:hover {
- 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;
}
}
}
}
Pseudo-class should be nested within its parent Type-selector Open
.sidebar header a:hover {
- 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;
}
}
}
}
Pseudo-class should be nested within its parent Type-selector Open
.post p:first-of-type img {
- 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;
}
}
}
}
!important not allowed Open
margin-bottom: 1em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Class should be nested within its parent Class Open
.comment_form .title {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Color literals like rgba(0, 0, 0, 0.75)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Class should be nested within its parent Class Open
.header .alerts {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
padding: 0.5em;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
!important not allowed Open
color: $nearly-black !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.sidebar a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
border-bottom: 0 !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Id Open
#footer a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Id Open
#footer a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Class Open
.sidebar header a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Class '.comment_form' should be written in lowercase with hyphens Open
.comment_form {
- Read upRead up
- Exclude checks
Class Name Format
Rule class-name-format
will enforce a convention for class names.
Options
-
allow-leading-underscore
:true
/false
(defaults totrue
) -
convention
:'hyphenatedlowercase'
(default),camelcase
,snakecase
,strictbem
,hyphenatedbem
, or a Regular Expression that the class name must match (e.g.^[_A-Z]+$
) -
convention-explanation
: Custom explanation to display to the user if a class doesn't adhere to the convention -
ignore
: Array of names to ignore
Example 1
Settings:
- allow-leading-underscore: true
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&._with-leading-underscore {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 2
Settings:
- allow-leading-underscore: false
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&.another-hyphenated-lowercase {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
._with-leading-underscore {
content: '';
}
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 3
Settings:
- convention: camelcase
When enabled, the following are allowed:
.camelCase {
content: '';
}
.foo {
@extend .anotherCamelCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 4
Settings:
- convention: pascalcase
When enabled, the following are allowed:
.PascalCase {
content: '';
}
.Foo {
@extend .AnotherPascalCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 5
Settings:
- convention: snakecase
When enabled, the following are allowed:
.snake_case {
content: '';
}
.foo {
@extend .another_snake_case;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 6
Settings:
- convention: strictbem
When enabled, the following are allowed:
.block-name__elem-name {
content: '';
}
.owner-name_mod-name_mod-val {
content: '';
}
.block-name__elem-name_mod-bool {
content: '';
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 7
Settings:
- convention: hyphenatedbem
When enabled, the following are allowed:
.site-search {
color: blue;
width: 50px;
height: 100%;
}
.site-search__field {
text-decoration: underline;
}
.site-search--full {
color: green;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 8
Settings:
- convention: ^[_A-Z]+$
- convention-explanation: 'Class must contain only uppercase letters and underscores'
When enabled, the following are allowed:
.SCREAMING_SNAKE_CASE {
content: '';
}
.foo {
@extend .SCREAMING_SNAKE_CASE;
}
When enabled, the following are disallowed:
(Each line with a class will report Class must contain only uppercase letters and underscores
when linted.)
.HYPHENATED-UPPERCASE {
content: '';
}
.snake_case {
content: '';
}
.foo {
@extend .camelCase;
}
!important not allowed Open
padding-bottom: 0.2em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Class should be nested within its parent Type-selector Open
nav .sm li li a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Type-selector Open
nav .sm li li li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Class Open
.quote-list li {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
padding-bottom: 0 !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.content footer a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
color: $light-blue !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.post p:first-of-type img {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
padding: 2em 1.5em 0.5em !important;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
!important not allowed Open
padding-top: 0.5em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.comment_form p {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Class '.comment_form' should be written in lowercase with hyphens Open
.comment_form .title {
- Read upRead up
- Exclude checks
Class Name Format
Rule class-name-format
will enforce a convention for class names.
Options
-
allow-leading-underscore
:true
/false
(defaults totrue
) -
convention
:'hyphenatedlowercase'
(default),camelcase
,snakecase
,strictbem
,hyphenatedbem
, or a Regular Expression that the class name must match (e.g.^[_A-Z]+$
) -
convention-explanation
: Custom explanation to display to the user if a class doesn't adhere to the convention -
ignore
: Array of names to ignore
Example 1
Settings:
- allow-leading-underscore: true
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&._with-leading-underscore {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 2
Settings:
- allow-leading-underscore: false
- convention: hyphenatedlowercase
When enabled, the following are allowed:
.hyphenated-lowercase {
content: '';
&.another-hyphenated-lowercase {
content: '';
}
}
.foo {
@extend .hyphenated-lowercase;
}
When enabled, the following are disallowed:
._with-leading-underscore {
content: '';
}
.HYPHENATED-UPPERCASE {
content: '';
}
.camelCase {
content: '';
@extend .snake_case;
}
Example 3
Settings:
- convention: camelcase
When enabled, the following are allowed:
.camelCase {
content: '';
}
.foo {
@extend .anotherCamelCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 4
Settings:
- convention: pascalcase
When enabled, the following are allowed:
.PascalCase {
content: '';
}
.Foo {
@extend .AnotherPascalCase;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .snake_case;
}
Example 5
Settings:
- convention: snakecase
When enabled, the following are allowed:
.snake_case {
content: '';
}
.foo {
@extend .another_snake_case;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 6
Settings:
- convention: strictbem
When enabled, the following are allowed:
.block-name__elem-name {
content: '';
}
.owner-name_mod-name_mod-val {
content: '';
}
.block-name__elem-name_mod-bool {
content: '';
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 7
Settings:
- convention: hyphenatedbem
When enabled, the following are allowed:
.site-search {
color: blue;
width: 50px;
height: 100%;
}
.site-search__field {
text-decoration: underline;
}
.site-search--full {
color: green;
}
When enabled, the following are disallowed:
.HYPHENATED-UPPERCASE {
content: '';
}
.foo {
@extend .camelCase;
}
Example 8
Settings:
- convention: ^[_A-Z]+$
- convention-explanation: 'Class must contain only uppercase letters and underscores'
When enabled, the following are allowed:
.SCREAMING_SNAKE_CASE {
content: '';
}
.foo {
@extend .SCREAMING_SNAKE_CASE;
}
When enabled, the following are disallowed:
(Each line with a class will report Class must contain only uppercase letters and underscores
when linted.)
.HYPHENATED-UPPERCASE {
content: '';
}
.snake_case {
content: '';
}
.foo {
@extend .camelCase;
}
Avoid using id selectors Open
#footer a {
- Exclude checks
Class should be nested within its parent Class Open
.header .notices {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Class Open
.sidebar a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
border-top: 0 !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Pseudo-class should be nested within its parent Type-selector Open
.sidebar li:last-child {
- 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;
}
}
}
}
Type-selector should be nested within its parent Class Open
.sidebar li:last-child {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Type-selector Open
.content footer a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Pseudo-class Open
.post p:first-of-type img {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Class Open
.content a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Don't include leading zeros on numbers Open
font-size: 0.9em !important;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Type-selector should be nested within its parent Type-selector Open
.banner p a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Expected indentation of 2 space but found 4. Open
list-style: none;
- Read upRead up
- Exclude checks
Indentation
Rule indentation
will enforce an indentation size (tabs and spaces) and it will also ensure that tabs and spaces are not mixed.
The mixed spaces and tabs warnings check will take into account what you have set in your config file whether it should expect to see spaces or tabs. If it encounters a tab anywhere in a file when your rule config doesn't specify tabs it will flag a lint warning, Similarly for any whitespace using spaces when tabs are specified. Obviously spaces between properties and values etc are ignored.
Options
-
size
:number
or'tab'
(defaults to2
spaces)
Examples
When enabled (assuming size: 2
) the following are allowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
When enabled (assuming size: 2
) the following are disallowed:
.foo {
content: 'bar';
.baz {
content: 'qux';
// Waldo
&--waldo {
content: 'alpha';
}
}
}
Commas in function arguments should be followed by one space Open
background-image: -ms-linear-gradient(top,$button-bg-hover, $dark-red);
- Exclude checks
Color literals like rgba(255, 192, 192, 0.5)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Type-selector should be nested within its parent Class Open
.sidebar header, p {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
color: $blue !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Type-selector should be nested within its parent Class Open
.content footer a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Pseudo-class should be nested within its parent Type-selector Open
.content header a:hover,
- 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;
}
}
}
}
Type-selector should be nested within its parent Class Open
.banner p a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Color literals like rgba(0, 0, 0, 0.75)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
ID selectors not allowed Open
#footer {
- Read upRead up
- Exclude checks
No IDs
Rule no-ids
will enforce that ID selectors are not allowed to be used.
Examples
When enabled, the following are disallowed:
#foo {
content: 'bar';
}
Type-selector should be nested within its parent Type-selector Open
.content header a:hover,
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Type-selector Open
.sidebar header a {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
Type-selector should be nested within its parent Type-selector Open
.sidebar header a:hover {
- Read upRead up
- Exclude checks
Force Element Nesting
Rule force-element-nesting
will enforce the nesting of elements
Examples
When enabled, the following are disallowed:
div p {
content: '';
}
.parent {
&__child h1 {
content: '';
}
}
a[target="_blank"] span {
content: '';
}
When enabled, the following are allowed:
div {
p {
content: '';
}
}
.parent {
&__child {
h1 {
content: '';
}
}
}
a[target="_blank"] {
span {
content: '';
}
}
!important not allowed Open
padding: 2em 1.5em 0.5em !important;
- Read upRead up
- Exclude checks
No Important
Rule no-important
will enforce that important declarations are not allowed to be used.
Examples
When enabled, the following are disallowed:
.foo {
content: 'bar' !important;
}
Don't include leading zeros on numbers Open
padding-top: 0.5em !important;
- Read upRead up
- Exclude checks
Leading Zero
Rule leading-zero
will enforce whether or not decimal numbers should include a leading zero.
Options
-
include
:true
/false
(defaults tofalse
)
Examples
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
font-size: .5em;
}
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
font-size: 0.5em;
}
Color #66ccdd
should be written as #6cd
Open
$lighter-blue: #66ccdd;
- Exclude checks
Each selector in a comma sequence should be on its own single line Open
strong, b {
- Exclude checks
Commas in function arguments should be followed by one space Open
background-image: linear-gradient(top,$button-bg-hover, $dark-red);
- Exclude checks
Avoid qualifying attribute selectors with an element. Open
input[type="checkbox"] {
- Exclude checks
Avoid using id selectors Open
#content h3 {
- Exclude checks
Avoid using id selectors Open
#content h2 {
- Exclude checks
Avoid using id selectors Open
#footer {
- Exclude checks
Each selector in a comma sequence should be on its own single line Open
.sidebar header, p {
- Exclude checks
Selector comment_form
should be written in lowercase with hyphens Open
.comment_form {
- Exclude checks
Color literals like rgba(255, 192, 192, 0.5)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Color literals like rgba(0, 0, 0, 0.15)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Avoid qualifying class selectors with an element. Open
input.medium {
- Exclude checks
Selector should have depth of applicability no greater than 3, but was 5 Open
nav .sm li li a {
- Exclude checks
Each selector in a comma sequence should be on its own single line Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Exclude checks
Selector should have depth of applicability no greater than 3, but was 5 Open
nav .sm li li:last-child a {
- Exclude checks
Selector comment_form
should be written in lowercase with hyphens Open
.comment_form .title {
- Exclude checks
Color literals like rgba(0, 0, 0, 0.75)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Selector should have depth of applicability no greater than 3, but was 4 Open
nav .sm li ul {
- Exclude checks
Avoid using id selectors Open
#footer a:hover {
- Exclude checks
Avoid vendor prefixes. Open
background-image: -ms-linear-gradient(top, $button-bg, $button-bg-active);
- Exclude checks
Avoid vendor prefixes. Open
background-image: -webkit-linear-gradient(top,$button-bg-hover, $dark-red);
- Exclude checks
Avoid vendor prefixes. Open
background-image: -ms-linear-gradient(top,$button-bg-hover, $dark-red);
- Exclude checks
Avoid qualifying class selectors with an element. Open
input.long {
- Exclude checks
Avoid vendor prefixes. Open
background-image: -moz-linear-gradient(top, $button-bg, $button-bg-active);
- Exclude checks
Color literals like rgba(0, 0, 0, 0.15)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Commas in function arguments should be followed by one space Open
background-image: -moz-linear-gradient(top,$button-bg-hover, $dark-red);
- Exclude checks
Color literals like rgba(0, 0, 0, 0.15)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Each selector in a comma sequence should be on its own single line Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Exclude checks
Selector comment_form
should be written in lowercase with hyphens Open
.comment_form p {
- Exclude checks
Avoid vendor prefixes. Open
background-image: -webkit-linear-gradient(top, $button-bg, $button-bg-active);
- Exclude checks
Avoid vendor prefixes. Open
background-image: -moz-linear-gradient(top, $button-bg-active, $red);
- Exclude checks
Avoid vendor prefixes. Open
background-image: -ms-linear-gradient(top, $button-bg-active, $red);
- Exclude checks
Each selector in a comma sequence should be on its own single line Open
nav ul, .sidebar ul, .header ul, .footer ul {
- Exclude checks
Avoid qualifying attribute selectors with an element. Open
input[type="radio"] {
- Exclude checks
Avoid qualifying class selectors with an element. Open
a.button:hover {
- Exclude checks
Selector should have depth of applicability no greater than 3, but was 5 Open
nav .sm li li li {
- Exclude checks
Color #00eeff
should be written as #0ef
Open
$lightest-blue: #00eeff;
- Exclude checks
Selector should have depth of applicability no greater than 3, but was 5 Open
nav .sm li li a:hover {
- Exclude checks
Selector comment_form
should be written in lowercase with hyphens Open
.comment_form .author {
- Exclude checks
Commas in function arguments should be followed by one space Open
background-image: -webkit-linear-gradient(top,$button-bg-hover, $dark-red);
- Exclude checks
Color literals like rgba(255, 96, 96, 0.85)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.75), inset 0 2px 0 0 rgba(255, 192, 192, 0.5), inset 0 0 0 2px rgba(255, 96, 96, 0.85), 3px 3px 3px 1px rgba(0, 0, 0, 0.15);
- Exclude checks
Avoid vendor prefixes. Open
background-image: -webkit-linear-gradient(top, $button-bg-active, $red);
- Exclude checks
Line should be indented 2 spaces, but was indented 4 spaces Open
list-style: none;
- Exclude checks
border: 0
is preferred over border: none
Open
border: none;
- Exclude checks
Color literals like rgba(0, 0, 0, 0.5)
should only be used in variable declarations; they should be referred to via variable everywhere else. Open
text-shadow: -1px -1px 1px rgba(0, 0, 0, 0.5);
- Exclude checks
Selector should have depth of applicability no greater than 3, but was 4 Open
nav .sm li li {
- Exclude checks