CSS命名规范

网页内容类

 

• 标题: title

• 摘要: summary

• 箭头： arrow

• 商标： label

• 网站标志： logo

• 转角/圆角： corner

• 横幅广告： banner

• 子菜单： subMenu

• 搜索： search

• 搜索框： searchBox

• 登录： login

• 登录条：loginbar

• 工具条： toolbar

• 下拉： drop

• 标签页： tab

• 当前的： current

• 列表： list

• 滚动： scroll

• 服务： service

• 提示信息： msg

• 热点：hot

• 新闻： news

• 小技巧： tips

• 下载： download

• 栏目标题： title

• 热点： hot

• 加入： joinus

• 注册： regsiter

• 指南： guide

• 友情链接： friendlink

• 状态： status

• 版权： copyright

• 按钮： btn

• 合作伙伴： partner

• 投票： vote

• 左右中：left right center

---

注释的写法:

/ Footer /
内容区
/ End Footer /

id的命名:

• 页面结构

• 容器: container

• 页头：header

• 内容：content/container

• 页面主体：main

• 页尾：footer

• 导航：nav

• 侧栏：sidebar

• 栏目：column

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

• 左右中：left right center

---

• 导航

• 导航：nav

• 主导航：mainbav

• 子导航：subnav

• 顶导航：topnav

• 边导航：sidebar

• 左导航：leftsidebar

• 右导航：rightsidebar

• 菜单：menu

• 子菜单：submenu

• 标题: title

• 摘要: summary

---

• 功能

• 标志：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的命名:

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

• .red { color: red; }

• .f60 { color: #f60; }

• .ff8600 { color: #ff8600; }

• 字体大小,直接使用”font+字体大小”作为名称,如

• .font12px { font-size: 12px; }

• .font9px {font-size: 9pt; }

• 对齐样式,使用对齐目标的英文名称,如

• .left { float:left; }

• .bottom { float:bottom; }

• 标题栏样式,使用”类别+功能”的方式命名,如

• .barnews { }

• .barproduct { }

---

•  

• 注意事项::

• 一律小写;

• 尽量用英文;

• 不加中杠和下划线;

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

---

 

【推荐的 CSS 书写顺序】：

• 显示属性

• display

• list-style

• position

• float

• clear

• 自身属性

• width

• height

• margin

• padding

• border

• background

• 文本属性

• color

• font

• text-decoration

• text-align

• vertical-align

• white-space

• other text

• content