這個(gè)CSS風(fēng)格指南是在GitHub內(nèi)部用于應(yīng)用程序的指南。我們鼓勵(lì)您建立一個(gè)適合你自己團(tuán)隊(duì)的風(fēng)格指南。在你閱讀這個(gè)之前，你需要大致了解SCSS語(yǔ)法和KSS文檔。雖然我們通過(guò)KSS文檔把風(fēng)格移植到了SCSS上，但請(qǐng)務(wù)必立刻升級(jí)整個(gè)元素的CSS。不要混合少量SCSS和無(wú)格式的CSS。

編碼風(fēng)格：

1.用兩個(gè)空格的“soft-tabs”來(lái)縮進(jìn)
2.在屬性聲明的“：”后加上空格
3.在規(guī)則聲明后的“{”前加上空格
4.使用十六進(jìn)制顏色代碼#000,如果不使用RGBA
5.使用//來(lái)做注釋塊（而不是/**/）
6.文檔風(fēng)格與KSS相同
7.這里有個(gè)好的語(yǔ)法示例：

SCSS 風(fēng)格：

任何會(huì)在多個(gè)文件中使用的$variable 或者 @mixin應(yīng)該放在globals/下。其他的應(yīng)該放在使用它的文件的頂部。
作為一個(gè)經(jīng)驗(yàn)法則，不要使用超過(guò)3層的嵌套。如果你發(fā)現(xiàn)你將要使用超過(guò)三層，想想重新組織你的規(guī)則。
文件組織：

一般來(lái)說(shuō)，CSS文件組織應(yīng)該想下面這樣：

styles
├── components
│   ├── comments.scss
│   └── listings.scss
├── globals
│   ├── browser_helpers.scss
│   ├── responsive_helpers.scss
│   ├── variables.scss
├── plugins
│   ├── jquery.fancybox-1.3.4.css
│   └── reset.scss
├── sections
│   ├── issues.scss
│   ├── profile.scss
└── shared
    ├── forms.scss
    └── markdown.scss
使用Spockets來(lái)獲取文件。但是，你應(yīng)該明確地導(dǎo)入任何在特定的SCSS文件中不會(huì)產(chǎn)生樣式（globals/）的SCSS。下面是個(gè)好的例子：

Pixels vs. Ems:
在font-size上使用px,因?yàn)樗峁┝嗽谖淖稚系慕^對(duì)控制。此外，更傾向于使用無(wú)單位的line-height，因?yàn)樗粫?huì)繼承父元素的百分比值，而是基于字體大小的倍數(shù)。

Class的命名慣例：
不要在css文件中引用js-前綴的類(lèi)名。js-只由js文件使用。在css和js共享的狀態(tài)規(guī)則使用is-前綴。

特異性（classes vs. ids）:
在頁(yè)面中確定出現(xiàn)一次的元素應(yīng)該使用IDs.否則使用Class.在不確定時(shí)使用Class。

1.應(yīng)該使用ID的：header,footer,彈窗
2.不應(yīng)該使用ID的：導(dǎo)航，列表元素等
當(dāng)在給一個(gè)組件加樣式的時(shí)候，從元素+類(lèi)名（更傾向于類(lèi)名）開(kāi)始，在默認(rèn)情況下更傾向于使用直接后代選擇器（>）。用盡可能少的特殊的。下面是個(gè)例子：

CSS特異性指南：

如果你必須使用一個(gè)id選擇器，確保在你的規(guī)則聲明中只有一個(gè)。像#header .search #quicksearch { … }這樣的被認(rèn)為是不好的。
當(dāng)在修改一個(gè)現(xiàn)有元素來(lái)特殊使用，試著使用類(lèi)名。使用.listings-layout.listings-bigger而不是.listings-layout.bigger。想想ack/grep在你未來(lái)的代碼中。
像disabled, mousedown, danger, hover, selected,active這些類(lèi)名應(yīng)該有一個(gè)類(lèi)作為命名空間（button.selected是個(gè)好的例子）
實(shí)驗(yàn)性功能：
我們想要內(nèi)部使用和實(shí)驗(yàn)性功能。在編寫(xiě)css的時(shí)候需要一些紀(jì)律因?yàn)楝F(xiàn)有的功能和實(shí)驗(yàn)性功能的css將會(huì)被同時(shí)提供。始終牢記這些目標(biāo)：

1.給新功能寫(xiě)樣式的時(shí)候不要影響已有功能的樣式
2.當(dāng)實(shí)驗(yàn)性功能不工作的時(shí)候可以很容易的移除
3.當(dāng)新功能上線的時(shí)候可以很容易移除舊的功能的css
4.在開(kāi)發(fā)beta或?qū)嶒?yàn)性功能時(shí)，用-experimental變量替換根命名空間和棄用現(xiàn)有根節(jié)點(diǎn)。一般來(lái)說(shuō)，最好重復(fù)樣式實(shí)驗(yàn)塊而不是試圖和擴(kuò)展現(xiàn)有的樣式。

一個(gè)現(xiàn)有功能的：

在這里查看完整的版本：https://github.com/styleguide/css

最新評(píng)論