這個CSS風格指南是在GitHub內部用于應用程序的指南。我們鼓勵您建立一個適合你自己團隊的風格指南。在你閱讀這個之前，你需要大致了解 SCSS 語法和 KSS 文檔。雖然我們通過KSS文檔把風格移植到了SCSS上，但請務必立刻升級整個元素的CSS。不要混合少量SCSS和無格式的CSS。

編碼風格：

• 用兩個空格的“soft-tabs”來縮進
• 在屬性聲明的“：”后加上空格
• 在規則聲明后的“{”前加上空格
• 使用十六進制顏色代碼#000,如果不使用RGBA
• 使用//來做注釋塊（而不是/**/）
• 文檔風格與KSS相同

這里有個好的語法示例：

			// This is a good example!
			.styleguide-format {
			??border: 1px solid #0f0;
			??color: #000;
			??background: rgba(0,0,0,0.5);
			}
		

SCSS 風格：

• 任何會在多個文件中使用的$variable 或者 @mixin應該放在globals/下。其他的應該放在使用它的文件的頂部。
• 作為一個經驗法則，不要使用超過3層的嵌套。如果你發現你將要使用超過三層，想想重新組織你的規則。

文件組織：

一般來說，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文件中不會產生樣式（globals/）的SCSS。下面是個好的例子：

		//= require_tree ./plugins
		//= require my_awesome_styles
		?
		@import "../globals/basic";
		?
		.rule { ... }
	

Pixels vs. Ems:
在font-size上使用px,因為它提供了在文字上的絕對控制。此外，更傾向于使用無單位的line-height，因為它不會繼承父元素的百分比值，而是基于字體大小的倍數。

Class的命名慣例：
不要在css文件中引用js-前綴的類名。js-只由js文件使用。在css和js共享的狀態規則使用is-前綴。

特異性（classes vs. ids）:
在頁面中確定出現一次的元素應該使用IDs.否則使用Class.在不確定時使用Class。

• 應該使用ID的：header,footer,彈窗
• 不應該使用ID的：導航，列表元素等

當在給一個組件加樣式的時候，從元素+類名（更傾向于類名）開始，在默認情況下更傾向于使用直接后代選擇器（>）。用盡可能少的特殊的。下面是個例子：

		<ul class="category-list">
		??<li class="item">Category 1</li>
		??<li class="item">Category 2</li>
		??<li class="item">Category 3</li>
		</ul>
	

		ul.category-list {// element + class namespace
		?
		??&>li {// direct descendant selector > for list items
		????list-style-type: disc;
		??}
		?
		??a {// minimal specificity for all links
		????color: #ff0000;
		??}
		}
	

CSS特異性指南：

• 如果你必須使用一個id選擇器，確保在你的規則聲明中只有一個。像#header .search #quicksearch { … }這樣的被認為是不好的。
• 當在修改一個現有元素來特殊使用，試著使用類名。使用.listings-layout.listings-bigger而不是.listings-layout.bigger。想想ack/grep在你未來的代碼中。
• 像 disabled ,? mousedown ,? danger ,? hover ,? selected , active這些類名應該有一個類作為命名空間（button.selected是個好的例子）

實驗性功能：
我們想要內部使用和實驗性功能。在編寫css的時候需要一些紀律因為現有的功能和實驗性功能的css將會被同時提供。始終牢記這些目標：

• 給新功能寫樣式的時候不要影響已有功能的樣式
• 當實驗性功能不工作的時候可以很容易的移除
• 當新功能上線的時候可以很容易移除舊的功能的css

在開發beta或實驗性功能時，用-experimental變量替換根命名空間和棄用現有根節點。一般來說，最好重復樣式實驗塊而不是試圖和擴展現有的樣式。

一個現有功能的：

		<div class="notifications">
		??<ul class="navigation">
		????<li><a href="#">Notifications</a></li>
		????<li><a href="#">Messages</a></li>
		??</ul>
		??<div class="notifications-listing">
		????<a href="#">dragon commented on Issue #551</a>
		????<a href="#">mojombo commented on Issue #91</a>
		????<a href="#">defunkt uploaded a new file to defunkt/resque</a>
		??</div>
		</div>
	

		// Deprecated: Existing notifications + messages design. To be removed when
		// notifications-next ships.
		//
		// Styleguide 4.5.1
		.notifications {
		??ul.navigation {
		????float: left;
		????width: 200px;
		????background: #eee;
		??}
		?
		??.notification-listing {
		????&>a {
		??????display: block;
		??????font-weight: bold;
		????}
		??}
		}
	

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

轉載自： http://hao.jobbole.com/github-css-style-guide/