& ~ div.node-stanford-event-su-event-date-time {

Close

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

  .media-entity-wrapper.video {

Close

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

  .su-media__link a {

Close

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

  container: paragraph / inline-size;

Close

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

      &:last-child:after {

Close

Pseudo-element

Rule pseudo-element will enforce that:

• Pseudo-elements must start with double colons.
• Pseudo-classes must start with single colon.

Examples

When enabled, the following are allowed:

.foo::before {
  content: "bar";
}

.foo:hover {
  content: "bar";
}

When enabled, the following are disallowed:

.foo:before {
  content: "bar";
}

.foo::hover {
  content: "bar";
}

  .media-entity-wrapper.video {

Close

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

          &:hover,

Close

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

    gap: 10px;

Close

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

      .event_list_item__type {

Close

Class Name Format

Rule class-name-format will enforce a convention for class names.

Options

• allow-leading-underscore: true/false (defaults to true)
• 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;
}

  div.node-stanford-event-su-event-date-time {

Close

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

  .media-entity-wrapper.video {

Close

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

      &:after {

Close

Pseudo-element

Rule pseudo-element will enforce that:

• Pseudo-elements must start with double colons.
• Pseudo-classes must start with single colon.

Examples

When enabled, the following are allowed:

.foo::before {
  content: "bar";
}

.foo:hover {
  content: "bar";
}

When enabled, the following are disallowed:

.foo:before {
  content: "bar";
}

.foo::hover {
  content: "bar";
}

    gap: 7.2rem;

Close

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

  section.su-card__contents {

Close

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

  section.su-card__contents {

Close

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

    div.su-font-splash {

Close

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

  .event_list_item__type {

Close

Class Name Format

Rule class-name-format will enforce a convention for class names.

Options

• allow-leading-underscore: true/false (defaults to true)
• 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;
}

  div.node-stanford-event-su-event-date-time {

Close

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

    & ~ div.node-stanford-event-su-event-date-time {

Close

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