Agent Skills › btcpayserver/btcpayserver › bem-conventions

bem-conventions

GitHub

规定前端选择器使用 BEM 命名规范，指导在 Razor、CSS、JS 及 Playwright 测试中优先使用类名而非 ID，确保 UI 钩子可复用与组件化。

.agents/skills/bem-conventions/SKILL.md btcpayserver/btcpayserver

Trigger Scenarios

编辑 Razor 视图或 View Components 编写 CSS 样式规则开发 JavaScript DOM 查询逻辑编写 Playwright 自动化测试

Install

npx skills add btcpayserver/btcpayserver --skill bem-conventions -g -y

More Options

Non-standard path

npx skills add https://github.com/btcpayserver/btcpayserver/tree/master/.agents/skills/bem-conventions -g -y

Use without installing

npx skills use btcpayserver/btcpayserver@bem-conventions

指定 Agent (Claude Code)

npx skills add btcpayserver/btcpayserver --skill bem-conventions -a claude-code -g -y

安装 repo 全部 skill

npx skills add btcpayserver/btcpayserver --all -g -y

预览 repo 内 skill

npx skills add btcpayserver/btcpayserver --list

SKILL.md

Frontmatter

{
    "name": "bem-conventions",
    "description": "Use when editing Razor views, view components, CSS, JavaScript DOM selectors, or Playwright tests that depend on frontend selectors. Prefer BEM class selectors over ids for reusable UI hooks."
}

BEM Conventions

Use BEM-style class names for frontend selector hooks in Razor views, view components, CSS, JavaScript, and Playwright tests.

Default Rule

Prefer class selectors using BEM naming: .block, .block__element, .block--modifier, .block__element--modifier.
Use these classes for styling hooks, JavaScript DOM queries, and Playwright selectors.
Avoid adding or depending on ids for reusable component interaction unless the id is required by platform behavior.

When Ids Are Acceptable

Keep ids when they are needed for:

label for="..." and control association.
Bootstrap or browser wiring such as aria-labelledby, data-bs-target, modal ids, or datalist list targets.
ASP.NET model binding compatibility where existing id or name values are relied on.
Legacy compatibility when removing the id would break existing public behavior.

Even when an id must remain, add a BEM class and use the class in new CSS, JavaScript, and tests.

View Components

For reusable components, use the component name as the BEM block:

<div class="date-range-selector">
  <button class="date-range-selector__toggle">This month</button>
  <input class="date-range-selector__timezone" />
</div>

Examples:

SearchStringInput -> .search-string-input__text, .search-string-input__term
DateRangeSelector -> .date-range-selector__toggle, .date-range-selector__preset
ClearAllFilters -> .clear-all-filters__button
LabelSelector -> .label-selector__toggle, .label-selector__item

JavaScript

Query by BEM classes: document.querySelector('.date-range-selector__timezone').
Scope queries to the nearest component or form when possible: element.closest('form').querySelector('.search-string-input__term').
Do not use document.getElementById(...) for component behavior when a BEM class hook exists.