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:法律資訊###