zoukankan      html  css  js  c++  java
  • 前端命名规范

     

    一、命名规范:

    1、基本要求:

    1)文件编码统一使用 UTF-8 编码; 
    2)命名时以符合语义为主要参考指标,CSS属性书写规范,采用统一风格及命名方法; 
    3)结构清晰,层级关系明朗,以不超过三级为标准; 
    4)同一表现形式的样式要求可重复利用,模块组件类的样式要求可整体外部移植; 
    5)编写 CSS 的时候,应当避免使用CSS Hack,能不用则不用。 
    6)所有页面默认都针对Firefox 等最接近标准的浏览器进行设计,然后使用IE 特有条件注释功能进行针对性修正。 
    7)请使用英文进行命名,尽量避免使用拼音。命名要求具有可读性,尽量避免使用缩写。命名虽然允许数字,但应尽量避免使用数字命名。 


    2、命名方法 要求采用统一的命名方法。常用命名方法有: 
    1)连写式命名法,如:helloworld 
    2)中线命名法,如:hello-world(目前采用此方法的较多,建议采用) 
    3)下划线命名法,如:hello_world 
    4)骆驼命名法,如:helloWorld 
    5)帕斯卡命名法,如:HelloWorld 
    6)其他方法。 


    3、css文件命名规范 如: 
    全局的:global.css 
    主要的:master.css 
    布局、版面:layout.css 
    专栏:columns.css 
    文字:font.css 
    打印样式:print.css 
    主题:themes.css 
    补丁:pacth.css 
    格式化浏览器:base.css等。 


    4、ID及Class命名常用名称 
    (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

     

    5、路由示例:

    分类列表:category

    添加分类:category/create

    分类详情:category/:id/show

    编辑分类:category/:id/edit

    :id分类下的品牌列表:category/:id/brand

    :id分类下品牌详情:category/:id/brand/:brand_id

    :id分类下的品牌编辑: category/:id/brancd/:brand_id/edit

    如需要区分分组,可加前缀

    例如:用户下的分类

    user/category

    ......

    component文件命名同理,

    分类列表:category/index

    添加分类:category/create

    分类详情:category/show

    编辑分类:category/edit

    :id分类下的品牌列表:category/brand/index

    :id分类下品牌详情:category/brand/show

    :id分类下的品牌编辑: category/brancd/edit

    以此类推。

     

  • 相关阅读:
    java面试常见的类
    Day6
    DAY5
    Day4
    Day3
    Day2
    Day1
    echarts3关系图:力引导布局, 固定某些节点
    Hbuilder中配置cmd
    webpack 学习
  • 原文地址:https://www.cnblogs.com/forget0909-Angle-Qi/p/9604191.html
Copyright © 2011-2022 走看看