Dev.Coding Standard CSS.zh_cn

首要css规范

1. 所有pi引擎的css代码命名必须以pi-为前缀。
2. 所有模块的css代码命名必须以模块名命名，如：article-。
3. 所有跟js有关的css类名使用pi-js-或者{module name}-js-为前缀。

注意

1. 详情见Google HTML/CSS Coding Standard

编码规范

1. 从内嵌资源中删掉协议

.example {
    background: url(//www.google.com/images/example);
}

2. tab设定为4个空格

.example {
    color: blue;
}

3. 全部使用小写

color: #e5e5e5;

4. 文件编码使用UTF-8 (no BOM).
5. 0后面不能带单位

margin: 0;

6. 每一个声明后面都要加;

.test {
    display: block;
    height: 100px;
}

7. 属性和值之间要有1个空格

color: #333;

8. 声明单个区块：最后一个选择器与{之间有一个空格。

.block  {
    margin-bottom: 10px;
}

9. 声明多个

h1,
h2,
h3 {
    font-weight: normal;
    line-height: 1.2;
}

10. 颜色要简写

.black {
    color: #000;
}

11. 层级使用-

.block {
}

.block-header {
}

12. 每个规则都另起一行

html {
    background: #fff;
}

body {
    margin: auto;
    width: 50%;
}

13. 中文特殊字体,通过英文、unicode 这种形式来表达中文字体，禁止出现中文！

font-family: '\5FAE\8F6F\96C5\9ED1', 'Microsoft Yahei';

unicode计算方法：使用chrome或firefox调试插件，直接在console控制台中输入 escape('宋体')，可返回一串字符串："%u5B8B%u4F53" 将其改写为 “\5B8B\4F53″ ，这就是宋体的 Unicode 编码 啦。

css 命名规范

1. 通用命名规范
   • 所有基于脚本的选择器都使用{module name}-js-为前缀。(css文件中不能出现这个前缀的类名)

.system-js-add         //add action 
.system-js-delete      //delete action
.system-js-update      //update action
.system-js-search      //search action 
.system-js-cancel      //cancel btn
.system-js-save        //save btn
.system-js-edit        //edit btn
.system-js-submit      //submit btn

2. 主题

/* Base */
body { 
}

h1,
h2 {
}

p {
}
....
/* Common */
.gutter {
    margin: 0 10px;
}
...
/* Layout */
.span1 {
}
...
/* Header */
.header {
}

.user-link {
}
...
/* Navigation */
.nav {
}
...
/* Zone */
.pi-zone-1 {
}

.pi-zone-2 {
}
...
/* Block */
.block {
}
...
/* Footer */
.footer {
}
/* Components */
.list {
}
...
/* Article module custom */
/* Widget module custom */
...

说明：

1. 一个主题一般就包括以上部分，将相应部分的css写在相应的部分。

2. 对于主题定制模块的样式也可以写在{theme name}/module/asset/css/文件夹下。

3. Base主要包含一些html标签重置样式。

4. Common样式主要包含列表，按钮，表单，提示信息等样式。

5. 模块

/* Common */;
.article-mb {
    margin-bottom: 5px;
}

.article-mb-large {
    margin-bottom: 10px;
}

.article-hr {
    height: 0;
    border-top: 1px dashed #d5d5d5;
}
...
/* List page */;
.article-list-item {
}

.article-list-title {
}

.article-list-posttime { 
}
...
/* Detail page */;
.article-detail-title {
}

.article-detail-p {
}
... 
/* Classify page */
.article-classify-item {
}

.article-classify-posttime {
}
/* Search page */
.article-search-item {
}

.article-search-title {
}

.article-search-time {
}
//以上命名规范参照这个形式
.{module name}-{page name}-{what} {
}

说明：

1. 模块的css主要包括通用的css，页面级的css。
2. 模块的css命名都以{module name}为前缀。
3. 对于模块的区块的样式尽量通过主题的通用样式去实现，如果区块较复杂，可通过主题去定制模块区块的样式。

文件划分及命名规范

1. 主题：主题的css一般就一个文件style.css，如果需要定制后台主题，则需再添加一个admin.css文件。

2. 模块：开发模块的时候分为前后台，前台的样式文件名字取为front.css，后台一般使用bootstrap就能完成任务，如果需要定制样式，取名叫admin.css