关于前端的CSS命名

css命名

(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
  四、书写规范

1、排版规范(1)使用4个空格，而不使用tab或者混用空格+tab作为缩进；(2)规则可以写成单行，或者多行，但是整个文件内的规则排版必须统一；单行形式书写风格的排版约束

• 如果是在html中写内联的css，则必须写成单行；

• 每一条规则的大括号 { 前后加空格 ；

• 每一条规则结束的大括号 } 前加空格；

• 属性名冒号之前不加空格，冒号之后加空格；

• 每一个属性值后必须添加分号; 并且分号后空格；

• 多个selector共用一个样式集，则多个selector必须写成多行形式 ；
  多行形式书写风格的排版约束

• 每一条规则的大括号 { 前添加空格;

• 多个selector共用一个样式集，则多个selector必须写成多行形式 ;

• 每一条规则结束的大括号 } 必须与规则选择器的第一个字符对齐 ;

• 属性名冒号之前不加空格，冒号之后加空格;

• 属性值之后添加分号;