您的位置:首页 > Web前端 > CSS

CSS:命名规范心得分享

2014-06-09 20:12 288 查看
一个好的命名习惯(当然这里指的并不仅仅是CSS命名)。不仅可以提高开发效率,而且有益于后期修改和维护。

假设我们当前使用的命名方式都是约定成俗的,所有人都是这样写,那么你去到一个新团队,或者别人来接手你的工作,都可以大大缩短去阅读别人代码的时间。

一个规范化的命名,不用说,只要想想就能体会到其中的好处了。

CSS:命名规范心得分享
板块(Plate)命名(Naming)说明(Description)
主容器wrapper页面上最大的外部容器,如无特殊需求,不推荐使用
页面头部header主体内容以上的部分,即页面头部位置,可包含logo导航等
页面底部footer主体内容以下的部分,即页面底部位置,可包含版权备案等
面包屑position页面中的面包屑导航,如当前位置
页面主体main页面中呈现最重要内容的区域
网站标志logo标志着一个网站的图片或文字
一级导航nav一级导航
二级导航subnav二级导航
一级菜单menu一级菜单
二级菜单submenu二级菜单
页面通栏banner页面上的一些大条的图片
正文主体content页面主体中呈现主要内容的区域
正文侧栏sidebar页面主体中呈现次要内容的区域
广告ad
标题tit页面上的标题部分,如头条标题可写为:tit-topline,连接符后面为标题部分的相关内容概述
摘要summary文章的摘要或说明
普通新闻列表news-list新闻标题列表
新闻top排行top-list有序的新闻列表
图片列表pic-list图片列表
图文混排pic-txt
图文混排图片区pic-area
图文混排文字区txt-area
技巧提示tips一些技巧或者提示信息
搜索search搜索区域
外补丁mtop/mright/mbot/mleft如1像素外上补丁可以写成mtop1,2像素mtop2...
内补丁ptop/pright/pbot/pleft如1像素内上补丁可以写成ptop1,2像素ptop2...
12px的普通文字f12如14px可写为f14...
12px的加粗文字fb12如14px可写为fb14...
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: