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 to false)
• allow-element-with-class: true/false (defaults to false)
• allow-element-with-id: true/false (defaults to false)

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';
}

Nesting Depth

Rule nesting-depth will enforce how deeply a selector can be nested.

Options

• max-depth: number (defaults to 2)

Examples

When enabled (assuming max-depth: 2) the deepest element (&:hover and &--modifier) are at at depth 2. Any nested selector deeper is disallowed:

.foo {
  .baz {
    &:hover {
      // Deepest Nest Allowed
    }
  }
}

.block {
  &__element {
    &--modifier {
      // Deepest Nest Allowed
    }
  }
}

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 to false)
• allow-element-with-class: true/false (defaults to false)
• allow-element-with-id: true/false (defaults to false)

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';
}

No Misspelled Properties

Rule no-misspelled-properties will enforce the correct spelling of CSS properties and prevent the use of unknown CSS properties.

Options

• extra-properties: [array of extra properties to check spelling against] (defaults to empty array []).

Examples

When enabled, the following are disallowed:

// incorrect spelling
.foo {
  borders: 0;
}

// unknown property
.bar {
  border-right-left: 0;
}

// incorrect spelling
.baz {
  -webkit-transit1on: width 2s;
}

When extra-properties contains a property value of transit1on as show below:

no-misspelled-properties:
  - 1
  -
    'extra-properties':
      - 'transit1on'

The following would now be allowed:

// incorrect spelling now whitelisted
.baz {
  -webkit-transit1on: width 2s;
}

// incorrect spelling now whitelisted
.quz {
  transit1on: width 2s;
}

While the following would remain disallowed:

// incorrect spelling
.foo {
  borders: 0;
}

// unknown property
.bar {
  border-right-left: 0;
}

No Misspelled Properties

Rule no-misspelled-properties will enforce the correct spelling of CSS properties and prevent the use of unknown CSS properties.

Options

• extra-properties: [array of extra properties to check spelling against] (defaults to empty array []).

Examples

When enabled, the following are disallowed:

// incorrect spelling
.foo {
  borders: 0;
}

// unknown property
.bar {
  border-right-left: 0;
}

// incorrect spelling
.baz {
  -webkit-transit1on: width 2s;
}

When extra-properties contains a property value of transit1on as show below:

no-misspelled-properties:
  - 1
  -
    'extra-properties':
      - 'transit1on'

The following would now be allowed:

// incorrect spelling now whitelisted
.baz {
  -webkit-transit1on: width 2s;
}

// incorrect spelling now whitelisted
.quz {
  transit1on: width 2s;
}

While the following would remain disallowed:

// incorrect spelling
.foo {
  borders: 0;
}

// unknown property
.bar {
  border-right-left: 0;
}

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: '';
  }
}

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: '';
  }
}

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: '';
  }
}