BEM Naming Validator
Explicit lowercase hyphenated BEM dialect validator (optional element and modifier), not universal BEM convention or CSS identifier validity. Explicit supplied computed/layout context only; not a browser cascade/layout engine or cross-browser guarantee.
Description
BEM names can encode block, element and modifier relationships.
BEM names can encode block, element and modifier relationships.1
A lexical grammar checks naming form rather than the actual component structure or CSS behavior. Use BEM Naming Validator to evaluate the supplied inputs under the specific model below.
When to use BEM Naming Validator
Use BEM Naming Validator to evaluate the supplied inputs under the specific model below. Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
How to use BEM Naming Validator and understand its results
- Define the supplied layout, token or rendering scenario and establish the relevant units and browser context independently.
- Enter Class tokens using the field table and validation rules below, then run the tool.
- Read Valid bem flags, Invalid class tokens and interpret units, signs, ordering and placeholders as explained below.
- If the tool reports an input error, correct that field and rerun. A successful false result, empty match list or unknown-evidence placeholder has the specific meaning described here; check the limitations before applying the result.
| Input field | Meaning | Value type | Requirement |
|---|---|---|---|
| classTokens | Class tokens | array of string | Required; constraints below |
Enter an array of class tokens, each at most 128 UTF-16 code units. The pattern accepts a block, optional __element and optional --modifier in that order. Each part consists of lowercase ASCII letters and digits in nonempty groups separated by single hyphens; leading digits are accepted, while leading, trailing or repeated hyphens within a part are not. Return a 1/0 flag per token and invalid tokens in input order, retaining repetitions. Empty token arrays are allowed; an unsupported token is a false flag rather than an input error. This checks a bounded BEM naming pattern rather than full CSS identifier syntax or every BEM convention.
tokenPart = lowercase letters/digits separated by single hyphens; class = block[__element][--modifier]; flag = matches ? 1 : 0 Field order, units and branch conditions follow the implementation explanation above.
| Output field | Meaning | Value type |
|---|---|---|
| validBemFlags | Valid bem flags | array of number |
| invalidClassTokens | Invalid class tokens | array of string |
{
"input": {
"classTokens": [
"button",
"button__icon",
"button--large",
"Button"
]
},
"output": {
"validBemFlags": [
1,
1,
1,
0
],
"invalidClassTokens": [
"Button"
]
}
}Limitations and assumptions
A lexical grammar checks naming form rather than the actual component structure or CSS behavior. Apply the exact scope and assumptions described above.
All listed fields require explicit values. Unexpected fields, incorrect types, nonfinite numbers and sparse arrays fail validation. Domain-specific bounds, alignments and supported tokens are stated above; extremely large inputs or outputs can also be rejected. These errors differ from successful results such as false, no matches or unknown evidence.
Alternative or Complementary methods
Use Pseudo-Class State Targets Table for a related task: Pseudo-classes select elements under defined states or conditions.
Use :focus-visible vs :focus Ring Difference for a related task: Focus-visible adds a user-agent indication decision to the focused state.
References
-
BEM Naming Validator — tool.io
Similar or alternative tools
- Pseudo-Class State Targets Table
Pseudo-classes select elements under defined states or conditions.
- :focus-visible vs :focus Ring Difference
Focus-visible adds a user-agent indication decision to the focused state.