css書寫規范有哪些

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

1、書寫順序

根據屬性的重要性按順序書寫

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

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 = 行內樣式style。
b = ID選擇器的數量。
c = 類、偽類和屬性選擇器的數量。
d = 類型選擇器和偽元素選擇器的數量。

3、書寫規范、縮寫屬性

屬性縮寫

去掉小數點前的0

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

16進制顏色代碼縮寫

連字符CSS選擇器命名規范

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

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

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

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

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

不要輕易使用id

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

為選擇器添加狀態前綴

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

image

4、 命名規范

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

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

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

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

5 狀態
選中  selected    sel
當前  current crt
顯示  show    show
隱藏  hide    hide
打開  open    open
關閉  close   close
出錯  error   err
不可用 disabled    dis

1、class

頭：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　　
指南：guide　　
服務：service　　
注冊：regsiter　　
狀態：status　　
投票：vote　　
合作伙伴：partner

2、id

(1)頁面結構　　
    容器: container　　
    頁頭：header　　
    內容：content/container　　
    頁面主體：main　　
    頁尾：footer　　
    導航：nav　　
    側欄：sidebar　
    欄目：column　　
    頁面外圍控制整體佈局寬度：wrapper　　
    左右中：left right center

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

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

3、文件

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

5、注意事項

/* Header */　　
內容區　　
/* End Header */

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

以上就是css書寫規范有哪些，小編相信有部分知識點可能是我們日常工作會見到或用到的。希望你能通過這篇文章學到更多知識。更多詳情敬請關注億速云行業資訊頻道。