java66liu / css-coding-standards Goto Github PK

#关 于

为提高页面代码质量、工作效率以及网站后期的可维护性，改善用户体验，充分发挥团队协作的潜能，而制定以下CSS规范，希望能通过此规范的制作，使网站前端工作从效果图设计到静态页制作逐步走向产品化、模块化的专业制作体系，也使网站更好的发挥兼容性，以增强各种浏览器的用户体验，提高页面代码的可读性。更好的配合程序开发，从而节约一定的网站开发时间。

##目录

• CSS结构
• CSS文件命名
• CSS书写要求
• CSS样式命名

每个页面必须加载，对页主要是对浏览器的一些默认样式进行CSS Reset。

各种模型库，主要定义各种通用样式，如几种不同尺寸的头像、页面、等常用模型，每个前端都可以根据需求进行添加新的模块，但必须告知所有前端，确认以后方可添加，原则上不进行删除模块操作，为了方便之间模块化和提高弹性，正常情况下，为避免外边界冲突，组件不设置外边界。

每个页面有一个或每个专题共用一个，定义当前页面独立的样式，一个page.css通常一个人维护，如果多人维护，需要添加注释。

CSS文件命名要求尽量使用相对应的专题/功能的英文名称，如 个人网盘页面的css可以命名为 netdisk.css

  .selector { property:value;property:value; }

  .selector1,
  .selector2,
  .selector3 { property:value;property:value; }

  -webkit-border-radius:4px;-moz-border-radius:4px;border-radius: 4px;

注释的格式:
  /* mod: doulist S*/
  ……
  /* mod: doulist E*/

  div { ... } /*不要使用*/

  <div style="margin-bottom:30px;"> <!--不要使用-->

  body > * {...}    /*不要使用*/
  ul > li > a {...}   /*不要使用*/
  #footer > h3 {...}    /*不要使用*/
  ul#top_blue_nav {...}   /*不要使用*/

如需用到推荐使用下面的：

IE6 : _property:value

IE6/7 : *property:value

IE6/7/8/9 : property:value\9

not IE6 : property//:value

.title (标题)

.sidebar (边栏)

.search （搜索）

非共用模块的css请加当前页面的名字或缩写以免冲突，如好友页面：

.friend_top （好友页面的头部部分）

.friend_search （好友页面的搜索部分）

.friend_l_title

如left可写成l，right可写成r，big可写成b等等。

.container 容器

.header 页头部分

.nav 导航

.subNav 二级导航

.menu 菜单

.submenu 子菜单

.main 页面主体

.column 栏目

.title 标题

.content 内容部分

.footer 页脚部分

.icon 小图标

.tag 标签

.tab 选项卡

.list 文章列表

.note 注释

.hot 热点

.download 下载

.msg或 .message 提示信息

.tips 小技巧

.vote 投票

.friendlink 友情连接

.summary 摘要

.search 搜索

.btn 按钮

.copyright 版权信息

.branding 商标

.brandingLogo LOGO

.banner 广告

.siteinfo 网站信息

.siteinfoLegal 法律声明

.siteinfoCredits 信誉

.joinus 加入我们

.partner 合作伙伴

.service 服务

.regsiter 注册

.login 登陆

.status 状态

全拼 缩写 说明

left l 左边

right r 右边

center c 中间

big b 大的

small s 小的