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