id-name-format.md

ID Name Format

Rule id-name-format will enforce a convention for ids.

Options

• allow-leading-underscore: true/false (defaults to true)
• convention: 'hyphenatedlowercase' (default), camelcase, snakecase, or a Regular Expression that the id name must match (e.g. ^[_A-Z]+$)
• convention-explanation: Custom explanation to display to the user if an id doesn't adhere to the convention
• ignore: Array of names to ignore

Example 1

Settings:

• allow-leading-underscore: true
• convention: hyphenatedlowercase
• ignore: ['IGNORED_SELECTOR']

When enabled, the following are allowed:

#hyphenated-lowercase {
  content: '';

  &#_with-leading-underscore {
    content: '';
  }
}

#foo {
  @extend #hyphenated-lowercase;
}

#IGNORED_SELECTOR {
  content: '';
}

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: 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 5

Settings:

• convention: ^[_A-Z]+$
• convention-explanation: 'IDs 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 an id will report IDs must contain only uppercase letters and underscores when linted.)

#HYPHENATED-UPPERCASE {
  content: '';
}

#snake_case {
  content: '';
}

#foo {
  @extend #camelCase;
}