Question

考虑以下两个CSS选择器：

这通过继承选择每个组件：

_genreList[index].id

这将通过其唯一的类名称选择每个组件：

.app { ... }
.app .header { ... }
.app .header .search { ... }
.app .header .search form { ... }
.app .header .search form input { ... }

这两个中哪个对性能更好？另外，请考虑到每个组件在同一页面中可以重复1到10次。

Answer 1

简单的代码和示例您可以尝试一下这是BEM（块元素管理）的标准

HTML

<form class="form form--theme-xmas form--simple">
  <input class="form__input" type="text" />
  <input
    class="form__submit form__submit--disabled"
    type="submit" />
</form>

CSS

.form { }
.form--theme-xmas { }
.form--simple { }
.form__input { }
.form__submit { }
.form__submit--disabled { }

众所周知，正确的样式指南可以显着提高开发速度，调试以及旧代码中新功能的实现。可悲的是，大多数CSS代码库有时是在没有任何结构或命名约定的情况下开发的。从长远来看，这将导致无法维护的CSS代码库。

BEM方法可确保参与网站开发的每个人都使用单一代码库并使用相同的语言。使用适当的命名将为您做好网站设计的更改做好准备。

查看更多信息http://getbem.com/naming/

Answer 2

我认为第一个会更好，因为您可以在任何地方多次使用类

Answer 3

我的猜测是，第一个文件的大小较小，但它滥用继承，第二个则相反，并且在html文件上更漂亮（我认为）。

长CSS类名称对继承性能的影响

3 个答案: