div -命名
大家都知道规范的[font=Times New Roman]css[/font][font=宋体]命名可以增强样式规则的可读性，便于后来你或别人对页面的修改。起初我写[/font][font=Times New Roman]css[/font][font=宋体]规则的时候[/font][font=Times New Roman],[/font][font=宋体]用汉语的缩写来命名，现在看来是很不专业的，也给我的后期维护浪费精力。[/font]根据自己的而写法习惯和网上的一些写法，我总结了一套适用自己的[font=Times New Roman]id[/font][font=宋体]命名写法[/font][font=Times New Roman].[/font][font=宋体]拿出来晒一晒。[/font]
CSS [font=宋体]类和[/font][font=Times New Roman]ID[/font][font=宋体]的常用命名：[/font]
网站头部[font=Times New Roman]: head/header([/font][font=宋体]头部[/font][font=Times New Roman]) top[/font][font=宋体]（顶部）导航： [/font][font=Times New Roman]nanv [/font][font=宋体]导航具体区分：[/font][font=Times New Roman]topnav([/font][font=宋体]顶部导航[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]mainnav([/font][font=宋体]主导航[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]mininav([/font][font=宋体]迷你导航[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]textnav([/font][font=宋体]导航文本[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]subnav([/font][font=宋体]子导航[/font][font=Times New Roman]/[/font][font=宋体]二级导航[/font][font=Times New Roman])[/font]
旗帜、广告和商标：[font=Times New Roman]logo[/font][font=宋体]（旗帜）、[/font][font=Times New Roman]brand([/font][font=宋体]商标[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]banner([/font][font=宋体]标语[/font][font=Times New Roman])[/font]
搜索：[font=Times New Roman]sreach([/font][font=宋体]搜索[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]sreachbox([/font][font=宋体]搜索框[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]sreachbtn([/font][font=宋体]搜索按钮[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]sreachinput[/font][font=宋体]（搜索输入框）[/font]
注册和登录：[font=Times New Roman]login([/font][font=宋体]登录[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]regsiter([/font][font=宋体]注册[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]userbox([/font][font=宋体]用户名[/font][font=Times New Roman]/[/font][font=宋体]通行证的文本框[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]password([/font][font=宋体]密码[/font][font=Times New Roman])[/font]
布局、分栏和框： [font=Times New Roman]layout([/font][font=宋体]布局[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]bigdiv([/font][font=宋体]大[/font][font=Times New Roman]div)[/font][font=宋体]、[/font][font=Times New Roman]leftdiv([/font][font=宋体]左分栏[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]rightdiv([/font][font=宋体]右分栏[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]leftfloat([/font][font=宋体]左浮动[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]rightfloat([/font][font=宋体]右浮动[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]mainbox()[/font][font=宋体]、[/font][font=Times New Roman]subpage([/font][font=宋体]子页面[/font][font=Times New Roman]/[/font][font=宋体]二级页面[/font][font=Times New Roman])[/font]
页脚[font=Times New Roman]/[/font][font=宋体]底部：[/font][font=Times New Roman]foot/footer([/font][font=宋体]页脚[/font][font=Times New Roman]/[/font][font=宋体]底部[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]copyright([/font][font=宋体]版权信息[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]sitemap([/font][font=宋体]网站地图[/font][font=Times New Roman])[/font]
其他：[font=Times New Roman]content([/font][font=宋体]内容[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]skin([/font][font=宋体]皮肤[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]title([/font][font=宋体]标题[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]from([/font][font=宋体]表单[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]pic([/font][font=宋体]图片[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]news([/font][font=宋体]新闻[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]shop([/font][font=宋体]购物区[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]list([/font][font=宋体]列表[/font][font=Times New Roman]/[/font][font=宋体]清单[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]newslist([/font][font=宋体]新闻列表[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]downloadlist([/font][font=宋体]下载列表[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]piclist([/font][font=宋体]图片列表[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]dropmenv([/font][font=宋体]下拉菜单[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]cor/corner([/font][font=宋体]圆角[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]homepage([/font][font=宋体]首页[/font][font=Times New Roman])[/font][font=宋体]、[/font][font=Times New Roman]crumb([/font][font=宋体]当前位置导航[/font][font=Times New Roman])[/font]
实际上上面的[font=Times New Roman]id[/font][font=宋体]命名我会经常用大小写和[/font][font=Times New Roman]_[/font][font=宋体]来区分，比如主导航就是[/font][font=Times New Roman]MainNav,[/font][font=宋体]如果还有必要在区分就是[/font][font=Times New Roman]MainNav_1,MainNav_2[/font][font=宋体]等等。也可以使用[/font][font=Times New Roman]"[/font][font=宋体]类型[/font][font=Times New Roman]+[/font][font=宋体]变量名称[/font][font=Times New Roman]"[/font][font=宋体]的规则来命名，比如写一个红色字体的[/font][font=Times New Roman]class,[/font][font=宋体]可以[/font]
.f_red {}(f[font=宋体]是[/font][font=Times New Roman]font [/font][font=宋体]字体的缩写[/font][font=Times New Roman])[/font][font=宋体]。总之原则是：大小写、[/font][font=Times New Roman]_[/font][font=宋体]、缩写，大大增强代码的可读性。[/font]
另外我还经常使用[font=Times New Roman]"in"[/font][font=宋体]的写法做子[/font][font=Times New Roman]divd[/font][font=宋体]的命名，写法[/font][font=Times New Roman]in+[/font][font=宋体]父[/font][font=Times New Roman]div,[/font][font=宋体]这样可以避免前面命名过了后面[/font][font=Times New Roman]div[/font][font=宋体]不知道怎么去命名。比如[/font][font=Times New Roman]intop[/font][font=宋体]、[/font][font=Times New Roman]inbox[/font][font=宋体]、[/font][font=Times New Roman]infrom[/font][font=宋体]、[/font][font=Times New Roman]inlogin[/font][font=宋体]等等。[/font] 不错
可以去参考CSS命名 [url]http://www.divcss5.com/jiqiao/j4.html[/url] 我现在命名也常常不知所措，参考了，谢谢！ 嗯，相当实用的代码，我收藏一下。。。嘿嘿:lol
页:
[1]