css編碼規範

2021-09-19 14:45:14 字數 4680 閱讀 2671

常用的檔案命名:

較長檔名必須以-中橫槓符連線,專案裡面的私有樣式檔案:專案名-業務模組名稱.css。

例:

/* 專案名為clout */

/* good */

clout-home.css

/* bad */

clouthome.css;

(重要)在不是必須的情況下盡可能不用id選擇器。

例:

/* 選擇器名稱 */

/* good */

.mydialog

/* bad */

.mydialog

/* 模組及巢狀 */

/* good */

標題.mydialog-hd-title

/* bad */

標題.mydialog .hd .title

(建議)常用的選擇器命名:

(重要)統一使用4個空格縮排,不得使用tab2個空格(沒規範前的縮排方式不管)。

(重要)選擇器跟

/* bad */

.selector(重要)屬性跟:之間不能有空格,:跟屬性值之間必須包含空格。

例:

/* good */

.selector

/* bad */

.selector

(重要)>+~選擇器的兩邊各保留乙個空格。

例:

/* good */

.header > .title

label + input

input:checked ~ .input-face

/* bad */

.header>.title

......

(重要)乙個rule中有多個選擇器時,選擇器間必須換行。

例:

/* good */

p,div,

input,

textarea

/* bad */

p, div, input, textarea

(重要)屬性值之間必須換行。

例:

/* good */

.content

/* bad */

.content

(建議)對於超長的樣式屬性值,可在空格,處換行。

例:

.selector 

.selector

(重要)每行不得超過 120 個字元,除非單行不可分割(例如url超長)。

(重要)文字內容必須用雙引號包圍。

例:

/* good */

body

/* bad */

body

(重要)數值為 0 - 1 之間的小數,省略整數部分的 0 。

例:

/* good */

body

/* bad */

(重要)數值為0的屬性值須省略單位。

例:

/* good */

body

/* bad */

body

(重要)url()函式中的路徑不加引號

例:

/* good */

body

/* bad */

body

(建議)url()函式中的絕對路徑可省去協議名

例:

/* good */

body

/* bad */

body

(重要)rgb顏色值必須使用十六進製制形式#3f3f3f。不允許使用rgb()

解釋:帶有alpha(不透明度)的顏色資訊可以使用rgba()。使用rgba()時每個逗號後須保留乙個空格。

例:

/* good */

.border

.overlayer

/* bad */

.border

.overlayer

(重要)顏色值可縮寫時,須使用縮寫形式。

例:

/* good */

.text-grey

/* bad */

.text-grey

(重要)顏色值不可使用顏色單詞。

例:

/* good */

.text-red

/* bad */

.text-red

(建議)顏色值中的英文本母使用小寫,如果採用大寫字母,則必須保證同一專案內是一致的。

例:

/* good */

.border-color

/* bad */

.border-color

(重要)dom節點idclass屬性賦值時=之間不得有空格,屬性值必須用雙引號包圍,不得用單引號。

例:

/* good */

/* bad */

(重要)如無必要,盡量不使用id選擇器,給idclass選擇器設定屬性時不需要新增型別選擇器進行限定。

例:

/* good */

#footer,

.container

/* bad */

div#footer,

div.container

(重要)id選擇器不需巢狀其他選擇器。

例:

提示語

/* good */

#tips

/* bad */

.footer #tips

(建議)在可以使用縮寫的情況下,盡量使用屬性縮寫。

例:

/* good */

body

/* bad */

body

(建議)使用bordermarginpadding等縮寫時,應注意確實需要設定多個方向的值時才使用縮寫,避免其他方向的有用值被覆蓋掉

例:

.wrap

/* good */

.list-wrap

/* bad */

.list-wrap

(建議)按如下順序書寫,摘自

位置屬性(position, top, right, z-index,display, float, overflow 等)

大小(width, height, padding, margin, border)  

文字系列(font, line-height, letter-spacing,color- text-align等)

視覺(background, color, list-style等)  

其他(animation, transition等)

例:

.footer-fixed
(重要)使用transition時應指定transiton-property,不用all

例:

/* good */

.tab

/* bad */

.tab

(建議)屬性的私有字首按長到短排列,按:對其

例:

/* good */

.tab

/* bad */

.tab

php 編碼規範哪些 php編碼規範

1.php 必須以完整的形式來定界 即不要使用php 短標籤 且保證在關閉標籤後不要有任何空格。2.當乙個字串是純文字組成的時候 即不含有變數 則必須總是以單引號 作為定界符。例如 a example string 3.變數替換中的變數只允許用 變數名 的形式。例如 greeting hello n...

php 編碼規範哪些 PHP編碼規範

很多初學者對編碼規範不以為然,認為對程式開發沒有什麼幫助,甚至因為要遵循規範而影響了學習和開發的進度。或者因為經過一段時間的使用,已經形成了自己的一套風格,所以不願意去改變。這種想法是很危險的。如今的 web 開發,不再是乙個人就可以全部完成的,尤其是一些大型的專案,往往需要十幾人,甚至幾十人來共同...

php 編碼規範哪些 PHP 編碼規範

這是給小組制定的php編碼規範 該 php 編碼規範基本上是同 psr 規範的。有一部分的編碼規範 psr 中是建議,此編碼規範會強制要求。此編碼規範 是以 psr 1 psr 2 psr 2擴充套件 為藍本,並增加了相應的細節說明。通則基本編碼 php 必須使用 長標籤 或 短輸出標籤 一定不可使...