要想成爲前端大神，那些你不得不知曉的web前端命名規範。

1、Web語義化

1.1 H5的語義化

對於經驗資深的前端er，在給web佈局時，相信都會很注重標籤和命名的規範。尤爲是隨着html5的普及發展，更是把web前端語義化推向一個新的臺階上。好比html5給咱們新增的語義標籤：header、nav、main、aside、footer、section、article等等。那麼對於web語義化，有什麼優點呢？

1.2 語義化優點

1. 可讓人一目瞭然代碼結構塊，對於項目的維護或者優化都是很是有意義的。

2. 語義化能提升頁面SEO。如：<header></header>能夠很好的代替傳統的<div id="header"></div>。

1.3 語義化使用規則

1. 標籤語義化，如在合適的地方用合適的語義化標籤，如頭部可用<header>、尾部可用<footer>；
2. 命名語義化，包括html的id和class的命名，javascript相關命名；如#header{}、.footer{}、等。

2、命名規範

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的命名

1. 顏色：使用顏色的名稱或者16進制代碼，如：

.red { color: red; } 
.f60 { color: #f60; } 
.ff8600 { color: #ff8600; }

1. 字體大小，直接使用「font+字體大小」做爲名稱，如：

.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }

1. 對齊樣式，使用對齊目標的英文名稱，如：

.left { float:left; } 
.bottom { float:bottom; }

1. 標題欄樣式，使用「類別+功能」的方式命名，如：

.navnews { }        //導航欄: 新聞
.navproduct { }     //導航欄: 產品

2.4 其餘

1. 一概小寫；
2. 儘可能用英文；
3. 儘可能不加中槓和下劃線；
4. 儘可能不縮寫，除非一看就明白的單詞，如：wrapper能夠寫成wrap。
5. 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表示

文章內容源自：https://mp.weixin.qq.com/s/_tC2R2o4wkeoP39AtfmlkA