SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsyy-frontend-style-bem-optimizer

yy-frontend-style-bem-optimizer

Frontend & websites

View repository

Updated 10-15 20:09

About this skill

yy-frontend-style-bem-optimizer

Description

Front-end BEM naming convention converter and CSS style optimizer. Synchronously convert the class/className attributes in HTML/JSX/TSX/Vue/Svelte/Astro code and the corresponding CSS/Sass/Less/Stylus selectors to the BEM naming format, supporting CSS property sorting, BEM nested restructuring, and logical domain splitting.

Use cases

  • The user requests converting class names to the BEM convention and unifying the team's CSS naming convention
  • The user requests organizing the writing order of CSS properties
  • The user requests restructuring flat CSS/SCSS rules into a nested structure
  • The user requests splitting a bloated stylesheet by functional module

Should not trigger:

  • Purely theoretical Q&A that does not involve code conversion
  • Non-front-end class name scenarios (JS/TS variable names, back-end naming, database fields)
  • Changing style values without changing naming
  • Requests to rewrite styles using non-BEM approaches such as CSS Modules, CSS-in-JS, or Tailwind

Supported formats

  • Markup files：.html、.jsx、.tsx、.vue、.svelte、.astro
  • Style files：.css、.scss、.sass、.less、.styl、.stylus

Core capabilities

  1. BEM naming conversion: simultaneously process the markup file's class/className and the stylesheet's selectors, keeping the mapping consistent
  2. CSS property sorting: arrange the properties in CSS rules in the csscomb zen preset order
  3. BEM nested restructuring(optional): restructure flat, scattered BEM rules into the SCSS/Less/Stylus & nested structure
  4. Logical domain splitting(optional): split the CSS rules in SCSS/Less/Stylus into independent sets by business logical domain

Instructions

Step 1. Determine the scope of capabilities

Determine which capabilities need to be executed based on the user's intent. The user may need only one of them or a combination of several:

User intent Required capabilities
Convert class names to the BEM convention, unify naming BEM naming conversion
Organize the order of CSS properties CSS property sorting
Restructure into a nested structure, organize with &__element Organization BEM nested restructuring
Split stylesheets, group by function Logical domain splitting
Organize styles as a whole (no specific item specified) All four items

Decision branches：

  • The user explicitly specifies a certain capability → execute only that item
  • The user requests broad expressions such as "organize styles" or "optimize styles" → execute BEM naming conversion and CSS property sorting (nested restructuring and logical domain splitting require an explicit user request before execution, because these two items change the file structure)
  • The user requests BEM naming conversion and the stylesheet is SCSS/Less/Stylus, and the user requests nesting → also execute BEM nested restructuring. If it is a pure .css file or the user did not request it, then skip
  • The user requests CSS property sorting but it does not involve naming → execute only property sorting

Execution order between steps：

When multiple capabilities need to be executed, execute them in the following order, with each step depending on the result of the previous step:

  1. BEM naming conversion → must be executed first; subsequent steps depend on the converted BEM class names
  2. CSS property sorting → should be executed before nested restructuring. Sorting first ensures that the order of all declarations is unified; nested restructuring only moves rule positions and does not change the declaration order within each rule block, thereby avoiding layer-by-layer reordering in the multi-level & structure after nesting
  3. BEM nested restructuring → depends on the BEM class names after naming conversion is completed; execute only when the user explicitly requests it
  4. Logical domain splitting → should be executed after nested restructuring, because the complete Block after nesting is the smallest unit for splitting; execute only when the user explicitly requests it

Step 2. Determine the conversion mode

  • Code snippet mode: the user directly pastes HTML/CSS code snippets
  • Single-file mode: the user specifies a single file path
  • Batch directory mode: the user specifies a directory path and requests batch conversion

Decision branches：

  • The user has not specified a mode but there is code snippet content → process in code snippet mode

  • The user specifies a file path → single-file mode

  • The user specifies a directory path → batch directory mode

  • The user has not specified the scope → use git commands to obtain changed files, merge and deduplicate them, then filter by supported formats:

    git diff --name-only HEAD
git diff --cached --name-only

    If the project has no git or the git command fails, prompt the user to manually specify the file scope. If no matching files remain after filtering, reply "There are currently no changed files that need to be processed." and terminate.

  • In code snippet mode, the user provided only markup code (HTML/JSX/Vue) but not style code (CSS/SCSS, etc.) → ask the user whether to also provide style content, to ensure that BEM naming conversion remains consistent between markup and styles. If the user explicitly states that only the markup code needs to be converted, skip style file processing.

Step 3. Read and parse the source content

Read the content according to the conversion mode.

Parsing rules：

  • Extract all class attribute values from HTML/Vue/Svelte/Astro templates, and split them into individual class names
  • Extract all className attribute values from JSX/TSX, and split them into individual class names
  • Extract class names from all selectors in CSS/SCSS/Less/Stylus
  • Establish the mapping relationship between class/className in markup files and CSS selectors
  • Identify class names that already conform to the BEM specification (such as block__element--modifier), and mark them as not requiring conversion

