class-naming

Warn if the class name does not conform to the specified rules.

❌ Examples of incorrect code for this rule

<!-- "class-naming": "/[a-z]+(?:__[a-z]+(?:--[a-z]+))?/" -->
<div class="Block"></div>

✅ Examples of correct code for this rule

<!-- "class-naming": "/[a-z]+(?:__[a-z]+(?:--[a-z]+))?/" -->
<div class="block"></div>

Interface

{
  "class-naming": string | string[]
}

Sets a string that represents a regular expression or its array. Regular expressions are interpreted as regular expressions by enclosing them in /. It is possible to add a flag like /.*/ ig (regular expressions can only be interpreted by JavaScript).

Default Severity

warning

Configuration Example

The BEM-like CSS structure:

{
  "rules": {
    // Enable class-naming rule to childNodeRules.
    "class-naming": "/.+/"
  },
  "childNodeRules": [
    {
      "regexSelector": {
        // Filter attributes to the class attribute.
        "attrName": "class",
        // Set the pattern of the class
        // and capture its own block name.
        // Enable capturing in either the number and group name.
        // In the bellow, it is captured as `BlockName`.
        "attrValue": "/^(?<BlockName>[A-Z][a-z0-9]+)(?:__[a-z][a-z0-9-]+)?$/"
      },
      "rules": {
        "class-naming": {
          "value": [
            // Allow the element that is owned by the block.
            // `{{BlockName}}` will be expand from the captured group.
            "/^{{BlockName}}__[a-z][a-z0-9-]+$/",
            // Allow another block.
            "/^([A-Z][a-z0-9]+)$/"
          ]
        }
      }
    }
  ]
}

<section class="Card">
  <div class="Card__header">
    <div class="Heading"><h3 class="Heading__lv3">Title</h3></div>
  </div>
  <div class="Card__body">
    <div class="List">
      <ul class="List__group">
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
</section>

<section class="Card">
  <div class="Card__header">
    <!-- ❌ It is "Card" scope, Don't use the element owned "Heading" -->
    <h3 class="Heading__lv3">Title</h3>
  </div>
  <div class="Card__body">
    <div class="Card__body-el">...</div>
    <!-- ❌ It is "Card" scope, Don't use the element owned "List" -->
    <ul class="List__group">
      <li>...</li>
      <li>...</li>
      <li>...</li>
    </ul>
    <div class="List">
      <!-- ❌ It is not "Card" scope instead of "List" scope here -->
      <ul class="Card__list">
        <li>...</li>
        <li>...</li>
        <li>...</li>
      </ul>
    </div>
  </div>
</section>