css書寫規范class和id常見的命名


良好的css書寫規范可以提高代碼的閱讀體驗(藍色表常用)

一.css書寫順序

(1)位置屬性position,top,left,rigt,z-index,display,float等

 (2)大小width,height,padding,margin等

(3)文字系列font ,line-height,letter-spacing,color-text-align等

(4)背景background,border等

(5)其他animation,transition等

二.字符的命名規范

1長名稱或詞組可以使用中橫線來為選擇器命名

2不能用'_'下划線來命名css選擇器

原因

(1)一些瀏覽器已經不允許使用下划線來命名css選擇器(不兼容)

(2)能良好區分javascript變量命名

三.不要隨意使用id

id是js唯一的,不能多次使用,而是用class類選擇器可以重復使用,另外id的優先級先於calss,所以id不能濫用。

四.常用的css命名規則

頭:header

內容:content/container

尾:footer

導航:nav

側欄:sidebar

欄目:column

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

左右中:left right center

登陸條:loginbar

標志:logo

廣告:banner

頁面主題:main

熱點:hot

新聞:news

下載:download

子導航:subnav

菜單:menu

子菜單:submenu

搜索:search

友情鏈接:friendlink

頁腳:footer

版權:copyright

滾動:scroll

內容:content

標簽:tags

文章列表:list

提示信息:msg

小技巧:tips

欄目標題:title

加入:joinus

指南:guild

服務:service

注冊:regsiter

狀態:status

投票:vote

合作伙伴:partner

五.常見的id命名

<1>頁面結構

容器:container

頁頭:header

頁面主題:main

頁尾:footer

導航:nav

側欄:sidebar

欄目:column

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

左右中:left right center

<2>導航

導航:nav

主導航:mainbar

子導航: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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM