Sass-lint.yml类名格式正则表达式异常问题求助

嘿，我明白你想要的类名格式规则：首段用PascalCase，后面跟着符合BEM规范的kebab-case元素/修饰符（比如 Button__icon-container--disabled 这类样式）。原正则确实存在几个限制导致没法正常工作，咱们来一步步解决它：

原正则的问题拆解 #

你当前使用的正则 ^([a-zA-Z]*)(__[a-z]+)?(-[a-z]*)*(--[a-z]+)?$ 有这些问题：

• 首段 [a-zA-Z]* 允许空值，且没强制首字母大写（没法严格保证PascalCase），还允许全小写的首段
• 元素部分 __[a-z]+ 只支持单个小写单词，匹配不了像icon-container这种多单词的kebab-case元素名
• 中间的 (-[a-z]*)* 属于冗余结构，不符合BEM的标准语法，会导致非BEM格式的类名被误判通过

修正后的配置与正则 #

下面是完全符合你需求的sass-lint配置，我调整了正则来适配PascalCase+BEM kebab-case的规则：

class-name-format:
  - 1
  - convention: '^([A-Z][a-zA-Z]*)(__([a-z]+(-[a-z]+)*))?(--([a-z]+(-[a-z]+)*))?$'

正则规则详解 #

我把这个正则拆成几个关键部分，方便你理解：

• ^([A-Z][a-zA-Z]*)：强制首段为PascalCase——首字母必须大写，后续可以是任意大小写字母（完美匹配PascalCase的命名）
• (__([a-z]+(-[a-z]+)*))?：可选的BEM元素部分，以__开头，后面是标准的kebab-case格式（允许多个小写单词用短横线连接），整个元素段是可选的
• (--([a-z]+(-[a-z]+)*))?：可选的BEM修饰符部分，以--开头，同样是kebab-case格式，整个修饰符段也是可选的

匹配示例验证 #

这个正则会正确通过以下符合规则的类名：

• 纯PascalCase类名：Button、ModalDialog
• 带kebab-case元素的BEM类名：Button__icon-container、ModalDialog__close-button
• 带kebab-case修饰符的BEM类名：Button--disabled、ModalDialog--full-screen
• 同时包含元素和修饰符的完整BEM类名：Button__icon-container--active、ModalDialog__close-button--hidden

而以下不符合规则的类名会被拦截：

• 首段小写的类名：button、modalDialog
• 元素/修饰符使用驼峰的类名：Button__IconContainer、Button--Disabled
• 错误使用BEM分隔符的类名：Button-icon-container（用-代替__）

内容的提问来源于stack exchange，提问作者Merc