css 技术材料设计精简版（谷歌）实现的名称是什么？答案

【问题标题】：Whats the name of the css technique material design lite (google) implements?css 技术材料设计精简版（谷歌）实现的名称是什么？
【发布时间】：2016-04-21 15:32:56
【问题描述】：

我听说，但找不到任何要仔细检查的文档，当标签在文档中具有 ID 或类时，浏览器必须计算应用哪个类时，这种技术有助于减少具有 CSS 特异性的计算机进程。

这是来自 Google Material Design Lite 的摘录，它使用了以下技术：

<!-- Colored FAB button -->
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--colored">  
<i class="material-icons">add</i>
</button>

你会注意到课程

mdl-button

这个基本上是用作ID的。而

mdl-button--colored

就是上面提到的ID，跟类

colored

所以，实际上这与以下内容相同：

#mdl-button.colored

不同的是，计算机不必处理 ID 和 Class 的特殊性，因为现在我们只有一个唯一的类。

再说一遍.. 问题是“这种技术是如何命名的”，或者如果没有名称，也许有人可以发布一个链接，指向深入解释该概念的文档？

干杯！

【问题讨论】：

No.. mdl-button--colored 是一个类而不是一个 ID...它是一个完全独立的类，具有自己独特的样式。这都是 BEM/SMACSS 方法的一部分。
所以不是#mdl-button.colored，而是.mdl-button.mdl-button--colored，这是不同级别的特异性，
是的，我知道这是一门课。该技术谈到使用类作为 ID。这就是为什么 .mdl-button 充当唯一标识符，然后添加 --colored 使其更加具体。
类不是唯一标识符，它们是组标识符。

标签： css performance web frontend pagespeed

【解决方案1】：

您可能想查看 CSS 的块元素修饰符方法。它背后的想法可以帮助你在前端实现可重用的组件和代码共享。

查看此链接了解更多信息：

http://getbem.com/introduction/

【讨论】：

【解决方案2】：

后代、子或相邻以及过度限定的选择器

哪些是 Google 禁止使用的。

【讨论】：