這個CSS風格指南是在GitHub內(nèi)部用于應用程序的指南。我們鼓勵您建立一個適合你自己團隊的風格指南。在你閱讀這個之前,你需要大致了解SCSS語法和KSS文檔。雖然我們通過KSS文檔把風格移植到了SCSS上,但請務(wù)必立刻升級整個元素的CSS。不要混合少量SCSS和無格式的CSS。
編碼風格:
1.用兩個空格的“soft-tabs”來縮進
2.在屬性聲明的“:”后加上空格
3.在規(guī)則聲明后的“{”前加上空格
4.使用十六進制顏色代碼#000,如果不使用RGBA
5.使用//來做注釋塊(而不是/**/)
6.文檔風格與KSS相同
7.這里有個好的語法示例:
SCSS 風格:
任何會在多個文件中使用的$variable 或者 @mixin應該放在globals/下。其他的應該放在使用它的文件的頂部。
作為一個經(jīng)驗法則,不要使用超過3層的嵌套。如果你發(fā)現(xiàn)你將要使用超過三層,想想重新組織你的規(guī)則。
文件組織:
一般來說,CSS文件組織應該想下面這樣:
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來獲取文件。但是,你應該明確地導入任何在特定的SCSS文件中不會產(chǎn)生樣式(globals/)的SCSS。下面是個好的例子:
Pixels vs. Ems:
在font-size上使用px,因為它提供了在文字上的絕對控制。此外,更傾向于使用無單位的line-height,因為它不會繼承父元素的百分比值,而是基于字體大小的倍數(shù)。
新聞熱點
疑難解答