(css/js)如何起個好名字

什麼鬼，又不知道怎麼命名class了
直接進入正文

記得大一學C語言的時候，那個時候根本沒把這當回事吧。
所謂的混沌階段
變量名，函數名，隨意吧，那個時候寫簡單地c程序，就好像寫着玩，就算複雜點得也不過一二百行，因此變量名什麼的，可能就會起a b c s s1 s2...

後來漸漸地代碼寫多了點，才發現也不能隨便起名字吧，稍微有意義一點的。
就會給起名sum()表示求和函數，漸漸地知道最好用英語給變量或者是函數名起名字，儘管有時候英語很差，那就翻翻有道吧。

再後來工做，走上前端這條路了，恩，前端但是細緻活，有一段時間以爲前端真是沒意思啊，寫div佈局，調css樣式，就只是爲了對對齊，1px的移動感受也並無好看不少啊，並且裏面那麼多元素id到還好反正一個頁面就一個，也用的少，class就特別多，代碼量少一點的，佈局清晰一點的頁面還好，沒有那麼多class名字。接觸到比較大的項目，有不少頁面模塊，每一個模塊的內容又有點類似，class不少，寫新頁面的時候會時不時地思考怎麼給這個class起個不會重複又達意的名字。那個時候，TL和咱們說，變量名長一點不要緊不要讓人看不懂，一個單詞縮寫不要縮寫到兩三個字母讓人看不懂。因此有一段時間的命名是很長的兩三個單詞的駝峯法命名。
<!--more-->
看一些前端框架庫，看他們的命名感受都挺好的，至少看着舒心，不繁瑣並且挺達意的。特別是-短槓的用法，以前看bootstrap，以爲挺好的，我以前的作法老是駝峯法命名，好比寫一個商店的div以下

<div class="shop">
    <div class="shopName"></div>
    <div class="shopAddress"></div>
    <div class="shopType"></div>
    <div class="shopGood"></div>
</div>

只是一個例子，上述層級只有兩級描述商店內容的相關信息，要是再接下去
shopGood下的分級描述有哪些類型的商品 我估計就起名
shopGoodFood shopGoodBook shopGoodTool...

這樣若是頁面少，也還好，主要是當項目有不少頁面時候，這裏命名了個shop 可能在別的地方又命名了個shop 頗有體會，許多時候剛要給起個名字，智能提示已經存在了，而後有想換個啥呢總不能shop2

吐槽 歸吐槽，總之，也是慢慢地在寫代碼的過程當中造成本身的一套好一點的命名規範和風格吧，第一要務是要寫的能讓別人看頁面佈局 經過className DOM元素的意義關係 一目瞭然，可維護吧。

--------------------<h3 id="common">正文開始分割線</h3>--------------------------

在命名方面的一些自我總結

• 命名儘可能用英語，好幾個英語單詞合成的名稱，能夠縮寫，但前提能看懂意思，否則長點就長一點

• 我仍是習慣駝峯命名規則，helloWorld

• 對一些元素的命名能夠在後面加上這個元素名好比cancelBtn productListTable

• - 我以爲shopName 有時候可能shop-name 會不會看上去好一點呢(層級多一點話)

• 儘可能減小沒必要要的class 好比對於ul li這樣的，作好父級的命名

• 經常使用的class命名

• 其餘

一些樣式處理 Tips

• 由於瀏覽器自帶各自的樣式處理css，因此須要一套本身的reset.css

• 公共基礎的樣式簡寫在common.css

今天寫想寫這個就是由於起名字好煩以爲，看看別人怎麼作的，果真找到了不少能夠學習的文章,再貼一遍
什麼鬼，又不知道怎麼命名class了
概要知識點：

• BEM 命名 block element modifier

• 常見的class關鍵詞 佈局類/包裹類/大小類/狀態類...

• 定製簡單地規則 利用中劃線- 名稱前綴/後綴...

• 修飾關鍵詞 header縮寫hd .modal-hd .article-hd...

• 層級/樣式範圍

關於BEM CSS命名規範的幾篇文章
爲何咱們須要BEM
BEM —— 源自Yandex的CSS 命名方法論
NEC-CSS規範

關於 如何編寫公共的css文件(common.css)的幾篇文章
如何編寫公共的css文件 如何讓css文件更規範