美文网首页前端之旅程序员饥人谷技术博客
前端学习笔记之常用的命名(详细)

前端学习笔记之常用的命名(详细)

作者: Moorez | 来源:发表于2017-04-19 21:06 被阅读286次

    1. 常用命名

    页头:header
    登录条:loginBar
    标志:logo
    侧栏:sideBar
    广告:banner
    导航:nav
    子导航:subNav
    菜单:menu
    子菜单:subMenu
    搜索:search
    滚动:scroll
    页面主体:main
    内容:content
    标签页:tab
    文章列表:list
    提示信息:msg
    小技巧:tips
    栏目标题:title
    加入:joinus
    指南:guild
    服务:service
    热点:hot
    新闻:news
    下载:download
    注册:register
    状态:status
    按钮:btn
    投票:vote
    合作伙伴:partner
    友情链接:friendLink
    页脚:footer
    版权:copyRight
    链 接:link
    容 器:container
    图 标:icon
    信息: info

    2. CSS ID 的命名

    外 套:  wrap
    主导航:  mainNav
    子导航:  subNav
    页 脚:  footer
    整个页面: content
    页 眉:  header
    页 脚:  footer
    商 标:  label
    标 题:  title
    主导航:  mainNav(globalNav)
    顶导航:  topNav
    边导航:  sidebar
    左导航:  leftsideBar
    右导航:  rightsideBar
    标 志:  logo
    标 语:  banner
    菜单内容1: menu1Content
    菜单容量: menuContainer
    子菜单:  subMenu
    边导航图标:sidebarIcon
    注释:   note
    面包屑:  breadCrumb(即页面所处位置导航提示)
    容器:   container
    内容:   content
    搜索:   search
    登陆:   login
    功能区:  shop(如购物车,收银台)
    当前的   current

    3. 另外在编辑样式表时可用的注释可这样写:

    <– Footer –>
    内容区
    <– End Footer –>

    4. 样式文件命名

    主要的 master.css
    布局,版面 layout.css
    专栏 columns.css
    文字 font.css
    打印样式 print.css
    主题 themes.css

    5. 文件命名

    全局样式:global.css;
    框架布局:layout.css;
    字体样式:font.css;
    链接样式:link.css;
    打印样式:print.css;

    常用类的命名应尽量以常见英文单词为准,做到通俗易懂,并在适当的地方加以注释。对于二级类/ID命名,则采用组合书写的模式,后一个单词的首字母应大写:诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名这** “searchIcon” 、“搜索按钮”命名为“searchBtn”**

    相关文章

      网友评论

      本文标题:前端学习笔记之常用的命名(详细)

      本文链接:https://www.haomeiwen.com/subject/arghzttx.html