豆瓣移動端風格的css命名方法與學習

標籤：

在CSS取名相對於剛入門來說是最頭疼的事情,往往取一個可讀性的名字相對以後的代碼風格還是很重要的.

在配合團隊方面一個好的類名可以協助同事來理解,增加團隊之間的效率有著很大的意義.

豆瓣的前段相對其他網站來說還是比較文藝清爽的,所以很值得去向他們團隊學習,學習的地方很多,先來取名把.

在最外面的一個<div class="ck-root">.....</div>首先內容先用一個大的div盒子包起來,

<div class="ck-root">.....</div>在觀察豆瓣的其他的頁面後,我感覺ck-root.裡面的ck是一個代號的意思,

不同的代號代表著豆瓣裡面不同的頁面,也可能是一個單詞的縮寫,這隻是我個人的一個猜測.

“ck-root”而"ck"後面的root是根源的意思,也是祖先的意思,聲明這是一個最大的盒子！

 

在最大的一個div裡面又有兩個其他的div,這兩個分別是導航　　與　　內容.

<div class="ck-navdrawer">...</div>　　<div class="ck-main>...</div>

第一個“ck-navdrawer”,每一個相對較大的div都會把ck這個代號書寫進去,而後面的“navdrawer”

其實是兩個單片語成而成,分別是“nav導航”以及“drawer抽屜(裡面藏了許多內容)”,導航裡面的其他內容;

但是這個需在豆瓣子頁面內的導航條才會出現的哦.

 

在“ck-navdrawer”裡面有兩個html5的標籤header,article,

header是HTML5裡面新增的頭部標籤,article也是HTML5內引用外界的一個標籤在這裡是引用到其他的豆瓣頁面.

在header標籤內又看到了<h2 class="main-nav-btn">...</h2> 與 <div class="user">...</div>

在h2裡面“main-nav-btn”中  main=主要  nav=導航   btn="botton(按鈕縮寫)",意思已經很明確了.當我們點擊了“豆瓣”

主要的導航就已經出現在我們面前了,語義化做得很完善,裡面的img就是“豆瓣”這字的圖片.

而另一個<div class="user">...</div>　　"user"就是使用者的意思,裡面是一個a標籤連結"登入/註冊",

這裡面又有兩個命名分別有<a href="#" class="nav-accounts ck-login">登入/註冊</a>

“nav-accounts” = 導航—賬戶,對使用者登入處的描述 “ck-login” = 代號-登入；使用者的登入頁面,這樣寫方便與在其他地方進行追逐

 

當我們返回article來,article在這裡是引用到其他的豆瓣頁面.

我們點擊完“豆瓣”彈出來的下拉框都是豆瓣內其他的一些頁面.這樣就完善了一個導航條裡面應該有的一些東西

　　

<div class="ck-nav-wrap">...</div>    class= 代號-導航-包裹；一個大的盒子將裡面導航的內容包裹起來,

　　<div class="ck-nav-content>..</div>  class=ck-導航-內容 ;在這裡面就是一個導航內的內容了.

　　<div class="ck-footer"></div>  class=ck-底部;  在這個導航底部裡暫時沒添加其他內容只是用來佔據一行

可用來作為一個以後所要用到的一個鋪墊. 也可用作為一個與導航與內容之間隔開的間距元素,當前是用做隔開內容與導航的.

 當我們開啟了裡面又是一個新的天地-

<div class="ck-content">...</div>　這個已經打入到導航內部,可用ck-content內容來進行書寫.

　　<div class="main-nav  main-nav-show">..</div>  class="主要-導航    主要-導航-顯示"多個class的名字,

說明需要多種css用來書寫,也會是第一個css因其他標籤處的有相同的屬性,而這個與其他有不同點所以單一列出一個css.等等..很多種使用方法.

　　　　<ul> <li class="nav_douban"> </li> </ul>　然後這裡使用了一個無序列表用來顯示導航所導航的標題

　　

這個<li class="nav_douban"></li>  class=導航_豆瓣(豆瓣的首頁面) 很明確的表達出了所要到達的地方.

另外的一個無序列表比之前的那個多添加了一個類名    class="ck-navdrawer-more"

“nav導航”以及“drawer抽屜(裡面藏了許多內容),more=更多；表示導航內的其他附加功能,

無序列表 中li裡面的a標籤又出現一個類名 第一個a標籤 :

class="ck-switchmode switch-to-desktop"  = ck-開關模式   切換-到-案頭,   很好的一個語義化。

class="ck-modal-link site-feedback"      = ck-模式-連結  網站-反饋.

豆瓣移動端的導航條這些,這裡的CSS命名都非常的符合w3c標準,也更加的有語義化,

 

豆瓣移動端風格的css命名方法與學習