SuperAPI AI 工具集

bem-naming

通用与其它

查看项目

更新于 10-16 03:39

技能介绍

用途:本技能解释 fundamental-styles 所用的 BEM(Block Element Modifier)命名方法,提供命名模式与真实示例,用于回答如何在 fundamental-styles 中命名 CSS 类、理解类名模式、fd- 前缀含义,以及创建自定义变体或理解修饰符类。

主要能力:说明 BEM 结构。基础模式为 .block、.block__element、.block--modifier、.block__element--modifier。fundamental-styles 所有组件使用 fd- 前缀,遵循 .fd-{block}、.fd-{block}{element}、.fd-{block}--{modifier}、.fd-{block}{element}--{modifier}。块是顶层组件,如 .fd-button、.fd-input、.fd-card、.fd-table、.fd-dialog;元素属于块,用双下划线,如 .fd-button__text、.fd-table__cell、.fd-dialog__header;修饰符用双连字符表示外观、状态或行为,如 .fd-button--emphasized、.fd-button--positive、.fd-button--negative、.fd-button--compact、.fd-table__cell--status。

使用方式:修饰符必须与基础类同时使用,如 class="fd-button fd-button--emphasized",不可单独使用修饰符。多个修饰符可组合,如 class="fd-button fd-button--emphasized fd-button--compact"。元素修饰符示例:.fd-table__cell--checkbox。语义状态修饰符包括 --positive、--negative、--critical、--informative。动态状态使用 is- 前缀类,如 is-error、is-success、is-selected、is-active,这类状态类不属于 BEM 修饰符。

适用场景:需要为 fundamental-styles 组件编写类名、理解现有类名含义、创建自定义变体或进行样式维护时使用。

限制与规范:使用小写与连字符,不嵌套块类,不创建孙级元素(如 .fd-block__element__subelement),不将 BEM 与其他约定混用,不使用 camelCase。具体可用修饰符与组件支持范围以资料列出的示例为准,更多细节暂未提供。