資訊專欄INFORMATION COLUMN
摘要：命名規(guī)則樣式類名全部用小寫，首字符必須是字母，禁止數(shù)字或其他特殊字符。其他禁止使用在樣式表命名中，一律使用命名。什么是命名空間通過統(tǒng)一的命名規(guī)范定義命名的范圍，成為命名空間。
統(tǒng)一的命名規(guī)范，便于多人開發(fā)維護(hù)時(shí)代碼統(tǒng)一，減少項(xiàng)目溝通和交接的成本，增加代碼的語義化。
樣式類名全部用小寫，首字符必須是字母，禁止數(shù)字或其他特殊字符。由以字母開頭的小寫字母（a-z）、數(shù)字（0-9）、中劃線?（-）組成。
可以是單個(gè)單詞，也可以是組合單詞，要求能夠描述清楚模塊和元素的含義，使其具有語義化。避免使用?123456…,red,blue,left,right之類的（如顏色、字號(hào)大小等）矢量命名，如class="left-news"、class="2"?，以避免當(dāng)狀態(tài)改變時(shí)名稱失去意義。盡量用單個(gè)單詞簡(jiǎn)單描述class名稱。
雙單詞或多單詞組合方式：形容詞-名詞、命名空間-名次、命名空間-形容詞-名詞。例如：news-list、mod-feeds、mod-my-feeds、cell-title
把id留給后臺(tái)開發(fā)和JS使用，除此之外頁(yè)面的page id(如首頁(yè)的外層需要一個(gè)ID?id="pageIndex")，頁(yè)面結(jié)構(gòu)（header main footer）允許用id命名(ID命名建議使用駝峰命名)。其他禁止id使用在樣式表CSS命名中，一律使用class命名。
在編碼思想上，我們可以將頁(yè)面拆分成不同的層級(jí)（布局、模塊、元件）。
什么是CSS命名空間？
通過統(tǒng)一的命名規(guī)范定義命名的范圍，成為CSS class & id命名空間。
布局: 以語義化的單詞layout作為命名空間，例如主欄布局命名 layout-main，只改變layout-命名空間后面的命名，layout始終保留。布局的命名空間為layout-xxx。
模塊：頁(yè)面是由一個(gè)或多個(gè)模塊組成，模塊的英文單詞是module，規(guī)范簡(jiǎn)寫成mod，如新聞模塊mod-news，照片展示模塊mod-photo-show。模塊的命名空間為mod-xxx?。
元件：元件是屬于模塊內(nèi)部的，也可以說模塊是由元件和它內(nèi)部的自有元素組成。如用戶照片信息元件cell-user-photo。元件的命名空間為cell-xxx?。
| ID名稱 | 命名 | ID名稱 | 命名 |
|---|---|---|---|
| 頭部 | header | 主體 | main |
| 腳部 | footer | 容器 | wrapper |
| 側(cè)欄 | sideBar | 欄目 | column |
| 布局 | layout | ? | ? |
| Class名稱 | 命名 | Class名稱 | 命名 |
|---|---|---|---|
| 模塊(如：新聞模塊) | mod (mod-news) | 標(biāo)題欄 | title |
| 內(nèi)容 | content | 次級(jí)內(nèi)容 | sub-content |
| Class名稱 | 命名 | Class名稱 | 命名 |
|---|---|---|---|
| 導(dǎo)航 | nav | 主導(dǎo)航 | main-nav |
| 子導(dǎo)航 | sub-nav | 頂部導(dǎo)航 | top-nav |
| 菜單 | menu | 子菜單 | sub-menu |
| Class名稱 | 命名 | Class名稱 | 命名 |
|---|---|---|---|
| 二級(jí) | sub | 面包屑 | breadcrumb |
| 標(biāo)志 | logo | 廣告 | bner(禁用banner或ad) |
| 登陸 | login | 注冊(cè) | register/reg |
| 搜索 | search | 加入 | join |
| 狀態(tài) | status | 按鈕 | btn |
| 滾動(dòng) | scroll | 標(biāo)簽頁(yè) | tab |
| 文章列表 | list | 短消息 | msg/message |
| 當(dāng)前的 | current | 提示小技巧 | tips |
| 圖標(biāo) | icon | 注釋 | note |
| 指南 | guide | 服務(wù) | service |
| 熱點(diǎn) | hot | 新聞 | news |
| 下載 | download | 投票 | vote |
| 合作伙伴 | partner | 友情鏈接 | link |
| 版權(quán) | copyright | 演示 | demo |
| 下拉框 | select | 摘要 | summary |
| 翻頁(yè) | pages | 主題風(fēng)格 | themes |
| 設(shè)置 | set | 成功 | suc |
| 按鈕 | btn | 文本 | txt |
| 顏色 | color/c | 背景 | bg |
| 邊框 | border/bor | 居中 | center |
| 上 | top/t | 下 | bottom/b |
| 左 | left/l | 右 | right/r |
| 添加 | add | 刪除 | del |
| 間隔 | sp | 段落 | p |
| 彈出層 | pop | 公共 | global/gb |
| 操作 | op | 密碼 | pwd |
| 透明 | tran | 信息 | info |
| 重點(diǎn) | hit | 預(yù)覽 | pvw |
| 單行輸入框 | input | 首頁(yè) | index |
| 日志 | blog | 相冊(cè) | photo |
| 留言板 | guestbook | 用戶 | user |
| 確認(rèn) | confirm | 取消 | cancel |
| 報(bào)錯(cuò) | error | ? | ? |
text-c1, text-c2,text-c3……
bg-c1,bg-c2,bg-c3……
border-c1,border-c2,border-c3……
?
?
?
浮動(dòng)
右浮動(dòng) fr 左浮動(dòng) fl
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/1922.html
摘要：本篇介紹幾種命名規(guī)范。使用的網(wǎng)站四其他命名規(guī)范等減少對(duì)結(jié)構(gòu)的依賴增加重復(fù)性的使用幾種命名規(guī)范比較與在命名上相反的點(diǎn)可以放心使用，以為都是在模塊內(nèi)但不推薦當(dāng)前我們的網(wǎng)站略有思想更概括，中的，相當(dāng)于的，相當(dāng)于的，相當(dāng)于的中文 本篇介紹幾種CSS命名規(guī)范。 （規(guī)范詳細(xì)請(qǐng)參考底部References) 一、NEC (nice easy css) 網(wǎng)易前端CSS開源項(xiàng)目 1.1 樣式分類 重...
摘要：引言最近想將這幾個(gè)月做過的東西組件化，然后首先想到的是編碼規(guī)范化本文只涉及命名規(guī)范，搬來了造好的輪子。舉例對(duì)齊樣式使用對(duì)齊目標(biāo)的英文名稱。舉例注意事項(xiàng)一律小寫盡量用英文不加中杠和下劃線盡量不縮寫，除非一看就明白的單詞。 引言：最近想將這幾個(gè)月做過的東西組件化，然后首先想到的是 編碼規(guī)范化！本文只涉及 CSS 命名規(guī)范，搬來了Alloyteam 造好的輪子。可能并不完全適用，在以后...
摘要：簡(jiǎn)評(píng)是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的時(shí)間。一些團(tuán)隊(duì)使用連字符分隔符，而其他團(tuán)隊(duì)則傾向于使用更加結(jié)構(gòu)化的稱為的命名規(guī)范。一般來說，命名規(guī)范有三個(gè)問題要解決能夠通過名字就能清楚選擇器的功能。 簡(jiǎn)評(píng)：Debug CSS 是一種很耗時(shí)的操作，如果有良好的命名規(guī)范可以節(jié)約很多的 Debug 時(shí)間。 使用連字符（-）分隔字符串 你可能習(xí)慣了在 Javascript 中使用小駝...
摘要：前言在項(xiàng)目開發(fā)中對(duì)于名字的命名和書寫老是感覺很混亂，這對(duì)于代碼的可讀性以及維護(hù)提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下命名規(guī)則說明所有的命名最好都小寫屬性的值一定要用雙引號(hào)括起來，且一定要有值如每個(gè)標(biāo)簽都要有開始和結(jié)束，且 前言 在項(xiàng)目開發(fā)中對(duì)于css名字的命名和書寫老是感覺很混亂，這對(duì)于代碼的可讀性以及維護(hù)提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下....
摘要：前言在項(xiàng)目開發(fā)中對(duì)于名字的命名和書寫老是感覺很混亂，這對(duì)于代碼的可讀性以及維護(hù)提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下命名規(guī)則說明所有的命名最好都小寫屬性的值一定要用雙引號(hào)括起來，且一定要有值如每個(gè)標(biāo)簽都要有開始和結(jié)束，且 前言 在項(xiàng)目開發(fā)中對(duì)于css名字的命名和書寫老是感覺很混亂，這對(duì)于代碼的可讀性以及維護(hù)提出了挑戰(zhàn)，所以在閑暇之余看了一些這方面的內(nèi)容，現(xiàn)總結(jié)如下....
閱讀 1270·2021-10-14 09:50
閱讀 1571·2019-08-30 15:54
閱讀 1032·2019-08-30 11:22
閱讀 2923·2019-08-30 10:50
閱讀 1808·2019-08-29 18:39
閱讀 3057·2019-08-29 13:07
閱讀 2082·2019-08-28 17:54
閱讀 756·2019-08-26 17:44
