前端開發(fā)id和class命名規(guī)范學(xué)習(xí)了
2022-11-25 加入收藏
id和class命名規(guī)范
外套?wrap
容器?container
內(nèi)容?content
頂部?top
頭部?header
底部?footer
導(dǎo)航?nav
導(dǎo)航條?navBar
主導(dǎo)航?mainNav
子導(dǎo)航?subNav
頂導(dǎo)航?topNav
標(biāo)題?title
左?left
右?right
中?center
上?up
下?down
幻燈片?banner
輪播?slider
面包屑?breadCrumb
登錄?login
注冊?reg
用戶?user
提示信息?msg
新聞?news
列表?list
版權(quán)?copyright
詳情?view
項目?item
更多?more
電話?tel
郵箱?email
選項卡?tab
頭像?avatar
文章?artical
圖集?gallery
條欄?bar
關(guān)閉?close
箭頭?arrow
向左一個?prev
向右一個?next
頁面、頁碼?page
圖標(biāo)?icon
標(biāo)識?logo
菜單?menu
相片?photo
播放?play
快捷?quick
側(cè)邊欄?slider
返回?back
搜索?search
面板?panel
不固定?fluid
分享?share
加載?loading
數(shù)字?num
首頁?index
關(guān)于?about
服務(wù)?service
產(chǎn)品?product
聯(lián)系?contact
文本命名規(guī)范
index.css： 一般用于首頁建立樣式
head.css： 頭部樣式，當(dāng)多個頁面頭部設(shè)計風(fēng)格相同時使用。
base.css： 共用樣式。
style.css：獨立頁面所使用的樣式文件。
global.css：頁面樣式基礎(chǔ)，全局公用樣式，頁面中必須包含。
layout.css：布局、版面樣式，公用類型較多時使用，一般用在首頁級頁面和產(chǎn)品類頁面中
module.css：模塊，用于產(chǎn)品類頁，也可與其它樣式配合使用。
master.css：主要的樣式表
columns.css：專欄樣式
themes.css：主體樣式
forms.css：表單樣式
mend.css：補丁，基于以上樣式進行的私有化修補。
頁面結(jié)構(gòu)命名：
page：代表整個頁面，用于最外層。
wrap：外套，將所有元素包在一起的一個外圍包，用于最外層
wrapper：頁面外圍控制整體布局寬度，用于最外層
container：一個整體容器，用于最外層
head，header：頁頭區(qū)域，用于頭部
nav: 導(dǎo)航條
content：內(nèi)容，網(wǎng)站中最重要的內(nèi)容區(qū)域，用于網(wǎng)頁中部主體
main：網(wǎng)站中的主要區(qū)域（表示最重要的一塊位置），用于中部主體內(nèi)容
column：欄目
sidebar：側(cè)欄
foot，footer：頁尾、頁腳。網(wǎng)站一些附加信息放置區(qū)域，（或命名為 copyright）用于底部
導(dǎo)航命名：
nav, navbar, navigation, nav-wrapper：導(dǎo)航條或?qū)Ш桨?，代表橫向?qū)Ш?br style="box-sizing: border-box;"/>topnav：頂部導(dǎo)航
mainbav：主導(dǎo)航
subnav：子導(dǎo)航
sidebar：邊導(dǎo)航
leftsidebar 或 sidebar_a：左導(dǎo)航
rightsidebar 或 sidebar_b：右導(dǎo)航
title：標(biāo)題
summary：摘要
menu：菜單，區(qū)域包含一般的鏈接和菜單
submenu：子菜單
drop：下拉
dorpmenu：下拉菜單
links：鏈接菜單
功能命名：
logo：標(biāo)記網(wǎng)站logo標(biāo)志
banner：標(biāo)語、廣告條、頂部廣告條
login：登陸，（例如登錄表單：form-login）
loginbar：登錄條
register：注冊
tool, toolbar：工具條
search：搜索
searchbar：搜索條
searchlnput：搜索輸入框
shop：功能區(qū)，表示現(xiàn)在的
icon：小圖標(biāo)
label：商標(biāo)
homepage：首頁
subpage：二級頁面子頁面
hot：熱門熱點
list：文章列表，（例如：新聞列表：list-news）
scroll：滾動
tab：標(biāo)簽
sitemap：網(wǎng)站地圖
msg 或 message：提示信息
current：當(dāng)前的
joinus：加入
status：狀態(tài)
btn：按鈕，（例如：搜索按鈕可寫成：btn-search）
tips：小技巧
note：注釋
guild：指南
arr, arrow：標(biāo)記箭頭
service：服務(wù)
breadcrumb：(即頁面所處位置導(dǎo)航提示）
download：下載
vote：投票
siteinfo：網(wǎng)站信息
partner：合作伙伴
link, friendlink：友情鏈接
copyright：版權(quán)信息
siteinfoCredits：信譽
siteinfoLegal：法律信息