web前端開發企業級CSS常用命名有哪些

本篇內容主要講解“web前端開發企業級CSS常用命名有哪些”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“web前端開發企業級CSS常用命名有哪些”吧!

企業開發css命名規范：

常用命名

標題: title

摘要: summary

箭頭： arrow

商標： label

網站標志： logo

轉角/圓角： corner

橫幅廣告： banner

子菜單： subMenu

搜索： search

搜索框： searchBox

登錄： login

登錄條：loginbar

工具條： toolbar

下拉： drop

標簽頁： tab

當前的： current

列表： list

滾動： scroll

服務： service

提示信息： msg

熱點：hot

新聞： news

小技巧： tips

下載： download

欄目標題： title

熱點： hot

加入： joinus

注冊： regsiter

指南： guide

友情鏈接： friendlink

狀態： status

版權： copyright

按鈕： btn

合作伙伴： partner

投票： vote

左/右/中：left/right/center

簡介：profiles

評論：comment

ID命名

(1)頁面結構

容器: container

頁頭：header

內容：content/container

頁面主體：main

頁尾：footer

導航：nav

側欄：sidebar

欄目：column

頁面外圍控制整體布局寬度：wrapper

左右中：left right center

(2)導航

導航：nav

主導航：mainbav

子導航：subnav

頂導航：topnav

邊導航：sidebar

左導航：leftsidebar

右導航：rightsidebar

菜單：menu

子菜單：submenu

標題: title

摘要: summary

(3)功能

標志：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

class命名

(1)顏色:使用顏色的名稱或者16進制代碼,如：

.red { color: red; }

.f60 { color: #f60; }

.ff8600 { color: #ff8600; }

(2)字體大小,直接使用"font+字體大小"作為名稱,如：

.font12px { font-size: 12px; }

.font9pt {font-size: 9pt; }

(3)對齊樣式,使用對齊目標的英文名稱,如：

.left { float:left; }

.bottom { float:bottom; }

(4)標題欄樣式,使用"類別+功能"的方式命名,如：

.barnews { }

.barproduct { }

到此，相信大家對“web前端開發企業級CSS常用命名有哪些”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！