css書寫規(guī)范有哪些

本篇文章給大家分享的是有關(guān)css書寫規(guī)范有哪些，小編覺得挺實(shí)用的，因此分享給大家學(xué)習(xí)，希望大家閱讀完這篇文章后可以有所收獲，話不多說，跟著小編一起來看看吧。

1、書寫順序

根據(jù)屬性的重要性按順序書寫

只遵循橫向順序即可，先顯示定位布局類屬性，后盒模型等自身屬性，最后是文本類及修飾類屬性。

1.位置屬性

(position, top, right, z-index, display, float等)

2.大小

(width, height, padding, margin)

3.文字系列

(font, line-height, letter-spacing, color- text-align等)　　

4.背景

(background, border等)

5.其他

(animation, transition等)

2、選擇器等級

a = 行內(nèi)樣式style。
b = ID選擇器的數(shù)量。
c = 類、偽類和屬性選擇器的數(shù)量。
d = 類型選擇器和偽元素選擇器的數(shù)量。

3、書寫規(guī)范、縮寫屬性

屬性縮寫

去掉小數(shù)點(diǎn)前的0

簡寫命名，但前提是要讓人看懂你的簡寫

16進(jìn)制顏色代碼縮寫

連字符CSS選擇器命名規(guī)范

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

2.不建議使用“_”下劃線來命名CSS選擇器，為什么呢?

輸入的時候少按一個shift鍵;

瀏覽器兼容問題 (比如使用*tips的選擇器命名，在IE6是無效的)

能良好區(qū)分JavaScript變量命名(JS變量命名是用“*”)

不要輕易使用id

id在JS是唯一的，不能多次使用，而使用class類選擇器卻可以重復(fù)使用，另外id的優(yōu)先級優(yōu)先與class，所以id應(yīng)該按需使用，而不能濫用。

為選擇器添加狀態(tài)前綴

有時候可以給選擇器添加一個表示狀態(tài)的前綴，讓語義更明了，比如下圖是添加了“.is-”前綴。

image

4、 命名規(guī)范

1 布局
文檔  doc doc
頭部  head    hd
主體  body    bd
尾部  foot    ft
主欄  main    mn
主欄子容器   mainc   mnc
側(cè)欄  side    sd
側(cè)欄子容器   sidec   sdc
盒容器 wrap/box    wrap/box
導(dǎo)航  nav nav

2 模塊
子導(dǎo)航 subnav  snav
面包屑 crumb   crm
菜單  menu    menu
選項(xiàng)卡 tab tab
標(biāo)題區(qū) head/title  hd/tt
內(nèi)容區(qū) body/content    bd/ct
列表  list    lst
表格  table   tb
表單  form    fm
熱點(diǎn)  hot hot
排行  top top
登錄  login   log
標(biāo)志  logo    logo
廣告  advertise   ad
搜索  search  sch
幻燈  slide   sld
提示  tips    tips
幫助  help    help
新聞  news    news
下載  download    dld
注冊  regist  reg
投票  vote    vote
版權(quán)  copyright   cprt
結(jié)果  result  rst
標(biāo)題  title   tt
按鈕  button  btn
輸入  input   ipt

3 功能
浮動清除    clearboth   cb
向左浮動    floatleft   fl
向右浮動    floatright  fr
內(nèi)聯(lián)塊級    inlineblock ib
文本居中    textaligncenter tac
文本居右    textalignright  tar
文本居左    textalignleft   tal
垂直居中    verticalalignmiddle vam
溢出隱藏    overflowhidden  oh
完全消失    displaynone dn
字體大小    fontsize    fs
字體粗細(xì)    fontweight  fw

4 皮膚
字體顏色    fontcolor   fc
背景  background  bg
背景顏色    backgroundcolor bgc
背景圖片    backgroundimage bgi
背景定位    backgroundposition  bgp
邊框顏色    bordercolor bdc

5 狀態(tài)
選中  selected    sel
當(dāng)前  current crt
顯示  show    show
隱藏  hide    hide
打開  open    open
關(guān)閉  close   close
出錯  error   err
不可用 disabled    dis

1、class

頭：header　　
內(nèi)容：content/container　　
尾：footer　　
導(dǎo)航：nav　　
側(cè)欄：sidebar　　
欄目：column　　
頁面外圍控制整體佈局寬度：wrapper　　
左右中：left right center　　
登錄條：loginbar　　
標(biāo)志：logo　　
廣告：banner　　
頁面主體：main　　
熱點(diǎn)：hot　　
新聞：news　　
下載：download　　
子導(dǎo)航：subnav　　
菜單：menu　　
子菜單：submenu　　
搜索：search　　
友情鏈接：friendlink　　
頁腳：footer　　
版權(quán)：copyright　　
滾動：scroll　　
內(nèi)容：content　　
標(biāo)簽：tags　　
文章列表：list　　
提示信息：msg　　
小技巧：tips　　
欄目標(biāo)題：title　　
加入：joinus　　
指南：guide　　
服務(wù)：service　　
注冊：regsiter　　
狀態(tài)：status　　
投票：vote　　
合作伙伴：partner

2、id

(1)頁面結(jié)構(gòu)　　
    容器: container　　
    頁頭：header　　
    內(nèi)容：content/container　　
    頁面主體：main　　
    頁尾：footer　　
    導(dǎo)航：nav　　
    側(cè)欄：sidebar　
    欄目：column　　
    頁面外圍控制整體佈局寬度：wrapper　　
    左右中：left right center

(2)導(dǎo)航　　
    導(dǎo)航：nav　　
    主導(dǎo)航：mainnav　　
    子導(dǎo)航：subnav　　
    頂導(dǎo)航：topnav　　
    邊導(dǎo)航：sidebar　　
    左導(dǎo)航：leftsidebar　　
    右導(dǎo)航：rightsidebar　　
    菜單：menu　　
    子菜單：submenu　　
    標(biāo)題: title　　
    摘要: summary

(3)功能　　
    標(biāo)志：logo　　
    廣告：banner　　
    登陸：login　　
    登錄條：loginbar　　
    注冊：register　　
    搜索：search　　
    功能區(qū)：shop　　
    標(biāo)題：title　　
    加入：joinus　　
    狀態(tài)：status　　
    按鈕：btn　　
    滾動：scroll　　
    標(biāo)籤頁：tab　　
    文章列表：list　　
    提示信息：msg　　
    當(dāng)前的: current　　
    小技巧：tips　　
    圖標(biāo): icon　　
    注釋：note　　
    指南：guild　　
    服務(wù)：service　　
    熱點(diǎn)：hot　　
    新聞：news　　
    下載：download　　
    投票：vote　　
    合作伙伴：partner　　
    友情鏈接：link　　
    版權(quán)：copyright

3、文件

    主要的 master.css　　
    模塊 module.css　　
    基本共用 base.css　　
    布局、版面 layout.css　　
    主題 themes.css　　
    專欄 columns.css　　
    文字 font.css　　
    表單 forms.css　　
    補(bǔ)丁 mend.css　　
    打印 print.css

5、注意事項(xiàng)

/* Header */　　
內(nèi)容區(qū)　　
/* End Header */

    1.一律小寫;　　
    2.盡量用英文;　　
    3.不加中槓和下劃線;　　
    4.盡量不縮寫，除非一看就明白的單詞。

以上就是css書寫規(guī)范有哪些，小編相信有部分知識點(diǎn)可能是我們?nèi)粘９ぷ鲿姷交蛴玫降摹ＯＭ隳芡ㄟ^這篇文章學(xué)到更多知識。更多詳情敬請關(guān)注億速云行業(yè)資訊頻道。