新手必看的css書寫順序和常用命名推薦

2021-08-19 12:57:27 字數 1559 閱讀 7186

css書寫順序

該**來自於網際網路,最初好像是mozilla的**上。

display & flow(顯示與流)

positioning(位置)

dimensions(尺寸)

padding, borders,margins,outline(填充、邊界、邊緣、輪廓)

typographic styles (排版樣式)

backgrounds (背景)

opacity, cursors, generated content(不透明度、游標、生成內容)

例子:

el

css書寫規範

使用css縮寫屬性

css有些屬性是可以縮寫的,比如padding,margin,font等等,這樣精簡**同時又能提高使用者的閱讀體驗。

簡寫命名

很多使用者都喜歡簡寫類名,但前提是要讓人看懂你的命名才能簡寫哦!

16進製制顏色**縮寫

有些顏色**是可以縮寫的,我們就盡量縮寫吧,提高使用者體驗為主。

連字元css選擇器命名規範

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

2.不建議使用「_」下劃線來命名css選擇器,為什麼呢?

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

不要隨意使用id

id在js是唯一的,不能多次使用,而使用class類選擇器卻可以重複使用,另外id的優先順序優先與class,所以id應該按需使用,而不能濫用。

為選擇器新增狀態字首

有時候可以給選擇器新增乙個表示狀態的字首,讓語義更明了,比如下圖是新增了「.is-」字首。

常用的css命名規則

注釋的寫法:

/* header */
id的命名:

1)頁面結構

(2)導航

(3)功能

注意事項::

1.一律小寫;

2.盡量用英文;

3.不加中槓和下劃線;

4.盡量不縮寫,除非一看就明白的單詞。

css樣式表檔案命名

主要的 master.css

模組 module.css

基本共用 base.css

布局、版面 layout.css

主題 themes.css

專欄 columns.css

文字 font.css

表單 forms.css

補丁 mend.css

列印 print.css

css常用書寫順序

1 屬性順序 建議遵循以下順序 同一 rule set 下的屬性在書寫時,應按功能進行分組,並以 formatting model 布局方式 位置 box model 尺寸 typographic 文字相關 visual 視覺效果 的順序書寫,以提高 的可讀性。補充 布局定位屬性 display p...

CSS 的簡寫 新手必看

1.顏色的簡寫 十六進製制形式 如 rrggbb rgb函式值形式 如 rgb x,x,x x 有兩種寫法,一種是0程式設計客棧 255之間整數,另一種是百分號形式 如 20 顏色名稱 如 red green 使用者系統色盤值 如windowtext background 2.單位值的省略 當數值為...

推薦的 CSS 書寫順序

以下順序是mozilla推薦的css書寫規範 這個瀏覽器解析過程有關,瀏覽器先對dom定位,然後解析自身屬性,然後再解析內部物件!顯示屬性 display list style position float clear 自身屬性 width height margin padding border ...