个好的命名习惯(当然这里指的并不仅仅是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... |
|