常用的CSS命名規範大總結，非常實用（收藏）

CSS命名由小寫的英文單字或組合命名，單字與單字之間透過「-」連接，常用的CSS命名規範有文字命名規範，頁面結構命名規範，導航命名以及功能命名等。

CSS 命名一般採用小寫英文單字或組合命名，單字與單字之間以"-"分割，而且英文單字不縮寫，除非是那種簡單一眼看上去就能明白的單字。接下來在文章中分享一些CSS中常用的命名規範，希望對大家有幫助

【推薦課程： #CSS教學】

文字命名規格

index.css： 一般用於首頁建立樣式

head.css： 頭部樣式，當多個頁面頭部設計風格相同時使用。

base.css： 共用樣式。

style.css：獨立頁面所使用的樣式檔案。

global.css：頁面樣式基礎，全域公用樣式，頁面中必須包含。

layout.css：佈局、版面樣式，公用類型較多時使用，一般用在首頁級頁面和產品類頁面中

module.css：模組，用於產品類頁，也可與其它樣式搭配使用。

master.css：主要的樣式表

columns.css：欄位樣式

themes.css：主體樣式

forms.css：表單樣式

mend.css：補丁，基於以上樣式進行的私有化修補。

頁面結構命名：

page：代表整個頁面，用於最外層。

wrap：外套，將所有元素包在一起的一個外圍包，用於最外層

wrapper：頁面外圍控制整體佈局寬度，用於最外層

container：一個整體容器，用於最外層

head，header：頁頭區域，用於頭部

nav: 導覽列

#content：內容，網站中最重要的內容區域，用於網頁中部主體

main：網站中的主要區域（表示最重要的一塊位置），用於中部主體內容

column：欄目

sidebar：側邊欄

foot，footer：頁尾、頁尾。網站一些附加資訊放置區域，（或命名為copyright）用於底部

導航命名：

nav, navbar, navigation, nav-wrapper：導航條或導航包，代表橫向導航

topnav：頂部導航

mainbav：主導航

subnav：子導航

sidebar：邊導航

leftsidebar 或sidebar_a：左導航

rightsidebar 或sidebar_b：右導航

title：標題

summary：摘要

menu：選單，區域包含一般的連結與選單

submenu：子選單

drop：下拉

#dorpmenu：下拉式選單

##links：連結選單

功能命名：

logo：標記網站logo標誌

banner：標語、廣告條、頂部廣告條

login：登陸，（例如登入表單：form-login）

loginbar：登入條

register：註冊

tool, toolbar：工具列

search：搜尋

#searchbar：搜尋條

searchlnput：搜尋輸入框

shop：功能區，表示現在的

icon：小圖示

label：商標

homepage：首頁

subpage：二級頁面子頁面

hot：熱門熱點

list：文章列表，（例如：新聞列表：list -news）

scroll：滾動

tab：標籤

sitemap：網站地圖

msg 或message：提示訊息

current ：目前的

joinus：加入

status：狀態

btn：按鈕，（例如：搜尋按鈕可寫成：btn-search）

tips ：小技巧

note：註解

guild：指南

arr, arrow：標記箭頭

service：服務

breadcrumb： (即頁面所處位置導航提示）

download：下載

vote：投票######siteinfo：網站資訊######partner：合作夥伴### ###link, friendlink：友誼連結######copyright：版權資訊######siteinfoCredits：信譽######siteinfoLegal：法律資訊###