对BEM命名规范总觉得还是达不到使用上很自信的状态，之前自己也有过一些错误的使用经历，例如element的嵌套。

 box__list     
 box__list__item   // 不推荐
 box__list__item__btn // 不推荐
 box__item  // 虽然item是list里面，但不应该一直用多个__，一个原因是会造成维护上的困难，例如层级多时，假设一个层级没有了，那么受影响的全部都要改。
 box__btn // btn同样也要直接和block连用。

个人觉得自己比较不清楚的点主要在于block和element的区分。这次再梳理总结一下搞清楚。

概念读过很多次了，block指的是具有独立意义的entity，而element不具有独立意义，它是在block里的，modifier是修饰符，主要用来起标识作用，例如元素现在是active的、hidden的之类的。

modifier其实感觉比较简单。主要是前两个，在运用中，自己经常还是会有些疑惑。所以今天主要是研究在运用bem规则的网站css代码，看看它们具体是怎么用的BEM。我的学习方法步骤会是： 1.根据布局自己构思命名方式； 2.看看网站开发者的命名构思方式，与2中自己的构思进行对比。

bem官方网站

BEM命名规范的官方网站如果不使用BEM命名规范就太奇怪了，所以先从这个网站看起。

header部分

我自己的构思

- header
   header__wrapper
     header__logowrapper  // logo如果先用div包裹，再插入logo icon，要怎么写比较好，这里我有点疑问。 //其次，logo算是standalone的？还是依赖于header的？
       header__logo 
     header__nav  
       header__nav-item  // 这里我直接用nav-item起名试试看
       hader__nav-item
       hader__nav-item
     hader__links
       header__github-link
       ....
       

BEM网站自己的写法

   <header> // 只作为container存在，class都是布局相关的class，并没有用.header作为class
      navbar
         navbar__wrapper // wrapper是去除了左右两边margin的容器的部分
             navbar__logotype
             navbar__links // links是几个导航按钮部分
             navbar__socials  

上面是最外层的部分，和我的基本还算一致。

然后是每个子部分

navbar__logotype
   <a>   // 这里logotype下面没有起任何语义化的class，只有a和svg
     <svg>
     
navbar__links     // 这里总的叫links，每个就单独叫link，如果是我，搞不好要写item，link比item语义化要强很多
   navbar__link
   navbar__link
   ....
   
navbar__socials
   <a>
   ...   // 这里a也没有任何语义化的class。

所以以上对比可以看出

• block其实应该是按照网页大的布局来看的？例如logo虽然我们觉得好像是可以独立存在的，但是从整个网页布局来看，它只是header的一部分，所以它被当作element来处理。
• 细致的class不是越多越好。例如bem网站上，一些标签是没有class的，而用的是一些统一处理样式的class

main 部分

我的思路

main
   main__title
   main__btn
   main__code-imgs
      main__code-img
      ...
   main__advantanges
     main__advantage
     ...
   main___clients
     main__client

bem网站

main
  section
    hero
      hero__text
      hero__button
  section
  section
    .benifits-section
       benifit-card 
         benifit-card__heading
         benifit-card__text
       benifit-card 
         ...
       benifit-card 
         ...
  section
     .companies-section
        companies-section__heading
        companies-section__grid
          company

对比一下

• 在main部分，它不是说每一部分作为main__xxx存在。而是每一部分作为一个独立block出现。
• 它每个部分都是先写一个<section>，然后section没有class，section里设置一个div，名为：'xxx-section'。
• section里的则似乎没有固定规则。像card这类感觉可以自成ui组件的东西，可以作为block而存在。
• 最后一个class直接就叫了comany，前面并无任何修饰。比如它没有写compinies-section__company，可能是觉得这样反而非常啰嗦，没有必要？因为company本身语义性就很明确，而且就让人知道是companies section里的company。但想前面navbar__link的情况下，如果没有navbar__修饰，link的信息描述就会不充分很多。

footer

我的思路

footer
   footer__wrapper
     footer__maintain-info
     foonter__license

bem网站上footer部分完全没有任何语义化的class名。都是一些标识排版信息的。

总结

对我启发比较大的应该是section部分的布局。 其他就是整体控制上的一些class。 还有就是block是要考虑是否有意义的，为什么main不作为一个block处理，是因为main是没有意义的，它只代表很空洞的“内容”两个字，而它里面的一块块内容才是standalone且meaningful的部分。