BEM Class Auditor and SCSS Skeleton Extractor for HTML

card.html
  1: camelCase class name. BEM names are lower kebab-case: cardTitle becomes card-title.
  2: The element separator is exactly two underscores: card_title becomes card__title.
  3: BEM has no element of an element. card__body__title becomes card__body-title, or a block of its own.
  4: The modifier comes last. card--wide__title becomes card__title with card__title--wide.
  5: The element separator is exactly two underscores: card_title becomes card__title.
  5: Scripting hook written with an underscore. Use a hyphen: js_toggle becomes js-toggle.
  6: Placeholder class name still in the markup. It will land in the stylesheet as a real selector.
  7: Five or more words in one BEM name. Split the block; the name is carrying the whole page path.
—— 8 ——

That is the output panel, one command after opening the file: eight findings on seven lines, each with its line number and the rule it broke. Line 5 is listed twice because that one class breaks two rules at once. Here is the entire file it read, nine lines of it:

<section class="cardList">
  <article class="card_item">
    <h3 class="card__body__title">Wireless keyboard</h3>
    <p class="card--wide__text">Low-profile keys.</p>
    <a class="js_open" href="/products/keyboard">See details</a>
    <span class="tmp-badge">New</span>
    <div class="site-header-card-list-item__meta">In stock</div>
  </article>
</section>

Nothing in there is exotic. It is one component, written quickly, by someone who knows the convention perfectly well. That is the point: BEM drift is not caused by ignorance, it is caused by nothing watching.

Because nothing is. Stylelint reads your stylesheet. Prettier reads your formatting. ESLint does not open HTML at all. None of them ever look at the class attribute in your markup, which is exactly where a BEM name is born. The name is wrong for the whole life of the branch, and the first thing that notices is a human being, in review, late.

That is the expensive part. Naming comments are the cheapest thing a reviewer can find and the most costly round to repeat, because the author has to go back, rename in the markup, rename again in the stylesheet, and push. And it gets worse with time: once those class names have been extracted into SCSS, the rename is no longer one file, it is two, and every partial that referenced the old block.

The BEM Class Auditor moves that round earlier, into the editor. It holds 16 naming rules and runs them over the HTML file you have open. Among them: camelCase names, single-underscore elements, an element of an element, a modifier written before the element it modifies, a modifier standing without its base class, presentational names like --red that describe paint instead of role, placeholder names like tmp and foo that survived into the commit, class names built by a template expression the extractor cannot resolve, eight or more utilities crowding out the block interface, and inline styles that will never reach the extracted stylesheet at all.

It also ships 22 skeletons: 11 markup blocks and the 11 matching SCSS shells for card, nav, modal, form, table, tabs, accordion, alert, breadcrumb, pagination and hero. Insert one at the cursor and the new block starts out correctly named, which is always cheaper than correcting it afterwards.

Auditing the file you have open is free, against all 16 rules, with no key and nothing held back. So is auditing just the lines you selected, and so is inserting all 22 skeletons. What a licence adds is scope and a take-away: the same 16 rules across every HTML file in the repository rather than the one on screen, and a findings file in CSV, JSON or HTML that you attach to the pull request instead of pasting a list into a comment. A freelance front-end developer averaged $73 an hour in 2026, and the naming pass is the round that repeats. The licence is $39 once.