Web前端規範文件-騰訊AlloyTeam
阿新 • • 發佈:2019-01-29
CSS
語法
- 使用四個空格的 soft tabs — 這是保證程式碼在各種環境下顯示一致的唯一方式。
- 使用組合選擇器時,保持每個獨立的選擇器佔用一行。
- 為了程式碼的易讀性,在每個宣告的左括號前增加一個空格。
- 宣告塊的右括號應該另起一行。
- 每條宣告 : 後應該插入一個空格。
- 每條宣告應該只佔用一行來保證錯誤報告更加準確。
- 所有宣告應該以分號結尾。雖然最後一條聲明後的分號是可選的,但是如果沒有他,你的程式碼會更容易出錯。
- 逗號分隔的取值,都應該在逗號之後增加一個空格。比如說box-shadow
- 不要在顏色值 rgb() rgba() hsl() hsla()和 rect() 中增加空格,並且不要帶有取值前面不必要的 0 (比如,使用 .5 替代 0.5)。This helps differentiate multiple color values (comma, no space) from multiple property values (comma with space).
- 所有的十六進位制值都應該使用小寫字母,例如 #fff。因為小寫字母有更多樣的外形,在瀏覽文件時,他們能夠更輕鬆的被區分開來。
- 儘可能使用短的十六進位制數值,例如使用 #fff 替代 #ffffff。
- 為選擇器中的屬性取值新增引號,例如 input[type=”text”]。 他們只在某些情況下可有可無,所以都使用引號可以增加一致性。
- 不要為 0 指明單位,比如使用 margin: 0; 而不是 margin: 0px;。
對這裡提到的規則有問題嗎?參考 Wikipedia 中的 CSS 語法部分。
/* Bad CSS */
.selector, .selector-secondary, .selector [type=text] {
padding: 15px;
margin: 0px 0px 15px;
background-color: rgba(0, 0, 0, 0.5);
box-shadow: 0 1px 2px #CCC, inset 0 1px 0 #FFFFFF
}
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
padding: 15px;
margin-bottom: 15px;
background-color: rgba(0,0,0,.5);
box-shadow : 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
宣告順序
相關的屬性宣告應該以下面的順序分組處理:
- Positioning
- Box model 盒模型
- Typographic 排版
- Visual 外觀
Positioning 處在第一位,因為他可以使一個元素脫離正常文字流,並且覆蓋盒模型相關的樣式。盒模型緊跟其後,因為他決定了一個元件的大小和位置。
其他屬性只在元件 內部 起作用或者不會對前面兩種情況的結果產生影響,所以他們排在後面。
關於完整的屬性以及他們的順序,請參考 Recess。
.declaration-order {
/* Positioning */
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 100;
/* Box-model */
display: block;
float: right;
width: 100px;
height: 100px;
/* Typography */
font: normal 13px "Helvetica Neue", sans-serif;
line-height: 1.5;
color: #333;
text-align: center;
/* Visual */
background-color: #f5f5f5;
border: 1px solid #e5e5e5;
border-radius: 3px;
/* Misc */
opacity: 1;
}
// 為了方便查閱, 我把Recess的order貼了一份過來, 引入時間2014-05-05
// css property order
var order = [
'position'
, 'top'
, 'right'
, 'bottom'
, 'left'
, 'z-index'
, 'display'
, 'float'
, 'width'
, 'height'
, 'max-width'
, 'max-height'
, 'min-width'
, 'min-height'
, 'padding'
, 'padding-top'
, 'padding-right'
, 'padding-bottom'
, 'padding-left'
, 'margin'
, 'margin-top'
, 'margin-right'
, 'margin-bottom'
, 'margin-left'
, 'margin-collapse'
, 'margin-top-collapse'
, 'margin-right-collapse'
, 'margin-bottom-collapse'
, 'margin-left-collapse'
, 'overflow'
, 'overflow-x'
, 'overflow-y'
, 'clip'
, 'clear'
, 'font'
, 'font-family'
, 'font-size'
, 'font-smoothing'
, 'osx-font-smoothing'
, 'font-style'
, 'font-weight'
, 'hyphens'
, 'src'
, 'line-height'
, 'letter-spacing'
, 'word-spacing'
, 'color'
, 'text-align'
, 'text-decoration'
, 'text-indent'
, 'text-overflow'
, 'text-rendering'
, 'text-size-adjust'
, 'text-shadow'
, 'text-transform'
, 'word-break'
, 'word-wrap'
, 'white-space'
, 'vertical-align'
, 'list-style'
, 'list-style-type'
, 'list-style-position'
, 'list-style-image'
, 'pointer-events'
, 'cursor'
, 'background'
, 'background-attachment'
, 'background-color'
, 'background-image'
, 'background-position'
, 'background-repeat'
, 'background-size'
, 'border'
, 'border-collapse'
, 'border-top'
, 'border-right'
, 'border-bottom'
, 'border-left'
, 'border-color'
, 'border-image'
, 'border-top-color'
, 'border-right-color'
, 'border-bottom-color'
, 'border-left-color'
, 'border-spacing'
, 'border-style'
, 'border-top-style'
, 'border-right-style'
, 'border-bottom-style'
, 'border-left-style'
, 'border-width'
, 'border-top-width'
, 'border-right-width'
, 'border-bottom-width'
, 'border-left-width'
, 'border-radius'
, 'border-top-right-radius'
, 'border-bottom-right-radius'
, 'border-bottom-left-radius'
, 'border-top-left-radius'
, 'border-radius-topright'
, 'border-radius-bottomright'
, 'border-radius-bottomleft'
, 'border-radius-topleft'
, 'content'
, 'quotes'
, 'outline'
, 'outline-offset'
, 'opacity'
, 'filter'
, 'visibility'
, 'size'
, 'zoom'
, 'transform'
, 'box-align'
, 'box-flex'
, 'box-orient'
, 'box-pack'
, 'box-shadow'
, 'box-sizing'
, 'table-layout'
, 'animation'
, 'animation-delay'
, 'animation-duration'
, 'animation-iteration-count'
, 'animation-name'
, 'animation-play-state'
, 'animation-timing-function'
, 'animation-fill-mode'
, 'transition'
, 'transition-delay'
, 'transition-duration'
, 'transition-property'
, 'transition-timing-function'
, 'background-clip'
, 'backface-visibility'
, 'resize'
, 'appearance'
, 'user-select'
, 'interpolation-mode'
, 'direction'
, 'marks'
, 'page'
, 'set-link-source'
, 'unicode-bidi'
, 'speak'
]