今天就跟大家聊聊有关GitHub倡导的CSS编写风格及文件目录是怎样的，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
编码风格：
1.用两个空格的“soft-tabs”来缩进
2.在属性声明的“：”后加上空格
3.在规则声明后的“{”前加上空格
4.使用十六进制颜色代码#000,如果不使用RGBA
5.使用//来做注释块（而不是）
6.文档风格与KSS相同
7.这里有个好的语法示例：
CSS Code复制内容到剪贴板
// 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。下面是个好的例子：
CSS Code复制内容到剪贴板
//= 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。
1.应该使用ID的：header,footer,弹窗
2.不应该使用ID的：导航，列表元素等
当在给一个组件加样式的时候，从元素+类名（更倾向于类名）开始，在默认情况下更倾向于使用直接后代选择器（>）。用尽可能少的特殊的。下面是个例子：
XML/HTML Code复制内容到剪贴板
<ul class="category-list"> <li class="item">Category 1</li> <li class="item">Category 2</li> <li class="item">Category 3</li> </ul>
CSS Code复制内容到剪贴板
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将会被同时提供。始终牢记这些目标：
1.给新功能写样式的时候不要影响已有功能的样式
2.当实验性功能不工作的时候可以很容易的移除
3.当新功能上线的时候可以很容易移除旧的功能的css
4.在开发beta或实验性功能时，用-experimental变量替换根命名空间和弃用现有根节点。一般来说，最好重复样式实验块而不是试图和扩展现有的样式。
一个现有功能的：
XML/HTML Code复制内容到剪贴板
<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>
CSS Code复制内容到剪贴板
// 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; } } }
看完上述内容，你们对GitHub倡导的CSS编写风格及文件目录是怎样的有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注编程网行业资讯频道，感谢大家的支持。
