(一)网页设计中常用的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
- 遮罩 : mask
- 下划线高亮 : under-line
- 常见的,初始化: common
(二)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
- 项目 item
(三)class的命名:
(1)颜色:使用颜色的名称或者16进制代码
如:
red { color: red; } .f60 { color: #f60; } .ff8600 { color: #ff8600; }
.font12px { font-size: 12px; }
.font9pt {font-size: 9pt; }
(3)标题栏样式,使用"类别+功能"的方式命名
(2)标题栏样式,使用"类别+功能"的方式命名
如:
.barnews { }
.barproduct { }
(四)变量的命名
- 增删查改 : CRUD
- 可变,对象 : params
- 关闭 : close
- 图解,图文: graphic
- 拖曳 : drag
- 通用: currency
- 地址: address
- 照片: picture
注意事项:
- 1.一律小写;
- 2.尽量用英文;
- 3.不加中杠和下划线;
- 4.尽量不缩写，除非一看就明白的单词.
- 主要的 master.css
- 模块 module.css
- 基本共用 base.css
- 布局，版面 layout.css
- 主题 themes.css
- 专栏 columns.css
- 文字 font.css
- 表单 forms.css
- 补丁 mend.css
- 打印 print.css
- css初始化代码 common.css
