首頁 > 頭條 > 常用的CSS命名規範大總結,非常實用(收藏)

常用的CSS命名規範大總結,非常實用(收藏)

清浅
發布: 2019-04-23 10:44:41
原創
9036 人瀏覽過

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:法律資訊###
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
作者最新文章
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板