css內部的分類及其順序
1、重置(reset)和預設(base)(tags):消除預設樣式和瀏覽器差異,並設定部分標籤的初始樣式,以減少後面的重複勞動!你可以根據你的**需求設定!
統一處理:建議在這個位置統一呼叫背景圖(這裡指多個布局或模組或元件共用的圖)和清除浮動(這裡指通用性較高的布局、模組、元件內的清除)等統一設定處理的樣式!
2、布局(grid)(.g-):將頁面分割為幾個大塊,通常有頭部、主體、主欄、側欄、尾部等!
4、元件(unit)(.u-):通常是乙個不可再分的較為小巧的個體,通常被重複用於各種模組中!比如按鈕、輸入框、loading、圖示等!
5、功能(function)(.f-):為方便一些常用樣式的使用,我們將這些使用率較高的樣式剝離出來,按需使用,通常這些選擇器具有固定樣式表現,比如清除浮動等!不可濫用!
7、狀態(.z-):為狀態類樣式加入字首,統一標識,方便識別,她只能組合使用或作為後代
8、出現(.u-ipt.z-dis{},.m-list li.z-sel{}),具體詳見命名規則的擴充套件相關項。
功能類和**類樣式為表現化的樣式,請不要濫用!以上順序可以按需求適當調整。
統一語義理解和命名
布局(.g-)
語義 命名 簡寫
文件 doc doc
頭部 head hd
主體 body bd
尾部 foot ft
主欄 main mn
主欄子容器 mainc mnc
側欄 side sd
側欄子容器 sidec sdc
功能(.f-)
語義 命名 簡寫
浮動清除 clearboth cb
向左浮動 floatleft fl
向右浮動 floatright fr
內聯塊級 inlineblock ib
文字居中 textaligncenter tac
文字居右 textalignright tar
文字居左 textalignleft tal
垂直居中 verticalalignmiddle vam
溢位隱藏 overflowhidden oh
完全消失 displaynone dn
字型大小 fontsize fs
字型粗細 fontweight fw
**(.s-)
語義 命名 簡寫
字型顏色 fontcolor fc
背景 background bg
背景顏色 backgroundcolor bgc
背景 backgroundimage bgi
背景定位 backgroundposition bgp
邊框顏色 bordercolor bdc
狀態(.z-)
語義 命名 簡寫
選中 selected sel
當前 current crt
顯示 show show
隱藏 hide hide
開啟 open open
關閉 close close
出錯 error err
不可用 disabled dis
CSS命名 BEM方法
bem 是塊 block 元素 element 修飾符 modifier 的簡寫,利用不同的區塊,功能以及樣式來給元素命名。官網原文表述。bem方法通過使用混合或建立額外的塊元素來達到相同的結果。您不需要建立額外的抽象包裝器。相對於其他塊定位乙個塊 設定乙個塊元素相對於其他塊元素的位置,最好的方法通...
CSS命名方法之BEM
bem 源自yandex的css 命名方 bem的意思就是塊 block 元素 element 修飾符 modifier 是由yandex團隊提出的一種前端命名方 這種巧妙的命名方法讓你的css類對其他開發者來說更加透明而且更有意義。bem命名約定更加嚴格,而且包含更多的資訊,它們用於乙個團隊開發乙...
CSS命名規範和CSS書寫規範及方法
一.常規書寫規範及方法 1.選擇doctype xhtml 1.0 提供了三種dtd宣告可供選擇 過渡的 transitional 要求非常寬鬆的dtd,它允許你繼續使用html4.01的標識 但是要符合xhtml的寫法 完整 如下 嚴格的 strict 要求嚴格的dtd,你不能使用任何表現層的標識...