前端命名规范

 

一、命名规范:

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

以此类推。

 

原文地址:https://www.cnblogs.com/forget0909-Angle-Qi/p/9604191.html