最近的思考总结

CSS

之前我写css的时候，刻意使用了scss来写，因为我想他提供的嵌套功能，很有效的避免css类名冲突的问题，比如说

.main {  
  .header {    
    .btn {      
      color: blue;   
    }  
  }  
  .footer {    
    .btn {     
     color: red;    
    }  
  }
}

我这里在header和footer里面同时使用了btn这个类，但是并没有产生类名冲突，这是因为生成的btn类被分别限制在header和footer里面，所以我觉得这是一个很方便的功能。最近也在写react，之所以不用css module来避免这个问题，主要是因为我觉得通过有效的命名规范，就可以避免这个问题了，而且引入了css module，在jsx里面写类名，会变得非常麻烦和啰嗦，同时，虽然避免了命名冲突的问题，但是同样会丧失css的灵活性。

但是直到前几天，我遇到了一个麻烦，开始怀疑使用scss写嵌套css规则的优势。
先说这样嵌套写的问题吧。主要问题就是，他会让人写出层级非常非常深的css，比如上面的scss生成的.main .header .btn,如果再多来几个类，那层级就更深了。

前几天遇到的问题大概是这样的：

.main {  
  .header {
    .search-bar {
      .btn-wrapper {
        .btn {      
           color: blue;   
        }  
      }
    }    
  }  
}

假如我需要在search-bar被hover的时候,改变btn类的color的颜色,我该怎么办?
我一开始sbb的写出下面的代码

.main {  
  .header {
    .search-bar {
      .btn-wrapper {
        .btn {      
           color: blue;   
        }
      }
      &:hover {
        .btn {
          color: red;
        }
      }  
    }    
  }
}  

结果是效果没有出来,为什么呢?
因为生成的代码是下面这样的

.main .header .search-bar .btn-wrapper .btn {
    color: blue;
}

.main .header .search-bar:hover .btn {
    color: red;
}

很明显,有hover这段的代码,权重不够.问题是出现在我添加hover效果的时候,没有完整的把css的嵌套层级写一边,我应该像下面这样写:

&:hover {
  .btn-wrapper {
    .btn {
      color: red;
    }
  }
} 

问题是解决了,但是还是面临老问题,为了覆盖一个css,我需要写出一个完成的css层级,一旦css的层级很复杂,那么写出的代码就会很臃肿,第二个解决办法,就是使用!important来增加权重.

      &:hover {
        .btn {
          color: red !important;
        }
      } 

事实上,几天前我就是这么处理的,但是我觉得这样非常不好,所以,我开始考虑是不是不应该用scss来解决这个问题,于是,我把目光投向了之前就了解过,但是没有使用过的BEM命名方法.
BEM具体的写法我就不写出来了,对于我来说,优点就是不再写出层级很深的scss,但是依旧能保证类名不冲突,他那些概念对我来说,学习成本也不是很高,我也愿意去接受,
不过缺点就是写出的类名比较长,编写的时候就会麻烦的,也考虑过使用网上提供的,通过scss的mixin来解决这个问题,但是写出来的代码又变成了满屏的@include,所以,再三权衡下,我还是放弃采用.

js

今天看了一下,推荐的js代码风格,结果就找到了airebnb,看了一遍文档,感觉还是很不错的,于是今晚就在自己的项目里面实践了一次,当然,他里面的规则也有我不认可的.比较突出的就是该不该用下划线来表示私有.
比如说

let person  = {
   _name: 'nani'
}

airbnb给出不使用的理由是,因为js里面并没有真正意义上的私有,而且,这回让人误以为修改以下划线开头的属性不会有啥问题(我并不知道为什么会这样认为).
但是我觉得使用下划线非常有帮助,原因就是

1. 下划线默认是私有的,在webstorm里面,以下划线开头的属性会被标记为私有,能提供更加智能的代码提示

2. 以下划线开头的属性是私有的,虽然仍旧能被访问到,但是我觉得它透露了一个信息,那就是"我已经很明确的告诉你这个属性是私有的了,如果你还是想要访问修改他.那么程序如果出错了,后果自负"