前端CSS样式规范初稿.docVIP

HOUSE365 前端 CSS 规范初稿 2011/0531 一 CSS命名规范 页面制作最重要的就是CSS，定义合理的CSS命名规范，可以大幅提高页面制作的效率和方便开发及相关人员修改编写。关于CSS的命名我们采用骆驼式命名法。 骆驼式命名法： 正如它的名称所表示的那样，是指混合使用大小写字母来构成变量和函数的名字,即函数名中的每一个逻辑断点都有一个大写字母来标记.骆驼式命名法近年来越来越流行了。例如：mianNav footNav 1.通用命名规则： 1) 所有ID或者class字母和数字之间用“_”连接， 如: #col_1、#col_2 2) 所有ID或者class两个单词之间的链接采用骆驼式命名法， 如: mianNav、footNav 3) 页面主体框架布局命名：Lay_1、Lay_2 、Lay_3 4) 栏目布局容器命名一律采用: col_1、col_2、col_3、col_4、col_N 5) 栏目标题块命名一律采用title。元素标签采用:h4 如： div class=tith4标题/h4/div 6) 页面所有图片区域全部采用：pic_1、pic_2、pic_3、pic_N 7) 页面文本列表区域全部采用： Lst_1、Lst_2、Lst_3、Lst_N 8) 页面上按钮采用：btn_1、btn_2、btn_3、btn_N 9) 广告区域：ad_1,ad_2,ad_3,ad_N 2.主框架命名规则： 1) #header (页面头部) 2) #main (页面主体) 3) #footer (页面尾部) 3.通用命名规则： 主 体 main 外 层 wrap 功能条 funcBar 主导航 mainNav 子导航 subNav 友情链接：friendLink 版 权：copyright 页 眉 header 页 脚 footer 标 题 title 主导航 mainNav 子菜单 subMenu 注 释 note 面包屑breadcrumb 容 器 container 内 容 content 搜 索 search 登 陆 Login 当前状态 current 页头 header 标志 logo 侧栏 sidebar 广告 banner 导航 nav 子导航 subnav 菜单 menu 子菜单 submenu 搜索 search 滚动 scroll 页面主体 main 内容 content 标签页 tab 文章列表 list 信息 msg 提示技巧 tips 栏目标题 title 指南 guide 服务 service 热点 hot 新闻 news 下载 download 注册 reg（register） 状态 status 按钮 btn 投票 vote 4.常用简写命名规则： bd：Body hd：Header fnt：字体 nav：导航 tb：表格 lnk：链接 ml/mr：margin-left/margin-right lst：列表 pl / pr / pd：padding-left/-right/padding col：栏目 frm：表单 con：内容 inf：信息 lg：Logo inp：Input ft：Footer btn：Button more：更多 Tit: 标题栏 Spr :空行 bdr：边 w：宽 h：高 t / d / mid / l / r： 上 / 下 / 中 / 左 / 右 fl /fr float:left/float:right 二 网站布局和样式文件命名 1. 网站样式文件命名和样式从属关系 1) 全局CSS文件：global.css ，其中global.css包括cssreset（用来清除默认值）、全局性的一些属性值的定义 2) 全局布局共用CSS文件：layout （网站布局容器的共用的CSS部分：页眉、页脚、搜索共用CSS 3) 频道私有CSS文件：home.css （当前频道或者页面的CSS独有属性值以及为了兼容不同的浏览器的所采用的hack） 2. 网站布局： 网站采用目前最流行的960宽度布局；布局类型分为3栏和2栏两种方式。 两栏布局：主容器宽度为700px 副容器宽度为240px 三栏布局：依次为190px、510px、240px； 3. 网站栏目： web页面上不同内容的组合方式：图片展示、图文组合、文字列表、标题段落、按钮等几种。所以common样式文件中按照如下规则定义： 1) 全局框架通用样式 2) 页眉 3) 导航 4) 搜索 5) 页脚 6) 内容列表通用样式 7) 图片通用样式 8) 表单通用样式