القائمة
BEM class name generation using createBEM() in TypeScript. Invoke when creating or updating component CSS class names in TS code.
التثبيت باستخدام Codex أو Claude انسخ هذا Prompt والصقه في Codex أو Claude أو مساعد آخر ليراجع صفحة Skill ويثبّتها لك.
استنادا إلى تصنيف SOC المهني
@attribute decorator for defining HTML attribute-mapped properties. Invoke when creating or updating component attributes that map to HTML attributes.
@property decorator for defining pure JavaScript properties that do NOT map to HTML attributes. Invoke when creating internal component state properties.
BEM SCSS mixins for component styling. Invoke when writing or updating component SCSS styles using block/element/modifier/state mixins.
Component CSS styling standards including variables, host styles, states, and responsive patterns. Invoke when creating or updating component SCSS files.
@CustomElement decorator for registering Web Components. Invoke when creating new components or modifying component registration options.
Component documentation generation. Invoke when writing or updating component documentation including API tables, examples, and usage guides.
| name | bem |
| description | BEM class name generation using createBEM() in TypeScript. Invoke when creating or updating component CSS class names in TS code. |
使用 createBEM 工具函数在 TypeScript 中生成 BEM 规范的 CSS 类名。
import EaBase, { createBEM } from "@core/EaBase";
const TAG_NAME = "ea-component" as const;
const bem = createBEM(TAG_NAME);
bem(modifiers?, states?): string
modifiers：对象形式，键为修饰符名，值为 true（生成 block--key）、字符串/数字（生成 block--key-value）、false/undefined/null（忽略）states：对象形式，键为状态名，值为 true 或空字符串时生成 is-key，其他值忽略| 方法 | 返回值 | 说明 |
|---|---|---|
bem.b() | "ea-component" | 块类名 |
bem.cb() | ".ea-component" | 块类名选择器 |
bem.e(name) | "ea-component__content" | 元素类名 |
bem.ce(name) | ".ea-component__content" | 元素类名选择器 |
bem.m(...names) | "ea-component--primary ea-component--large" | 修饰符类名 |
bem.cm(...names) | ".ea-component--primary" | 修饰符类名选择器 |
bem.s(...names) | "is-active is-disabled" | 状态类名 |
bem.cs(...names) | ".is-active" | 状态类名选择器 |
html(): string {
return `
<div class="${bem()}" part="container">
<sup class="${bem.e('content')}" part="content"></sup>
<slot></slot>
</div>
`;
}
updateContainerClasslist(): string {
const className = bem(
{ [this.variant]: true },
{ disabled: this.disabled, hidden: isHidden }
);
if (this._container) {
this._container.className = className;
}
return className;
}
bem({ primary: true }) // 'ea-component ea-component--primary'
bem({ size: 'large' }) // 'ea-component ea-component--size-large'
bem.m('primary', 'large') // 'ea-component--primary ea-component--large'
bem.cm('primary') // '.ea-component--primary'
bem({}, { center: true }) // 'ea-component is-center'
bem({}, { active: this.isActive }) // 'ea-component' 或 'ea-component is-active'
bem.s('active', 'disabled') // 'is-active is-disabled'
bem.cs('active') // '.is-active'
bem(
{ [this.variant]: true, [this.size]: true },
{ disabled: this.disabled, center: this.center }
);
// 'ea-component ea-component--primary ea-component--large is-disabled is-center'
ea-badge）content, close-btn）{ primary: true }, { size: 'large' }）{ hidden: true }, { active: this.isActive }）TypeScript 中 createBEM 生成的类名与 SCSS 中 @include block/element/modifier/state 的结构一一对应，参见 bem-mixin 技能。