CSS编码规范

[spemoon]

这里考虑主要适用sass/scss来组织代码规范，后期考虑用KSS来做整个项目的CSS文档。

代码编写风格

• 代码缩进——四个空格
• :号后面空两个空格
• {号前面空一个空格
• 适用十六进制颜色编码#000，除非要用到rgba
• 注释用//

// This is a good example!
.styleguide-format {
    border: 1px solid #0f0;
    color: #000;
    background: rgba(0,0,0,0.5);
}

SCSS代码组织风格

===
如果变量$variable或者函数@mixin被用在多个地方，尽量将其放置在globals/目录底下。其他的业务逻辑放在根目录底下。

一般目录结构不超过三级。

文件目录

styles
├── components
│   ├── comments.scss
│   └── listings.scss
├── globals
│   ├── reset.scss
│   ├── browser_helpers.scss
│   ├── responsive_helpers.scss
│   ├── variables.scss
│   ├── btn.scss
├── plugins
│   ├── jquery.fancybox-1.3.4.scss
├── sections
│   ├── issues.scss
│   └── profile.scss
└── index.scss

引入的话直接利用scss的@import。（这里要不要用Sprockets待定，因为不懂Sprockets这个主要起啥作用）

@import "./globals/basic";

.rule { ... }

Pixels vs. Ems

待补充

class命名规范

主要是跟js的配合问题。这里先将class的层次定为用中划线连接(如.list-item),id的层次定为用下划线连接(如#list_item)

组件前面带上.widget- , 如dialog组件，样式可定义为(.widget-dialog)

待续。。。

[balaixianren]

js变量命名可以采取“数据类型+驼峰命名法”，如字符串abc命名可以为：var sFirstString = "abc";

[spemoon]

嗯，js这边是这样。主要是说CSS的class跟id命名统一一下，因为id主要是跟js来交互用的，css基本上很少用的id，所以是想要将class的层级用中划线，id统一用下划线连接这样。

[balaixianren]

是的，我目前css都没用id。单词间都用下划线