placeholder-name-format.md

Placeholder Name Format

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

Options

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

Example 1

Settings:

• allow-leading-underscore: true
• convention: hyphenatedlowercase

When enabled, the following are allowed:

%hyphenated-lowercase {
  content: '';
}

%_leading-underscore {
  content: '';
}

.foo {
  @extend %hyphenated-lowercase;
}

When enabled, the following are disallowed:

%HYPHENATED-UPPERCASE {
  content: '';
}

%_camelCaseWithLeadingUnderscore {
  content: '';
}

.foo {
  @extend %snake_case;
}

Example 2

Settings:

• allow-leading-underscore: false
• convention: camelcase

When enabled, the following are allowed:

%camelCase {
  content: '';
}

.foo {
  @extend %anotherCamelCase;
}

When enabled, the following are disallowed:

%HYPHENATED-UPPERCASE {
  content: '';
}

%_camelCaseWithLeadingUnderscore {
  content: '';
}

.foo {
  @extend %snake_case;
}

Example 3

Settings:

• allow-leading-underscore: false
• convention: pascalcase

When enabled, the following are allowed:

%PascalCase {
  content: '';
}

.foo {
  @extend %AnotherPascalCase;
}

When enabled, the following are disallowed:

%HYPHENATED-UPPERCASE {
  content: '';
}

%_camelCaseWithLeadingUnderscore {
  content: '';
}

.foo {
  @extend %snake_case;
}

Example 4

Settings:

• allow-leading-underscore: false
• 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: '';
}

%_snake_case_with_leading_underscore {
  content: '';
}

.foo {
  @extend %camelCase;
}

Example 5

Settings:

• convention: strictbem

When enabled, the following are allowed:

%block-name {
  content: '';
}

%block-name__mixin {
  content: '';
}

%block-name_mod-name {
  content: '';
}

When enabled, the following are disallowed:

%HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend %camelCase;
}

Example 6

Settings:

• convention: hyphenatedbem

When enabled, the following are allowed:

%block-name {
  content: '';
}

%block-name__mixin {
  content: '';
}

%block-name--mod-name {
  content: '';
}

When enabled, the following are disallowed:

%HYPHENATED-UPPERCASE {
  content: '';
}

.foo {
  @extend %camelCase;
}

Example 7

Settings:

• allow-leading-underscore: true
• convention: ^[_A-Z]+$
• convention-explanation: 'Mixins must contain only uppercase letters and underscores'

When enabled, the following are allowed:

%SCREAMING_SNAKE_CASE {
  content: '';
}

.foo {
  @extend %_LEADING_UNDERSCORE;
}

When enabled, the following are disallowed:

(Each line with a variable will report Mixins must contain only uppercase letters and underscores when linted.)

%HYPHENATED-UPPERCASE {
  content: '';
}

%_snake_case_with_leading_underscore {
  content: '';
}

.foo {
  @extend %camelCase;
}