
微信小程序 tdesign ui 库中的 css 选择器探秘
在使用微信小程序的 TDesign UI 库时,用户有时会对 CSS 选择器产生疑惑,如:<p>
DOM 结构中,元素 class 是 't-grid t-card class t-class',但是选择器是 '.t-grid--card'
这是如何生效的?这个写法也令人疑惑,既像是 BEM 命名又像是 CSS 变量,但似乎都不是。<p>
深入解析:<p>
1. 外部样式类引入:<p>
.t-grid--card 选择器实际上是通过小程序开发中的外部样式类传入的,也就是 class 中的 t-class。<p>
2. BEM 命名规范:<p>
TDesign 中使用的确实是 BEM 命名风格。在真实项目中使用 BEM 命名时,可以适当简化 class 名称长度,不一定需要严格按照 DOM 结构添加后缀。<p>
3. CSS 变量:<p>
CSS 变量以 -- 开头声明,并通过 var() 使用,与本例中的写法不符。











