常用的CSS命名规则

资料来源：网络整理时间：2023/2/14 0:04:53 共计：3583 浏览

(一)常用的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

版权说明：
本网站凡注明“广州京杭原创”的皆为本站原创文章，如需转载请注明出处！
本网转载皆注明出处，遵循行业规范，如发现作品内容版权或其它问题的，请与我们联系处理！
欢迎扫描右侧微信二维码与我们联系。

·上一条：CSS3 :target 选择器 | ·下一条：Responsive Web Design