Skip to main content

Architected CSS

Case you follow the defined CSS class name like the BEM.

Rule

Suppose defining the following rule:

  • The block name must be first character is upper-alphabet and subsequent is lower-alphabet or numbers.
  • The element name must be lower-alphabet or numbers after owned block name and two underscore.
  • The element must not be child of no-owned block and/or element.
<!-- ✅ Correct -->
<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>

<!-- ❌ Incorrect -->
<section class="Card">
<div class="Card__header">
<!-- ❌ An element is nested in the element belonging to another block -->
<h3 class="Heading__lv3">Title</h3>
</div>
<div class="Card__body">
<!-- ❌ An element is nested in the element belonging to another block -->
<ul class="List__group">
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</section>

Configuration

Use class-naming rule with regexSelector.

{
"rules": {
"class-naming": "/^[A-Z][a-z0-9]+$/"
},
"childNodeRules": [
{
"regexSelector": {
"attrName": "class",
"attrValue":
// Capture a block name
"/^(?<BlockName>[A-Z][a-z0-9]+)(?:__[a-z][a-z0-9-]+)?$/"
},
"rules": {
"class-naming": {
"value": [
// Expand a block name by Mustache format
"/^{{BlockName}}__[a-z][a-z0-9-]+$/",
"/^([A-Z][a-z0-9]+)$/"
]
}
}
}
]
}