svelte中直接套bem类名会出问题，因样式作用域编译后添加哈希（如.user-card__header[data-svelte-h123]），导致devtools中类名不可读、丧失bem语义可定位性；且组件名（usercard.svelte）必须严格转为小写短横线格式（user-card）作为block名，否则stylelint校验失败。
为什么Svelte组件里直接套BEM类名会出问题
Svelte的样式作用域默认靠属性选择器（如.card[data-svelte-h123]）实现，但BEM依赖类名结构语义——.card__header和.card--fluid必须能被开发者一眼识别归属，而Svelte编译后类名带哈希，.card__header[data-svelte-h123]在DevTools里就只剩一串随机字符，失去BEM“可定位”的核心价值。
常见错误现象：:global(.card<strong>header)</strong>滥用导致样式泄漏；class="cardheader"硬写却没配对应.card块级类，造成孤儿类；Svelte的class:active={isActived}动态写法直接拼"card__header--active"，漏掉双下划线或大小写错。
Svelte中BEM类名必须和文件名严格对齐
Svelte组件名（如UserCard.svelte）就是BEM Block名的唯一来源，必须转为小写短横线格式：user-card。不能缩写成ucard，也不能保留驼峰UserCard——否则Stylelint插件stylelint-selector-bem-pattern的componentName校验会失败。
-
UserCard.svelte → Block名只能是user-card，所有类名必须以它开头
-
SearchBar.svelte → search-bar，不是searchbar或search-bar-component
- Svelte中不支持
&嵌套语法，所以Sass那种.user-card { &<strong>header { } }</strong>写法无效，得手动写全.user-cardheader
怎么在Svelte模板里安全写动态BEM类名
别用字符串拼接：class="user-card__header{size ? '--' + size : ''}"容易漏空格、错顺序、IDE无法跳转。推荐用clsx配合类型约束：
import clsx from 'clsx';
<p>let size = 'large';
let isActive = true;</p><p></p><div class="{clsx('user-card<strong">header', {
'user-cardheader--large': size === 'large',
'user-card__header--active': isActive
})}>
...
</div>
-
clsx自动去重、空格、布尔过滤，比手拼可靠得多
- 所有类名必须显式写出完整BEM结构，不能依赖Svelte的
class:xxx简写（它不生成--或__）
- 如果用了CSS Modules（
user-card.module.css），BEM类名要和:local(.user-card__header)完全一致，否则构建后哈希类名和BEM语义脱钩
Stylelint校验Svelte中BEM类名的关键配置stylelint-selector-bem-pattern插件必须启用，并且三项参数一个都不能少：
-
"preset": "bem"：指定BEM模式，不是"suit"或"css-modules"
-
"componentName": "^[a-z][a-z0-9]+(-[a-z0-9]+)*$"：强制Block名小写+短横线，拒绝UserCard或user_card
-
"ignoreSelectors": ["/^\.[a-z]+:(hover|focus|active)$/", "/^\.js-.+$/"]：跳过伪类和JS控制类，否则.user-card:hover报错
UserCard.svelte → Block名只能是user-card，所有类名必须以它开头 SearchBar.svelte → search-bar，不是searchbar或search-bar-component &嵌套语法，所以Sass那种.user-card { &<strong>header { } }</strong>写法无效，得手动写全.user-cardheader
class="user-card__header{size ? '--' + size : ''}"容易漏空格、错顺序、IDE无法跳转。推荐用clsx配合类型约束：
import clsx from 'clsx';
<p>let size = 'large';
let isActive = true;</p><p></p><div class="{clsx('user-card<strong">header', {
'user-cardheader--large': size === 'large',
'user-card__header--active': isActive
})}>
...
</div>
-
clsx自动去重、空格、布尔过滤，比手拼可靠得多 - 所有类名必须显式写出完整BEM结构，不能依赖Svelte的
class:xxx简写（它不生成--或__） - 如果用了CSS Modules（
user-card.module.css），BEM类名要和:local(.user-card__header)完全一致，否则构建后哈希类名和BEM语义脱钩
Stylelint校验Svelte中BEM类名的关键配置stylelint-selector-bem-pattern插件必须启用，并且三项参数一个都不能少：
-
"preset": "bem"：指定BEM模式，不是"suit"或"css-modules"
-
"componentName": "^[a-z][a-z0-9]+(-[a-z0-9]+)*$"：强制Block名小写+短横线，拒绝UserCard或user_card
-
"ignoreSelectors": ["/^\.[a-z]+:(hover|focus|active)$/", "/^\.js-.+$/"]：跳过伪类和JS控制类，否则.user-card:hover报错
"preset": "bem"：指定BEM模式，不是"suit"或"css-modules" "componentName": "^[a-z][a-z0-9]+(-[a-z0-9]+)*$"：强制Block名小写+短横线，拒绝UserCard或user_card "ignoreSelectors": ["/^\.[a-z]+:(hover|focus|active)$/", "/^\.js-.+$/"]：跳过伪类和JS控制类，否则.user-card:hover报错 注意：这个插件只校验CSS文件里的选择器，对Svelte文件中class={...}里的字符串完全不感知——所以JS侧必须靠clsx或封装函数兜底，不能只靠Stylelint。
BEM在Svelte里最难的不是写法，而是让每个<strong></strong>和--都指向真实存在的Block上下文；一旦组件名改了、文件挪了、类名缩写了，整条语义链就断了，没人再能从user-cardavatar--rounded反推它属于哪个文件。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
