Skip to content

Dev.Coding Standard CSS.zh_cn

Jump to bottom Edit New page
nothing edited this page Feb 27, 2014 · 11 revisions

首要css规范

  1. 所有pi引擎的css代码命名必须以pi-为前缀。
  2. 所有模块的css代码命名必须以模块名命名，如：article-。
  3. 所有跟js有关的css类名使用js-what-action方式,如： js-module-update。

注意

  1. 详情见Google HTML/CSS Coding Standard

编码规范

  1. 从内嵌资源中删掉协议
.example {
  background: url(//www.google.com/images/example);
}
  1. tab设定为2个空格 （由于大部分前端框架的代码都使用的2个空格）
.example {
  color: blue;
}
  1. 全部使用小写
color: #e5e5e5;
  1. 文件编码使用UTF-8 (no BOM).
  2. 0后面不能带单位
margin: 0;
  1. 省略属性值中的 0 前缀;例如
font-size: .8em;
  1. 每一个声明后面都要加; 
.test {
  display: block;
  height: 100px;
}
  1. 属性和值之间要有1个空格
color: #333;
  1. 声明单个区块：最后一个选择器与{之间有一个空格。
.block  {
  margin-bottom: 10px;
}
  1. 声明多个
h1,
h2,
h3 {
  font-weight: normal;
  line-height: 1.2;
}
  1. 颜色要简写
.black {
  color: #000;
}
  1. 层级使用- 
.block {
}

.block-header {
}
  1. 每个规则都另起一行
html {
  background: #fff;
}

body {
  margin: auto;
  width: 50%;
}
  1. 中文特殊字体,通过英文、unicode 这种形式来表达中文字体，禁止出现中文！
font-family: '\5FAE\8F6F\96C5\9ED1', 'Microsoft Yahei';

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

  1. hacks,避免css hack ， 考虑使用特定浏览器前缀表示
//html
<!--[if lt IE 7 ]> <html class="ie6"> <![endif]-->
<!--[if IE 7 ]>    <html class="ie7"> <![endif]-->
<!--[if IE 8 ]>    <html class="ie8"> <![endif]-->
<!--[if IE 9 ]>    <html class="ie9"> <![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--> <html lang=""> <!--<![endif]-->

.ie7 .xx {
}

.ie8 .xx {
}

css 命名规范

  1. 通用命名规范
    • 所有基于脚本的选择器都使用js-what-action为前缀。(css文件中不能出现这个前缀的类名)
.js-module-add         //add action 
.js-module-delete      //delete action
.js-module-update      //update action
.js-module-search      //search action 
.js-module-cancel      //cancel btn
.js-module-save        //save btn
.js-module-edit        //edit btn
.js-module-submit      //submit btn
  1. 主题
/* Base */
body { 
}

h1,
h2 {
}

p {
}

/* Layout */
.span1 {
}

/* Header */
.header {
}

.user-link {
}

/* Navigation */
.nav {
}

/* Zone */
.pi-zone-1 {
}

.pi-zone-2 {
}

/* Footer */
.footer {
}

/* ellipsis */
.pi-ellipsis {
  overflow: hidden;
  display: block;
  line-height: 1.5;
}

.pi-ellipsis-1 {
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pi-ellipsis-2 {
  max-height: 3em;
}

.pi-ellipsis-3 {
  max-height: 4.5em;
}

.pi-ellipsis-4 {
  max-height: 6em;
}

/* list or order list */
.pi-list {
}

.pi-order-list {
}

/* Bootstrap custom */
/* Article module custom */
/* Widget module custom */
...

说明：

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

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

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

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

  5. 模块 说明：

  6. 模块内容的样式，也尽量用主题通用样式去完成。

  7. 对于模块的区块的样式尽量通过主题的通用样式去实现，如果区块较复杂，可通过主题去定制模块区块的样式。

文件划分及命名规范

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

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

hiii 2

Add a custom sidebar
Clone this wiki locally