CSS命名规范和常见命名

命名规范

• 以字母开头
  
  • 必须以字母开头命名选择器，这样可以保证所有浏览器都兼容；
  • 不允许单个字母的类选择器出现；
  • 不允许带有广告等英文的单词，如ad、adv、adver、advertising等，防止该模块被浏览器当成垃圾广告过滤掉；
• 全小写，并用“-”连字符
  
  • 下划线”_”禁止出现在class命名中，统一使用“-”连字符；
  • 禁止驼峰式命名；
  • 不要出现-数字连接；

常见命名

1. 网页外层重要命名

   1. 外套 wrap ——————用于最外层
   2. 头部 header —————用于头部
   3. 主要内容 main ————用于主体内容（中部）
   4. 左侧 main-left ————-左侧布局
   5. 右侧 main-right ———–右侧布局
   6. 导航条 nav —————–网页菜单导航条
   7. 内容 content ————–用于网页中部主体
   8. 底部 footer —————–用于底部

2. div+css明明参考

   1. CSS样式命名说明网页公共命名
      wrapper页面外围控制整体布局宽度
      container / content容器
   2. 用于最外层
      layout布局
      head,header页头部分
      foot, footer页脚部分
      nav主导航
      subnav二级导航
      menu菜单
      submenu子菜单
      sideBar侧栏
      sidebar-left, sidebar-right左边栏或右边栏
      main页面主体
      tag标签
      msg / message提示信息
      tips小技巧
      vote投票
      friendlink友情连接
      title标题；
   3. 内容
      summary摘要
      loginbar登录条
      search-input搜索输入框
      hot热门热点
      search搜索
      search-output搜索输出和搜索结果相似
      searchBar搜索条
      search-results搜索结果
      copyright版权信息
   4. 元素
      logo网站LOGO标志
      siteinfo网站信息
      siteinfoLegal法律声明
      siteinfoCredits信誉
      joinus加入我们
      partner合作伙伴
      service服务
      regsiter注册
      arr/arrow箭头
      guild指南
      sitemap网站地图
      list列表
      homepage首页
      subpage二级页面子页面#tool,
      toolbar工具条
      drop下拉
      dorpmenu下拉菜单
   5. 功能
      status状态
      scroll滚动
      tab标签页
      left right center居左、中、右
      news新闻
      download下载
      banner广告条(顶部广告条)电子贸易相关
      products产品
      products-prices产品价格
      products-description产品描述
      products-review产品评论
      editor-review编辑评论
      news-release最新产品
      publisher生产商
      screenshot缩略图
      faqs常见问题
      keyword关键词
      blog博客
      forum论坛
   6. css文件命名
      master.css/style.css主要的
      module.css模块
      base.css基本共用
      layout.css布局，版面
      themes.css主题
      columns.css专栏
      font.css文字、字体
      forms.css表单
      mend.css补丁
      print.css打印