来自 github styleguide 有点意思，大站就是不一样啊。

sass 和 scss 区别

• sass 用缩进
• scss 用 {}

Kss

KSS attempts to provide a methodology for writing maintainable, documented CSS within a team. Specifically, KSS is a documentation specification and styleguide format. It is not a preprocessor, CSS framework, naming convention, or specificity guideline.

kss 只是一种文档定义。不是预编译、框架等。

Coding Style 编码风格

• Use soft-tabs with a two space indent. 统一使用两个空格的缩进
• Put spaces after : in property declarations. 冒号前用空格
• Put spaces before { in rule declarations. {前用空格
• Use hex color codes #000 unless using rgba.用 #000 这样的16进制，rgba(255,255,255,.5) 例外
• Use // for comment blocks (instead of / /). 用 // 行注释 而不是 /**/ 块注释
• Document styles with KSS. 文档风格采用 kss

SCSS Style

• Any $variable or @mixin that is used in more than one file should be put in globals/. Others should be put at the top of the file where they’re used. 公用的变量和函数，放在 globals 目录。其它定义放在本文件头部。
• As a rule of thumb, don’t nest further than 3 levels deep. If you find yourself going further, think about reorganizing your rules (either the specificity needed, or the layout of the nesting).甭弄的太复杂，如三层以上的目录结构。

github 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

Pixels vs. Ems

Use px for font-size, because it offers absolute control over text. Additionally, unit-less line-height is preferred because it does not inherit a percentage value of its parent element, but instead is based on a multiplier of the font-size.

font-size 用 px,line-height 用百分比。恩，对此，我保留意见。萝卜白菜。。。

js- 前缀

class=”js-AAAA” 这样前缀只用于 js 处理。 is- 则为 css,js 公用。

id vs. class

• Good candidates for ids: header, footer, modal popups.

• Bad candidates for ids: navigation, item listings, item view pages (ex: issue view).

• header, footer 和模窗 等 唯一 的元素可用id

• 导航、列表、条目 等重复使用的元素用 class

css 规则

• If you must use an id selector (#selector) make sure that you have no more than one in your rule declaration. A rule like #header .search #quicksearch { … } is considered harmful. id 不要嵌套
• When modifying an existing element for a specific use, try to use specific class names. Instead of .listings-layout.bigger use rules like .listings-layout.listings-bigger. Think about ack/greping your code in the future. 特殊定义加前缀
• The class names disabled, mousedown, danger, hover, selected, and active should always be namespaced by a class (button.selected is a good example). 保留的这些 disabled, mousedown, danger, hover, selected, and active 甭乱用

Experimental features (staff only)

临时、测试的功能加 -experimental。成熟后查找替换之。