轉載:https://www.cnblogs.com/soyxiaobi/p/9866168.html
爲防止優秀文章被刪除,把大神的文章轉到此地
一、Web語義化
1.1 H5的語義化
對於經驗資深的前端er,在給web佈局時,相信都會很注重標籤和命名的規範。尤其是隨着html5的普及發展,更是把web前端語義化推向一個新的臺階上。比如html5給我們新增的語義標籤:header、nav、main、aside、footer、section、article等等。那麼對於web語義化,有什麼優勢呢?
1.2 語義化優勢
-
可以讓人一目瞭然代碼結構塊,對於項目的維護或者優化都是非常有意義的。
-
語義化能提高頁面SEO。如:
<header></header>
可以很好的代替傳統的<div id="header"></div>
。
1.3 語義化使用規則
- 標籤語義化,如在合適的地方用合適的語義化標籤,如頭部可用
<header>
、尾部可用<footer>
; - 命名語義化,包括html的id和class的命名,javascript相關命名;如#header{}、.footer{}、等。
二、命名規範
2.1 常見的命名參考規範
在開發的時候,經常會因爲元素命名而頭疼,無論是CSS樣式命名還是現在很經常接觸到的自定義組件命名. 下面整理一些常用的命名參考規範:
頭部:header
內容:content/container
尾部:footer
導航:nav
側欄:sidebar
欄目:column
整體佈局:wrapper
左右中:left / right / center
登錄條:loginbar
標誌:logo
廣告:banner
頁面主體:main
熱點:hot
新聞:news
下載:download
子導航:subnav
菜單:menu
子菜單:submenu
搜索:search
友情鏈接:friendlink
頁腳:footer
版權:copyright
滾動:scroll
標籤頁:tab
文章列表:list
提示信息:msg
小技巧:tips
欄目標題:title
加入:join
指南:guild
服務:service
註冊:regsiter
狀態:status
投票:vote
合作伙伴:partner
...
2.2 id的命名規範
頁面結構類
容器: container
頁頭:header
內容:content/container
頁面主體:main
頁尾:footer
導航:nav
側欄:sidebar
欄目:column
頁面外圍控制整體佈局寬度:wrapper
左右中:left right center
導航類
導航:nav
主導航:mainnav
子導航:subnav
頂導航:topnav
邊導航:sidebar
左導航:leftsidebar
右導航:rightsidebar
菜單:menu
子菜單:submenu
標題: title
摘要: summary
功能類
標誌:logo
廣告:banner
登陸:login
登錄條:loginbar
註冊:regsiter
搜索:search
功能區:shop
標題:title
加入:joinus
狀態:status
按鈕:btn
滾動:scroll
標籤頁:tab
文章列表:list
提示信息:msg
當前的: current
小技巧:tips
圖標: icon
註釋:note
指南:guild
服務:service
熱點:hot
新聞:news
下載:download
投票:vote
合作伙伴:partner
友情鏈接:link
版權:copyright
2.3 class/css的命名
- 顏色:使用顏色的名稱或者16進制代碼,如:
.red { color: red; }
.f60 { color: #f60; }
.ff8600 { color: #ff8600; }
- 字體大小,直接使用“font+字體大小”作爲名稱,如:
.font12px { font-size: 12px; }
.font9pt {
font-size: 9pt; }
- 對齊樣式,使用對齊目標的英文名稱,如:
.left { float:left; }
.bottom { float:bottom; }
- 標題欄樣式,使用“類別+功能”的方式命名,如:
.navnews { } //導航欄: 新聞
.navproduct { } //導航欄: 產品
2.4 其他
- 一律小寫;
- 儘量用英文;
- 儘量不加中槓和下劃線;
- 儘量不縮寫,除非一看就明白的單詞,如:wrapper可以寫成wrap。
- css文件命名規範:
主要的 master.css;
模塊 module.css;
基本共用 base.css;
佈局/版面 layout.css;
主題 themes.css;
專欄 columns.css;
文字 font.css;
表單 forms.css;
補丁 mend.css;
打印 print.css
但是我們經常在SPA開發過程中, 會在命名好的(組件)文件夾裏直接通過index.js
index.less
表示