10 09/2014

github styleguide 学习笔记

最后更新: Wed Sep 10 2014 12:29:11 GMT+0800

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

sass 和 scss 区别

  • sass 用缩进
  • scss 用 {}


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 文档结构

├── 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。成熟后查找替换之。