BEM Checker

Drop your workspace folder here

What is BEM?

BEM (Block Element Modifier) is a CSS naming convention that keeps styles modular and readable.

Block .card

A standalone component that makes sense on its own.

Element .card__title

A part of a block, separated by double underscore.

Modifier .card--featured

A variation of a block or element, separated by double hyphen.

Violation types

Accessibility

CSS patterns that break keyboard navigation, screen readers, or general usability.

  • outline: none/0 — removes the focus ring, making it impossible for keyboard users to see what element is focused
  • user-select: none — prevents text selection; avoid on readable content like articles or labels
  • pointer-events: none — blocks all mouse interaction; ensure a keyboard-accessible alternative is in place
Security

CSS patterns that introduce security vulnerabilities or enable data exfiltration.

  • javascript: URIs — can execute JavaScript when the browser processes the URL
  • expression() — evaluates arbitrary JavaScript in old IE, a known XSS vector
  • -moz-binding — loads external XBL scripts in old Firefox, enabling code execution
  • behavior: — loads HTC files in IE that can execute scripts
  • External url(http://...) — can leak document state or bypass Content Security Policy
BEM

Structural BEM naming errors detected in class selectors and HTML class attributes.

  • Class names must be lowercase
  • Only letters, digits, and hyphens — no underscores
  • Elements and modifiers must have a block prefix
  • No nested elements  .block__el__sub
  • No element after a modifier  .block--mod__el
  • Each block or element can carry at most one modifier
Convention

Classes that look like they should be BEM modifiers or elements but use a single hyphen instead.

  • .badge exists → .badge-primary is flagged
  • Suggestion: use .badge--primary (modifier) or .badge__primary (element)
  • Cross-file: checks all class names across the entire workspace
Hardcoded

Raw color or size values that should be CSS variables for consistency and theming.

  • Colors: hex #ff0000, rgb(), rgba(), hsl(), hsla()
  • Sizes: pixel or relative lengths in margin, padding, gap, font-size, etc.
  • Exempt: var(), 0, none, transparent, inherit, and other CSS keywords
Quality

General CSS anti-patterns that reduce maintainability or cause specificity issues.

  • !important — overrides the cascade, makes styles hard to debug or override
  • float: left/right — designed for text wrapping, not layout; use flexbox or grid
  • High z-index values (> 9) — arbitrary numbers create ordering conflicts; use a defined scale via CSS variables
  • ID selectors #foo — higher specificity than classes, impossible to reuse, hard to override
  • @import — each import is loaded sequentially and blocks rendering; use <link> tags instead
  • transition: all — animates every CSS property on change, causing unnecessary repaints; list only the properties you need