Web前端企业开发命名规范

一个好的前端项目代码离不开好的命名规范，试想一下叫你接手一个项目，你看到之前开发的代码的命名一团糟，那是多么痛苦的事啊。或者你自己把一个项目命名的一团糟，等过段时间让你重构该项目的时候，估计肠子都要悔青吧！

(一)网页内容类

标题: title
摘要: summary
箭头： arrow
商标： label
网站标志： logo
转角/圆角： corner
横幅广告： banner
子菜单： subMenu
搜索： search
搜索框： searchBox
登录： login
登录条：loginbar
工具条： toolbar
下拉： drop
标签页： tab
当前的： current
列表： list
滚动： scroll
服务： service
提示信息： msg
热点：hot
新闻： news
小技巧： tips
下载： download
栏目标题： title
热点： hot
加入： joinus
注册： regsiter
指南： guide
友情链接： friendlink
状态： status
版权： copyright
按钮： btn
合作伙伴： partner
投票： vote
左右中：left right center

(二)注释的写法:

/* Footer */
内容区
/* End Footer */

(三)id的命名:

(1)页面结构

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

(2)导航

导航：nav
主导航：mainnav
子导航：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.尽量不缩写，除非一看就明白的单词.

推荐的 CSS 书写顺序
//显示属性
display
list-style
position
float
clear

//自身属性
width
height
margin
padding
border
background

//文本属性
color
font
text-decoration
text-align
vertical-align
white-space
other text
content

Web前端企业开发命名规范相关推荐

Web前端-vue 开发命名规范
1.views 命名 views 文件夹下面是由以页面为单位的 vue 文件或者模块文件夹组成的放在 src 目录之下,与 components.assets 同级目录解析目录/文件说 ...
Web 前端——项目文件夹命名规范
文件夹名称含义 src,source 源代码,用src居多 test,__tests__ 测试文件,也经常用__test__,facebook的测试框架jest默认的测试文件目录就是__test__ ...
Web前端设计开发规范
前言本文主要整理了Web前端设计开发的相关规范,主要由网络收集,希望对大家在Web设计和开发的过程中有一些帮组. 目录一.界面设计规范细则二.CSS编写和命名规范三.JavaScript编程规 ...
Web前端工程师开发规范必须要注意的事
Web前端工程师开发规范必须要注意的事规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档. 本规范文档一经确认, 前端开发人员必须按本文档规范 ...
web前端模块化开发_真正的模块化Web应用程序：为什么没有开发标准？
web前端模块化开发 OSGI , SpringSource , Jboss模块 ,J2EE和清单永远不会结束.所有这些技术都向他们的最终用户/开发人员保证了相同的东西,或多或少是Java模块化Web ...
前端git操作命名规范和协作开发流程
前言一个项目的分支,一般包括主干 master 和开发分支 dev,以及若干临时分支分支命名规范分支: 命名: 说明:主分支 master 主分支,所有提供给用户使用的正式版本,都在这个主分支 ...
web mysql 界面表命名规范_MySql数据库表字段命名及设计规范
1.设计原则 1) 标准化和规范化web 数据的标准化有助于消除数据库中的数据冗余.标准化有好几种形式,但 Third Normal Form(3NF)一般被认为在性能.扩展性和数据完整性方面达到了最 ...
web前端网页开发离不开的三要素：HTML、CSS、JavaScript
前端开发是目前高薪岗位之一,是从最开始的页面开发不断发展优化而产生的一个特定的岗位.现在web前端开发一定会用到的三门技术:HTML.CSS.JavaScript.无论是多么炫酷的页面都是这三门技术的 ...
web前端项目开发流程
开发流程图解需求评审召集需求涉及到的UI.开发.产品.测试人员整理业务流程,同步信息,明确分工明确需求目的,考虑当前需求设计是否可满足目的整理流程中如果涉及的其他人员,则召集商讨如需求设 ...

Web前端企业开发命名规范

Web前端企业开发命名规范相关推荐

最新文章

热门文章