Showing 657 of 658 total issues
!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;
}
Avoid vendor prefixes. Open
-webkit-justify-content: center;
- Exclude checks
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: '';
}
}
Avoid qualifying class selectors with an element. Open
input.field_with_errors, select.field_with_errors, textarea.field_with_errors {
- 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
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: '';
}
}
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: '';
}
}
Avoid vendor prefixes. Open
background-image: -ms-linear-gradient(top, $button-bg, $button-bg-active);
- 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: '';
}
}
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;
}
}
}
}
!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;
}
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: '';
}
}
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;
}
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;
}
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: '';
}
}
!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;
}
Avoid qualifying class selectors with an element. Open
table.elements {
- Exclude checks
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;
}
Selector field_with_errors
should be written in lowercase with hyphens Open
input.field_with_errors, select.field_with_errors, textarea.field_with_errors {
- Exclude checks
Use //
comments everywhere Open
/* ========== ( global/layout styles ) ========== */
- Exclude checks