Class should be nested within its parent Type-selector Open
body.front {
- 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: '';
}
}
Trailing semicolons required Open
margin: 0
- Read upRead up
- Exclude checks
Trailing Semicolon
Rule trailing-semicolon
will enforce whether the last declaration in a block should include a semicolon (;
) or not (.sass
syntax excluded).
Options
-
include
:true
/false
(defaults totrue
)
Examples
When include: true
, the following are allowed. When include: false
, the following are disallowed:
.foo {
content: 'bar';
content: 'baz';
.waldo {
content: 'where';
}
}
When include: false
, the following are allowed. When include: true
, the following are disallowed:
.foo {
content: 'bar';
content: 'baz'
.waldo {
content: 'where'
}
}
Qualifying elements are not allowed for class selectors Open
body.front {
- 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';
}