微信小程序 TDesign UI 库中 CSS 选择器 .t-grid--card 如何生效？

微信小程序 TDesign UI 库中的 CSS 选择器疑云

在微信小程序开发中使用 TDesign UI 库时，开发者可能会遇到一些疑惑的 CSS 选择器。例如，在如下 DOM 结构中：

元素 class 是 't-grid t-card class t-class',但是选择器是 '.t-grid--card'
这怎么生效的？这个写法也让我疑惑，像BEM命名又像是CSS变量，但好像都不是。
希望有大佬解惑。

详解

立即学习“前端免费学习笔记（深入）”；

疑点就在于 .t-grid--card 这个选择器是如何生效的。要知道，它的 class 属性中并没有包含 --card 这个后缀。

解答如下：

• .t-grid--card 是通过小程序开发中的外部样式类传入的，即 class 属性中的 t-class。
• 而 .t-grid--card 的写法确实采用了 BEM 命名风格。但是，在实际项目中使用 BEM 命名时，不一定需要严格按照 DOM 结构增加后缀。根据团队的命名规范可以合理缩减 class 名称的长度。
• CSS 变量是以 -- 开头声明并且通过 var() 使用的，与本例无关。

以上就是微信小程序 TDesign UI 库中 CSS 选择器 .t-grid--card 如何生效？的详细内容，更多请关注其它相关文章！