死亡是一座永恒的灯塔

0%

css常用命名规范

作为一个对代码负责的人,每次看见别人代码里混乱的命名,总是不禁心里一顿暗骂。问及写代码的人,他们的回答总是:我英文不好,不知道如何取名,都想破了脑袋。而一些QQ群里提问题的朋友截图代码,命名也是非常混乱。网上有很多人发表CSS常用命名的文章,也都挺好的,我只是一个收集者,和把自己的常用命名加上去,分享给有需要的人,希望大家以后写的代码自己看着舒服,别人维护着也舒服。

class的命名

  • 头:header
  • 内容:content/container
  • 尾:footer
  • 导航:nav navigation n.航行;航海
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体佈局宽度:wrapper
  • 左右中:left right center
  • 登录条:loginbar
  • 标志:logo
  • 广告:banner
  • 页面主体:main
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 子导航:subnav
  • 菜单:menu
  • 子菜单:submenu
  • 搜索:search
  • 友情链接:friendlink
  • 页脚:footer
  • 版权:copyright
  • 滚动:scroll
  • 内容:content
  • 标签:tags
  • 文章列表:list
  • 提示信息:msg–message
  • 小技巧:tips
  • 栏目标题:title
  • 加入:joinus
  • 指南:guide
  • 服务:service
  • 注册:regsiter
  • 状态:status
  • 投票:vote
  • 合作伙伴:partner

id的命名

页面结构

  • 容器: container
  • 页头:header
  • 内容:content/container
  • 页面主体:main
  • 页尾:footer
  • 导航:nav
  • 侧栏:sidebar
  • 栏目:column
  • 页面外围控制整体佈局宽度:wrapper
  • 左右中:left right center

导航

  • 导航:nav
  • 主导航:mainnav
  • 子导航:subnav
  • 顶导航:topnav
  • 边导航:sidebar
  • 左导航:leftsidebar
  • 右导航:rightsidebar
  • 菜单:menu
  • 子菜单:submenu
  • 标题: title
  • 摘要: summary

功能

  • 标志:logo
  • 广告:banner
  • 登陆:login
  • 登录条:loginbar
  • 注册:register
  • 搜索:search
  • 功能区:shop
  • 标题:title
  • 加入:joinus
  • 状态:status
  • 按钮:btn
  • 滚动:scroll
  • 标籤页:tab
  • 文章列表:list
  • 提示信息:msg
  • 当前的: current
  • 小技巧:tips
  • 图标: icon
  • 注释:note
  • 指南:guild
  • 服务:service
  • 热点:hot
  • 新闻:news
  • 下载:download
  • 投票:vote
  • 合作伙伴:partner
  • 友情链接:link
  • 版权:copyright
坚持技术分享,您的支持将鼓励我继续创作!