Dev.Coding Standard CSS

Top CSS/HTML Standards

• All Pi Engine specific CSS class/ID names must be prefixed with pi-
• All module specific CSS class/ID names are highly suggested to be prefixed with module identifier, for instance article-
• All CSS class/ID names for JavaScript are highly suggested to be prefixed with pi-js- or <module>-js-

Note

• Refer to Google HTML/CSS Coding Standard for details.
• Refer to more strict practices suggested by @krisxoofoo.

Selected rules:

• Omit the protocol from embedded resources: background: url(//www.google.com/images/example); ?
• Indent by 2 spaces at a time. ?
• Remove trailing white spaces. ?
• Use functional or generic names, not presentational: #login {}, .video{}, not .button-green {}, not clear {}. ?
• Use ID/class names that are as short as possible but as long as necessary: #nav {}, .author {}, not #navigation, not .atr {}. ?
• Avoid unnecessary ancestor selectors: .error {}, not div.error {} ?
• Omit unit specification after “0” values: padding: 0;. ?
• Use namespace with Pi generic CSS and application-specific prefix: pi-header {}, .article-body {} ?
• Separate ID/class name words by a hyphen: .demo-image {} ?
• Alphabetize declarations. ?
• Use a semicolon after every declaration. ?
• Always use a single space between property and value. ?
• Separate selectors and declarations by new lines, use a space between the last selector and the declaration block. ? ?

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

• Always put a blank line (two line breaks) between rules. ?
• Use single ('') rather than double ("") quotation marks for attribute/property values. Do not use quotation marks in url(). ?
• Group style sheet sections together by using comments. Separate sections with new lines. ?

Rules considering PHP Coding Standards and other projects

• Use tabs for indentation: length of 4 spaces.
• Prefix property value with tabbed spaces in a block:

.download {
    -webkit-transition: all 700ms ease;
    -moz-transition:    all 700ms ease;
    -ms-transition:     all 700ms ease;
    o-transition:       all 700ms ease;
    transition:         all 700ms ease;
}

• Non-ASCII characters are forbidden, use encoded characters: font-family: '\5FAE\8F6F\96C5\9ED1', 'Microsoft Yahei';, not font-family: '微软雅黑', 'Microsoft Yahei';

Pi specific rules

• Framework
• Module
• ...

---

• Following text is solely for Chinese explanation and might be incomplete or inappropriate.

编码规范

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

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

2. tab设定为2个空格

.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 */
.list {
}
...
/* Layout */
.span1 {
}
...
/* Header */
.header {
}

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

.pi-zone-2 {
}
...
/* Block */
.block {
}
...
/* Footer */
.footer {
}
...
/* 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