我的联盟 作品 招聘 外包 人才  酷站加油 国内 国外 CSS  资源图库 图库 模板 矢量 图标  设计欣赏 界面 LOGO 插画 艺术  网页 平面  专访 名站 竞赛 社区
当前位置:首页 > 网页教程 > HTMLCSS教程 > 正文
我的div+CSS ID的命名规范和习惯
来源:68design.net社区 作者:落单的兵 2008年09月10日 15:18 网友评论:4条 点击:

大家都知道规范的css命名可以增强样式规则的可读性,便于后来你或别人对页面的修改。起初我写css规则的时候,用汉语的缩写来命名,现在看来是很不专业的,也给我的后期维护浪费精力。

根据自己的而写法习惯和网上的一些写法,我总结了一套适用自己的id命名写法.拿出来晒一晒。

CSS 类和ID的常用命名:

网站头部:    head/header(头部) top(顶部)导航:   nanv 导航具体区分:topnav(顶部导航)、mainnav(主导航)、mininav(迷你导航)、textnav(导航文本)、subnav(子导航/二级导航)
旗帜、广告和商标:logo(旗帜)、brand(商标)、banner(标语)
搜索:sreach(搜索)、sreachbox(搜索框)、sreachbtn(搜索按钮)、sreachinput(搜索输入框)
注册和登录:login(登录)、regsiter(注册)、userbox(用户名/通行证的文本框)、password(密码)
布局、分栏和框:   layout(布局)、bigdiv(大div)、leftdiv(左分栏)、rightdiv(右分栏)、leftfloat(左浮动)、rightfloat(右浮动)、mainbox()、subpage(子页面/二级页面)
页脚/底部:foot/footer(页脚/底部)、copyright(版权信息)、sitemap(网站地图)
其他:content(内容)、skin(皮肤)、title(标题)、from(表单)、pic(图片)、news(新闻)、shop(购物区)、list(列表/清单)、newslist(新闻列表)、downloadlist(下载列表)、piclist(图片列表)、dropmenv(下拉菜单)、cor/corner(圆角)、homepage(首页)、crumb(当前位置导航)
实际上上面的id命名我会经常用大小写和_来区分,比如主导航就是MainNav,如果还有必要在区分就是MainNav_1,MainNav_2等等。也可以使用"类型+变量名称"的规则来命名,比如写一个红色字体的class,可以
.f_red {}(f是font 字体的缩写)。总之原则是:大小写、_、缩写,大大增强代码的可读性。

另外我还经常使用"in"的写法做子divd的命名,写法in+父div,这样可以避免前面命名过了后面div不知道怎么去命名。比如intop、inbox、infrom、inlogin等等。

没有一个真正标准的命名规范,每个人都有自己的一套写法。但是要尽量向大家所认同的规范上靠,毕竟这在团队合作上有莫大的益处。本文会持续更新中,有疏漏出请大家指正。

原文在我的博客:http://blog.sina.com.cn/s/blog_5aa7305e0100arvs.html

上一篇:最全的CSS浏览器兼容问题   下一篇:Css Reset(复位)整理
收藏此页】【打印】【关闭
 相关文章  我要点评
·关于文件命名
·1万元 凤凰纸业品牌命名及商标设计大赛
·检查数据库数据字段命名规范与合法性的脚本
·ORACLE数据库的统一命名与编码规范
·数据库命名规范的相关概念
·重命名视图时须遵循的原则
·SQL Server 2000的命名实例和多实例
·教你用Photoshop给照片批量重命名

免责声明:本站刊载此文不代表同意其说法或描述,仅为提供更多信息,也不构成任何建议。对本文有任何异议,请联络:68design#163.com
转载要求:作者及来源信息必需保留。转载之图片、文件,链接请不要盗链到本站,且不准打上各自站点的水印。



关于我们 | 设计服务 | 广告服务 | 常见问题 | 网站地图 | 法律声明 | 联系我们
Copyright © 2003-2012 68design.net, All Rights Reserve 【找网页设计师,当然上网页设计师联盟】