首页 >
文章列表 > 微信小程序 TDesign UI 库中 CSS 选择器 .t-grid--card 如何生效?
微信小程序 TDesign UI 库中 CSS 选择器 .t-grid--card 如何生效?
211
2025-02-24

微信小程序 TDesign UI 库中的 CSS 选择器疑惑探究
在使用微信小程序 TDesign UI 库时,可能遇到如下疑惑:
问题:
DOM 结构中,元素的 class 为 "t-grid t-card class t-class",但选择器却是 .t-grid--card。这如何生效?这种写法让我感到困惑,既像是 BEM 命名又像是 CSS 变量,但似乎都不是。
解答:
- 外部样式类:.t-grid--card 是通过小程序开发中的外部样式类传入的,即 class 中的 t-class。
- BEM 命名风格:虽然这种写法是 BEM 命名风格,但它并不是严格按照 DOM 结构来增加后缀。实际项目中,可以根据团队的命名规范合理缩减 class 名称长度。
- CSS 变量:CSS 变量是以 -- 开头声明并通过 var() 使用的,如:--color: red; color: var(--color);。