如果要应用 BEM 命名 是只针对于公用组件还是整个项目都需要~

Question

BEM 在公用组件上用可以很好的保证组件命名的安全 那么如果在公用组件上应用了 BEM 命名规范 在普通的页面样式里也需要引入 BEM 规范吗？

应用了 BEM 是不是应该避免选择器嵌套了？那么一个区域内部元素的命名岂不是只能用一次了.....

Answer 1

在整个项目中都要用到，可以避免选择器嵌套，从而避免了选择器权重过大的问题。不过，如果使用 webpack 的话，更推荐 css module。

Answer 2

bem有多种实践，并没有唯一的最佳实践。我的做法是：

组件本身只用b，子元素用b-e，基层元素用b-e-m。组件名称尽量简单，比如nav。而且样式也要尽量少，不要试图写全面的、最终的样式代码，因为这样没法复用。全面的样式代码应该在例如.sidebar .nav里覆盖定义，假设sidebar是侧边栏的大容器名称。

还有一种状态类，单独命名，比如.active

组件的父元素和祖先容器的命名不要跟组件产生关联，而且我不对父元素和祖先元素使用bem，我只用单一字表示class，因为这已经足够用，因为单字后面写级联元素，也是一种变相的bem。

最后，要减少层级，删除不必要的层级，也删除不必要的class。