这个CSS风格指南是在GitHub内部用于应用程序的指南。我们鼓励您建立一个适合你自己团队的风格指南。在你阅读这个之前，你需要大致了解SCSS语法和KSS文档。虽然我们通过KSS文档把风格移植到了SCSS上，但请务必立刻升级整个元素的CSS。不要混合少量SCSS和无格式的CSS。

编码风格：

1.用两个空格的“soft-tabs”来缩进2.在属性声明的“：”后加上空格3.在规则声明后的“{”前加上空格4.使用十六进制颜色代码#000,如果不使用RGBA5.使用//来做注释块（而不是/**/）6.文档风格与KSS相同7.这里有个好的语法示例：

1. //Thisisagoodexample!
2. .styleguide-format{
3. border:1pxsolid#0f0;
4. color:#000;
5. background:rgba(0,0,0,0.5);
6. }

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。下面是个好的例子：

1. //=require_tree./plugins
2. //=requiremy_awesome_styles
4. @import"../globals/basic";
6. .rule{...}

Pixels vs. Ems:在font-size上使用px,因为它提供了在文字上的绝对控制。此外，更倾向于使用无单位的line-height，因为它不会继承父元素的百分比值，而是基于字体大小的倍数。

Class的命名惯例：不要在css文件中引用js-前缀的类名。js-只由js文件使用。在css和js共享的状态规则使用is-前缀。

特异性（classes vs. ids）:在页面中确定出现一次的元素应该使用IDs.否则使用Class.在不确定时使用Class。

1.应该使用ID的：header,footer,弹窗2.不应该使用ID的：导航，列表元素等当在给一个组件加样式的时候，从元素+类名（更倾向于类名）开始，在默认情况下更倾向于使用直接后代选择器（>）。用尽可能少的特殊的。下面是个例子：

1. <ulclass="category-list">
2. <liclass="item">Category1li>
3. <liclass="item">Category2li>
4. <liclass="item">Category3li>
5. ul>

1. ul.category-list{//element+classnamespace
3. &>li{//directdescendantselector>forlistitems
4. list-style-type:disc;
5. }
7. a{//minimalspecificityforalllinks
8. color:#ff0000;
9. }
10. }

CSS特异性指南：

如果你必须使用一个id选择器，确保在你的规则声明中只有一个。像#header .search #quicksearch { … }这样的被认为是不好的。当在修改一个现有元素来特殊使用，试着使用类名。使用.listings-layout.listings-bigger而不是.listings-layout.bigger。想想ack/grep在你未来的代码中。像disabled, mousedown, danger, hover, selected,active这些类名应该有一个类作为命名空间（button.selected是个好的例子）实验性功能：我们想要内部使用和实验性功能。在编写css的时候需要一些纪律因为现有的功能和实验性功能的css将会被同时提供。始终牢记这些目标：

1.给新功能写样式的时候不要影响已有功能的样式2.当实验性功能不工作的时候可以很容易的移除3.当新功能上线的时候可以很容易移除旧的功能的css4.在开发beta或实验性功能时，用-experimental变量替换根命名空间和弃用现有根节点。一般来说，最好重复样式实验块而不是试图和扩展现有的样式。

一个现有功能的：

1. <divclass="notifications">
2. <ulclass="navigation">
3. <li><ahref="#">Notificationsa>li>
4. <li><ahref="#">Messagesa>li>
5. ul>
6. <divclass="notifications-listing">
7. <ahref="#">dragoncommentedonIssue#551a>
8. <ahref="#">mojombocommentedonIssue#91a>
9. <ahref="#">defunktuploadedanewfiletodefunkt/resquea>
10. div>
11. div>

1. //Deprecated:Existingnotifications+messagesdesign.Toberemovedwhen
2. //notifications-nextships.
3. //
4. //Styleguide4.5.1
5. .notifications{
6. ul.navigation{
7. float:left;
8. width:200px;
9. background:#eee;
10. }
12. .notification-listing{
13. &>a{
14. display:block;
15. font-weight:bold;
16. }
17. }
18. }

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