css程式碼規範

my同學發表於2018-06-25
CSS

css規範

  • 編碼設定：UTF-8編碼
  • 縮排：使用2個空格為一個縮排層級
  • 數值與單位：當屬性值或顏色引數為 0 - 1之間的數時，省略小數點前的 0 ，當長度值為 0 時省略單位，十六進位制的顏色屬性值使用小寫和儘量簡寫。
  • 沒有邊框時，不要寫成border:0，應該寫成border:none
  • 除了重置瀏覽器預設樣式外，禁止直接為html tag新增css樣式設定;
  • 層級(z-index)必須清晰明確，頁面彈窗、氣泡為最高階（最高階為999），不同彈窗氣泡之間可在三位數之間調整；普通區塊為10-90內10的倍數；區塊展開、彈出為當前父層級上個位增加。
  • 選擇器應該在滿足功能的基礎上儘量簡短，減少選擇器巢狀，查詢消耗。但是一定要避免覆蓋全域性樣式設定。
/* 側邊欄樣式 */
.sidebar {
    width: 1rem;
    float: left;
    border: none;
    height: .5rem;
}

.sidebar li, 
.menu-title {
    padding: 0 .2rem;
    font-size: .32rem;
    color: #1cc7b9;
    background: #fff;
}
複製程式碼

css命名規範：

  • 一律採用小寫加中劃線的方式，不允許使用大寫字母或 _;
  • 規則命名避免使用中文拼音,不允許通過1、2、3等序號進行命名,不應該包含顏色（red/blue）、定位（left/right）等與具體顯示效果相關的資訊。應該用意義命名，而不是樣式顯示結果命名。
  • 儘量不縮寫，除非一看就明白的單詞。
  • id應該按需使用，而不能濫用,id用於標識模組或頁面的某一個父容器區域，名稱必須唯一，不要隨意新建id
  • 避免class與id重名
  • 儘可能提高程式碼模組的複用，樣式儘量用組合的方式

常用命名（多記多查英文單詞）：page、wrap、layout、header(head)、footer(foot、ft)、content(cont)、menu、nav、main、submain、sidebar(side)、logo、banner、title(tit)、popo(pop)、icon、note、btn、txt、block、window(win)、tips等，如果遇到不常用的，可以藉助翻譯工具進行翻譯取其英文命名。

css書寫順序

  • 1.content 屬性（如果有的話，應放在最前面）

  • 2.位置佈局：(position / top / right / bottom / left / z-index / display / float / ...)

  • 3.盒模型：(width / height / padding / margin / border / overflow / ...)

  • 4.文字排版：(font / line-height / text-align / word-wrap / ...)

  • 5.視覺外觀屬性：(color / background / list-style / transform / animation / transition / ...)

  • 如果使用CSS3的屬性，並有必要加入瀏覽器字首，則按照 -webkit- / -moz- / -ms- / -o- / std的順序進行新增，標準屬性寫在最後。

  • 連結的樣式請嚴格按照如下順序新增： a:link -> a:visited -> a:hover -> a:active

空格空行使用規範：

  • 在規則宣告塊的左大括號 { 前加一個空格。
  • +、>、~ 等選擇器的兩邊各保留一個空格
  • 在樣式屬性的冒號 : 後面加上一個空格，前面不加空格。
  • 規則宣告塊的右大括號 } 獨佔一行。
  • 每個規則宣告間用空行分隔。
  • 所有最外層引號使用雙引號 " 。
  • 多個selector共用一個樣式集，則多個selector必須寫成多行形式 ；

程式碼註釋

程式碼註釋，寫在需要註釋部分的前面

單行註釋

星號與內容之間必須保留一個空格。

/* 單行註釋：星號與內容之間必須保留一個空格 */
複製程式碼

多行註釋

星號要一列對齊，星號與內容之間必須保留一個空格。

/**
 * 多行註釋：星號要一列對齊，星號與內容之間必須保留一個空格。
 */
複製程式碼

規則宣告塊內註釋

使用 // 註釋，// 後面加上一個空格，註釋獨立一行,寫在需要註釋部分的前面

.foo{
	border: 0;
	// 註釋獨立一行: 背景色設定
	background-color: #fff;
}
複製程式碼

相關文章