Github 的 CSS 风格指南 – WEB前端开发

这个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/