常用的CSS命名规则




(一)常用的CSS命名规则


 头:header

 内容:content/container

 尾:footer

 导航:nav

 侧栏:sidebar

 栏目:column

 页面外围控制整体布局宽度:wrapper

 左右中:left right center

 登录条:loginbar

 标志:logo

 广告:banner

 页面主体:main

 热点:hot

 新闻:news

 下载:download

 子导航:subnav

 菜单:menu

 子菜单:submenu

 搜索:search

 友情链接:friendlink

 页脚:footer

 版权:copyright

 滚动:scroll

 内容:content

 标签页:tab

 文章列表:list

 提示信息:msg

 小技巧:tips

 栏目标题:title

 加入:joinus

 指南:guild

 服务:service

 注册:regsiter

 状态:status

 投票:vote

 合作伙伴:partner


(二)注释的写法:

 /* Footer */

 内容区

 /* End Footer */


(三)id的命名:

 (1)页面结构

 容器: container

 页头:header

 内容:content/container

 页面主体:main

 页尾:footer

 导航:nav

 侧栏:sidebar

 栏目:column

 页面外围控制整体布局宽度:wrapper

 左右中:left right center


 (2)导航

 导航:nav

 主导航:mainbav

 子导航:subnav

 顶导航:topnav

 边导航:sidebar

 左导航:leftsidebar

 右导航:rightsidebar

 菜单:menu

 子菜单:submenu

 标题: title

 摘要: summary


 (3)功能

 标志:logo

 广告:banner

 登陆:login

 登录条:loginbar

 注册:regsiter

 搜索:search

 功能区:shop

 标题:title

 加入:joinus

 状态:status

 按钮:btn

 滚动:scroll

 标签页:tab

 文章列表:list

 提示信息:msg

 当前的: current

 小技巧:tips

 图标: icon

 注释:note

 指南:guild

 服务:service

 热点:hot

 新闻:news

 下载:download

 投票:vote

 合作伙伴:partner

 友情链接:link

 版权:copyright



 (四)class的命名:

 (1)颜色:使用颜色的名称或者16进制代码,如

 .red { color: red; }

 .f60 { color: #f60; }

 .ff8600 { color: #ff8600; }

 (2)字体大小,直接使用"font+字体大小"作为名称,如

 .font12px { font-size: 12px; }

 .font9pt {font-size: 9pt; }

 (3)对齐样式,使用对齐目标的英文名称,如

 .left { float:left; }

 .bottom { float:bottom; }

 (4)标题栏样式,使用"类别+功能"的方式命名,如

 .barnews { }

 .barproduct { }



 注意事项::

 1.一律小写;

 2.尽量用英文;

 3.不加中杠和下划线;

 4.尽量不缩写,除非一看就明白的单词.

 主要的 master.css

 模块 module.css

 基本共用 base.css

 布局,版面 layout.css

 主题 themes.css

 专栏 columns.css

 文字 font.css

 表单 forms.css

 补丁 mend.css

 打印 print.css



标签: 资源 HTML PHP

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.vxia.net/post-316.html

相关推荐

评论

  1. 2014-12-27 21:50
    了解一点{~}
    1. 2014-12-27 23:54
      @同盟源:一些常见的CSS名,不过还是配合JS强大啊~~

你肿么看?

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。