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

在文章实战开发的过程中，我们经常会遇到一些这样那样的问题，然后要卡好半天，等问题解决了才发现原来一些细节知识点还是没有掌握好。今天golang学习网就整理分享《微信小程序 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 如何生效？》文章吧，也可关注golang学习网公众号了解相关技术文章。