一、代码风格
- 采用UTF-8编码，在CSS头部引用 @charset "utf-8";
- 使用4个空格作为一个缩进层级，不允许使用2个空格或tab字符
- 每行不得超过120个字符，除非单行不可分割
- 选择器嵌套层级不大于3级，位置靠后的限定条件应尽可能精确。
- 尽量不要使用@import，与<links>相比，@import速度较慢，增加了额外的页面请求，并可能导致其他无法预料的问题。
- Media Query不得单独编排，必须与相关的规则一起定义。
二、样式属性顺序
- 布局位置（position，top，right，z-index，display，float等）
- 尺寸大小（宽度，高度，填充，边距）
- 文字系列（字体，行高，字母间距，颜色文字对齐等）
- 视觉效果（background，border等）
- 其他（动画，转换等）
三，缩写属性和属性值
- CSS有些属性是可以缩写的，比如填充，边缘，字体，背景，边框等等。缩写代码可以提高用户的阅读体验
- 当数值为小数时，小数点前面的“0”可以去除
- “0像素”后面的单位可以去除
- 16进制的颜色代码重叠的字符可以缩写的尽量缩写
四，规则声明块样式规范
- 当规则声明块中有多个样式声明时，每条样式独占一行。
- 列表属性并排书写时，用逗号分隔，逗号后必须跟一个空格 3 . 选择器与左大括号 {之间必须加一个空格
- 属性名与冒号之间不允许包含空格，冒号与属性值之间必须包含空格
- 在每条样式后面都以分号; 结尾。
- 规则声明块的右大括号} 独占一行。
- 所有最外层引号使用单引号 ' ' 。
- 当一个属性有多个属性值时，以逗号, 分隔属性值，每个逗号后添加一个空格，当单个属性值过长时，每个属性值独占一行。
- 每个规则声明间用空行分隔。
五，命名规范
-
一律小写
-
尽量用英文
-
命名短且语义化要好
-
名字长的单词可以选择使用烤串命名法，中间加横线来为选择器命名
- 布局：以g 为命名空间，例如：.g-wrap . .g-header. .g-content。
- 状态：以s 为命名空间，表示动态的. 具有交互性质的状态，例如：.s-current. s-selected。
- 工具：以u 为命名空间，表示不耦合业务逻辑的. 可复用的的工具，例如：u-clearfix. u-ellipsis。
- 组件：以m 为命名空间，表示可复用. 移植的组件模块，例如：m-slider. m-dropMenu。
- 钩子：以j 为命名空间，表示特定给JavaScript 调用的类名，例如：j-request. j-open。
-
不建议使用下划线来命名，存在浏览器兼容性问题，其次是JavaScript的变量命名也是用下划线，容易造成混淆。
-
不要滥用id标识，id在JS中是唯一的，不能多次使用，应该按需使用
-
统一语义理解和命名（如表所示）</links>
| 语义 | 命名 | 简写 |
|---|---|---|
| 布局（.g-） | ||
| 文档 | doc | doc |
| 头部 | head | hd |
| 主体 | body | bd |
| 尾部 | foot | ft |
| 主栏 | main | mn |
| 主栏子容器 | mainc | mnc |
| 侧栏 | side | sd |
| 侧栏子容器 | sidec | sdc |
| 盒容器 | wrap/box | wrap/box |
| 模块（.m-）、元件（.u-） | ||
| 语义 | 命名 | 简写 |
| 导航 | nav | nav |
| 子导航 | subnav | snav |
| 面包屑 | crumb | crm |
| 菜单 | menu | menu |
| 选项卡 | tab | tab |
| 标题区 | head/title | hd/tt |
| 内容区 | body/content | bd/ct |
| 列表 | list | lst |
| 表格 | table | tb |
| 表单 | form | fm |
| 热点 | hot | hot |
| 排行 | top | top |
| 登录 | login | log |
| 标志 | logo | logo |
| 广告 | advertise | ad |
| 搜索 | search | sch |
| 幻灯 | slide | sld |
| 提示 | tips | tips |
| 帮助 | help | help |
| 新闻 | news | news |
| 下载 | download | dld |
| 注册 | regist | reg |
| 投票 | vote | vote |
| 版权 | copyright | cprt |
| 结果 | result | rst |
| 标题 | title | tt |
| 按钮 | button | btn |
| 输入 | input | ipt |
| 功能（.f-） | ||
| 语义 | 命名 | 简写 |
| 浮动清除 | clearboth | cb |
| 向左浮动 | floatleft | fl |
| 向右浮动 | floatright | fr |
| 内联块级 | inlineblock | ib |
| 文本居中 | textaligncenter | tac |
| 文本居右 | textalignright | tar |
| 文本居左 | textalignleft | tal |
| 垂直居中 | verticalalignmiddle | vam |
| 溢出隐藏 | overflowhidden | oh |
| 完全消失 | displaynone | dn |
| 字体大小 | fontsize | fs |
| 字体粗细 | fontweight | fw |
| 皮肤（.s-） | ||
| 语义 | 命名 | 简写 |
| 字体颜色 | fontcolor | fc |
| 背景 | background | bg |
| 背景颜色 | backgroundcolor | bgc |
| 背景图片 | backgroundimage | bgi |
| 背景定位 | backgroundposition | bgp |
| 边框颜色 | bordercolor | bdc |
| 状态（.z-） | ||
| 语义 | 命名 | 简写 |
| 选中 | selected | sel |
| 当前 | current | crt |
| 显示 | show | show |
| 隐藏 | hide | hide |
| 打开 | open | open |
| 关闭 | close | close |
| 出错 | error | err |
| 不可用 | disabled | dis |
348
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