Step 4. Determine the configuration

For detailed configuration items, configuration file examples, and Tailwind/Windi CSS/UnoCSS ignore configuration, see resources/config-reference.md. This file contains .bemrc complete examples and utility-first framework ignore configuration templates.

Step 5. Execute BEM naming conversion

Execute only when the capability scope includes "BEM naming conversion".

Core principle: the same class name in markup files (HTML/JSX/Vue, etc.) and style files (CSS/SCSS, etc.) must use the same BEM conversion result, ensuring consistency by maintaining a class name mapping table.

  • HTML/Vue/Svelte/Astro: traverse all class attribute, map each class name to BEM format according to the conversion strategy, leaving ignored class names unchanged
  • JSX/TSX: iterate over all className attributes. Dynamically concatenated class name strings (such as className={`btn-${variant}`}) are flagged in the report as requiring manual confirmation and are not automatically converted
  • CSS/SCSS/Less/Stylus: iterate over all class selectors, convert according to the same mapping rules, leaving ignored class names unchanged

For detailed mapping examples, conversion strategy determination, boundary rules (prohibiting Element nesting inside Element, multi-segment hyphen resolution, re-conversion of existing BEM, mixed entities), and framework-specific handling (CSS Modules, CSS-in-JS, Vue scoped, Angular, Svelte, Astro), see resources/bem-naming.md。

Step 6. Execute CSS property sorting

Execute only when the capability scope includes "CSS property sorting".

For detailed sorting rules, compatibility checks, and browser prefix handling, see resources/css-property-order.md。

Step 7. Execute BEM nesting restructuring

Execute only when the user explicitly requests "nesting" or "organizing with &". Nesting is syntactic sugar for SCSS/Less/Stylus, not part of the BEM specification. Pure .css files are not processed (unless the user explicitly requests it and the project supports native CSS nesting).

For detailed nesting hierarchy, execution rules, constraints, and specificity validation, see resources/bem-nesting.md。

Step 8. Execute logical domain splitting

Execute only when the user explicitly requests "split files" or "group by function". And it applies only to SCSS/Less/Stylus files.

For detailed splitting trigger conditions, logical domain identification methods, classification table, and splitting execution rules, see resources/domain-splitting.md。

Step 9. Preview, confirm, apply

By default, output a preview first (before/after comparison + class name mapping table), and write to files only after user confirmation. The output includes:

转换摘要
─────────────────────
处理文件：N 个
类名转换：N 个（自动推断 N，需人工确认 N）
属性重排：N 条规则
嵌套重组：N 个 Block
域拆分  ：N 个域
忽略类名：N 个（第三方 N，utility-first N）
兼容性警告：N 个（🔴/🟡）

类名映射
─────────────────────
original-class → bem-class
...
映射表按文件分组，每个文件下按 Block 聚合展示。同一 Block 的 Element 和 Modifier 映射缩进排列在其 Block 行下方。

兼容性警告（仅在属性排序启用时输出）
─────────────────────
⚠️  /path/to/file.scss
┌ 第 N 行  .selector
│   🟡 backdrop-filter → 降级建议：Safari 需 `-webkit-` 前缀
│   🔴 view-transitions → 降级建议：仅 Chrome 111+ 支持，Firefox/Safari 不支持
└ 第 M 行  .selector
    🟡 aspect-ratio → 降级建议：Safari 15 以下需 `padding-top` hack 降级

需人工确认项
─────────────────────
- /path/to/Component.tsx 第 N 行：`className={`dialog-${size}`}` 为动态拼接，已标记为 `dialog--${size}`，请验证运行时行为

Safety constraints：

  • Preview by default, write only after user confirmation; by default do not overwrite original files, prefer saving to new files
  • In batch mode, first do a trial run on a single file, and output the list of affected files for user confirmation
  • Do not modify any code logic or style properties other than class names

Conversion examples

For complete example code, see resources/examples.md, covering the following scenarios: basic BEM naming conversion + nesting restructuring, conversion with modifiers, ignoring third-party class names, CSS property sorting, full-process conversion, logical domain splitting, JSX + SCSS synchronized conversion, and pure CSS file handling.

Limitations

  • Only convert class/className class names in attribute values and CSS selectors, not logical class name strings in JavaScript/TypeScript (such as variable names, object keys)
  • Do not automatically infer inheritance relationships between components; analyze block names independently for each file
  • Do not handle naming in non-frontend files (such as backend templates, configuration files, class names in scripting languages)
  • Class names from Utility-first frameworks (Tailwind CSS, etc.) should be added to the ignore list and not converted
  • Do not modify build configuration or import paths; only process class names and selector text
  • For the complete description of framework-specific handling, see resources/bem-naming.md 's "Framework-Specific Handling" section

Related resources