CSS

之前我寫css的時候，刻意使用了scss來寫，因為我想他提供的嵌套功能，很有效的避免css類名沖突的問題，比如說

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

我這里在header和footer里面同時使用了btn這個類，但是并沒有產生類名沖突，這是因為生成的btn類被分別限制在header和footer里面，所以我覺得這是一個很方便的功能。最近也在寫react，之所以不用css module來避免這個問題，主要是因為我覺得通過有效的命名規(guī)范，就可以避免這個問題了，而且引入了css module，在jsx里面寫類名，會變得非常麻煩和啰嗦，同時，雖然避免了命名沖突的問題，但是同樣會喪失css的靈活性。

但是直到前幾天，我遇到了一個麻煩，開始懷疑使用scss寫嵌套css規(guī)則的優(yōu)勢。
先說這樣嵌套寫的問題吧。主要問題就是，他會讓人寫出層級非常非常深的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這段的代碼,權重不夠.問題是出現(xiàn)在我添加hover效果的時候,沒有完整的把css的嵌套層級寫一邊,我應該像下面這樣寫:

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

問題是解決了,但是還是面臨老問題,為了覆蓋一個css,我需要寫出一個完成的css層級,一旦css的層級很復雜,那么寫出的代碼就會很臃腫,第二個解決辦法,就是使用!important來增加權重.

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

事實上,幾天前我就是這么處理的,但是我覺得這樣非常不好,所以,我開始考慮是不是不應該用scss來解決這個問題,于是,我把目光投向了之前就了解過,但是沒有使用過的BEM命名方法.
BEM具體的寫法我就不寫出來了,對于我來說,優(yōu)點就是不再寫出層級很深的scss,但是依舊能保證類名不沖突,他那些概念對我來說,學習成本也不是很高,我也愿意去接受,
不過缺點就是寫出的類名比較長,編寫的時候就會麻煩的,也考慮過使用網上提供的,通過scss的mixin來解決這個問題,但是寫出來的代碼又變成了滿屏的@include,所以,再三權衡下,我還是放棄采用.

js

今天看了一下,推薦的js代碼風格,結果就找到了airebnb,看了一遍文檔,感覺還是很不錯的,于是今晚就在自己的項目里面實踐了一次,當然,他里面的規(guī)則也有我不認可的.比較突出的就是該不該用下劃線來表示私有.
比如說

let person  = {
   _name: 'nani'
}

airbnb給出不使用的理由是,因為js里面并沒有真正意義上的私有,而且,這回讓人誤以為修改以下劃線開頭的屬性不會有啥問題(我并不知道為什么會這樣認為).
但是我覺得使用下劃線非常有幫助,原因就是

1. 下劃線默認是私有的,在webstorm里面,以下劃線開頭的屬性會被標記為私有,能提供更加智能的代碼提示

2. 以下劃線開頭的屬性是私有的,雖然仍舊能被訪問到,但是我覺得它透露了一個信息,那就是"我已經很明確的告訴你這個屬性是私有的了,如果你還是想要訪問修改他.那么程序如果出錯了,后果自負"