css 命名 分類排序方法

2021-09-16 22:16:32 字數 1551 閱讀 9237

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,你不能使用任何表現層的標識...