WEB前端开发规范文档+CSS命名规范

合集下载

软件开发Web前端开发规范

软件开发Web前端开发规范软件开发Web前端开发规范是指在进行Web前端开发过程中，为了统一团队的代码风格，提高代码的可读性、可维护性和可扩展性而制定的规范。

本文将从代码结构、命名规范、注释规范、HTML规范、CSS规范、JavaScript规范以及版本控制等几个方面，详细阐述Web前端开发规范的内容。

一、代码结构规范：1. 项目根目录下应包含必要的文件，如index.html、package.json 等；2. 将不同类型的文件（如HTML、CSS、JavaScript）分别放在不同的文件夹中，方便管理；3.对于大型项目，可以按照模块对文件进行进一步的组织。

二、命名规范：1. 变量、函数名使用驼峰命名法，如helloWorld；2. 类名使用帕斯卡命名法，如HelloWorld；3.常量名使用全大写字母，如PI；4. 文件名使用小写字母，多个单词使用下划线连接，如index.html。

三、注释规范：1.对于重要的函数、类、模块等，应添加详细的注释说明；2.使用单行注释（//）或多行注释（/**/）来注释代码，注释应描述清楚代码的功能和作用；3.注释应写在代码的上方或右侧，避免在代码行尾添加注释。

四、HTML规范：2.缩进使用两个空格，不使用制表符；4. 使用双引号包裹属性值，如class="container"；5.避免使用行内样式，将样式写入CSS文件中。

五、CSS规范：1.代码缩进使用两个空格，不使用制表符；2. 使用中划线连接多个单词，如table-layout；3.选择器命名简洁明了，避免使用过长、复杂的名称；4.属性书写顺序应统一，比如先写布局相关的属性，再写样式相关的属性；5.使用CSS预处理器，如LESS、SASS等，提高开发效率。

六、JavaScript规范：1.使用ES6语法，提高代码的可读性和可维护性；2. 变量声明使用let或const，避免使用var；3.函数命名简洁明了，避免使用过长、复杂的名称；4.将多次使用的代码封装成函数，提高代码的复用性；5.避免使用全局变量和全局函数，减少命名冲突的可能性。

CSS命名规范参考及书写注意事项

CSS命名规范参考及书写注意事项，这里整理的比较全，web前端开发的朋友非常值得参考下。

CSS书写顺序*{/*显示属性*/displaypositionfloatclearcursor…/*盒模型*/marginpaddingwidthheight/*排版*/vertical-alignwhite-spacetext-decorationtext-align…/*文字*/colorfontcontent/*边框背景为什么要把boder和background放在最后的原因是修改的频率会较之前的频繁，放在最后查看起来方便，哈哈。

*/borderbackground}下表顺序为从上到下，从左到右：========================display || visibilitylist-style : list-style-type || list-style-position || list-style-imagepositiontop || right || bottom || leftz-indexclearfloatwidthmax-width || min-widthheightmax-height || min-heightoverflow || clipmargin : margin-top || margin-right || margin-bottom || margin-leftpadding : padding-top || padding-right || padding-bottom || padding-leftoutline : outline-color || outline-style || outline-widthborderbackground : background-color || background-image || background-repeat || background-attachment || background-positioncolorfont : font-style || font-variant || font-weight || font-size || line-height || font-familyfont : caption | icon | menu | message-box | small-caption | status-bartext-overflowtext-aligntext-indentline-heightwhite-spacevertical-aligncursorCSS命名规则：一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；主要的master.css专栏columns.css主题themes.css主要的master.css模块module.css基本共用base.css表单forms.css补丁mend.css二．页面结构容器: container页头：header内容：content页面主体：main页尾：footer栏目：column页面外围控制整体布局宽度：wrapper 左右中：left right center三．导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu摘要: summary四．功能标志：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版权：copyrightContainer div#container容器Layout#layout布局Header or banner div#head, #header页头部分Footer div#foot, #footer页脚部分Navigation list#nav主导航Sub-navigation list#subNav二级导航Menu#menu菜单Sub Menu#submenu子菜单Left or right side columns #sidebar_a, #sidebar_b左边栏或右边栏Main div#main页面主体Tag#tag标签Message#msg #message提示信息Tips#tips小技巧V ote#voteFriend Link#friendlink友情连接Title#title标题Summary#summary摘要Search input#searchInput搜索输入框Search output#search_output搜索输出和搜索结果相似Search#search搜索Search bar#searchBar搜索条Search results#search_results搜索结果Copyright information#copyright版权信息brand#branding商标branding-logo#logoLOGOSite information#siteinfo网站信息Copyright information etc. #siteinfoLegal法律声明Designer or other credits #siteinfoCredits信誉Join us加入我们Partnership opportunities #partner合作伙伴Services#service服务Regsiter#regsiter注册Arrowarr/arrow箭头Little#little标题Website map#sitemap网站地图List#list列表Home page#homepage首页Sub pagesubpage二级页面子页面Toolbar#tool, #toolbar工具条Next pulls#drop下拉Next pulls menu#dorpmenu下拉菜单Status#status状态Container div#container容器Header or banner div#header页头部分Main or global navigation div #mainNav主导航Menu#menu菜单Sub Menu#submenu子菜单Left or right side columns#sidebarA, #sidebarB左边栏或右边栏Main div#main页面主体Content div#content内容部分The main content area#contentMain主要内容区域Footer div#footer页脚部分Tag#tag标签Message#msg #message提示信息Tips#tips小技巧V ote#vote投票Friend Link#friendlink友情连接Title#titleSummary#summary摘要Sub-navigation list#subNav二级导航Search input#searchInput搜索输入框Search output#searchOutput搜索输出和搜索结果相似Search#search搜索Search results#searchResults搜索结果Copyright information#copyright版权信息brand#branding商标branding-logo#brandingLogoLOGOSite information#siteinfo网站信息Copyright information etc. #siteinfoLegal法律声明Designer or other credits #siteinfoCredits信誉Join us#joinus加入我们Partnership opportunities #partner合作伙伴Services服务Regsiter#regsiter注册Status#status状态Products.products产品Products prices.productsPrices产品价格Products description .productsDescription 产品描述Products review.productsReview产品评论Editor’s review.editorReview编辑评论New release.newsRelease最新产品Publisher.publisher生产商Screen shot.screenshot缩略图FAQ.faqs常见问题Keyword.keyword关键词Blog.blog博客Forum.forum论坛五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 { }XHTML-CSS写作建议1. 所有的xhtml代码小写2. 属性的值一定要用双引号(“”)括起来，且一定要有值3. 每个标签都要有开始和结束，且要有正确的层次4. 空元素要有结束的tag或于开始的tag后加上“/”5. 表现与结构完全分离，代码中不涉及任何的表现元素，如style、font、bgColor、border 等6. <h1>到<h5>的定义，应遵循从大到小的原则，体现文档的结构，并有利于搜索引擎的查询。

CSS命名规范和CSS书写规范

CSS命名规范和CSS书写规范CSS命名规范一、文件命名规范全局样式：global.css 主要的：master.css 框架布局：layout.css 模块样式：module.css 字体样式：font.css 公用的：base.css表单样式：forms.css 主题样式：thmems.css 链接样式：link.css 专栏样式：column.css 打印样式：print.css 补丁样式：mend.css 二、常用类/ID命名规范页头：header 菜单：menu内容：content 主菜单：mainMenu 容器：container 子菜单：subMenu 主题：main 导航：nav页脚：footer 主导航：mainNav 版权：copyright 子导航：subNav页面外围控制整体布局宽度：侧边栏：sidebar wrapper 友情链接：friendLink 标志：logo 列表：list标语：banner 提示信息：msg标题：title 小技巧：tips图标：Icon 加入：joinus注释：note 指南：guild搜索：search 服务: service按钮：btn 热点：hot登录条：loginbar 下载：download 信息框：manage 注册：regsiter滚动：scroll 状态：status标签页：tab 投票：vote当前的：current 摘要：Summary功能区：shop 提示信息：msg新闻：news 合作伙伴：parter备：一律小写；尽量用英文；不加中杠和下划线；尽量不用缩写，除非一看就明白的单词。

常用类的命名应尽量以常用英文单词为准，做到通俗易懂，并在适当的地方加以备注。

对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如“搜索框”则应命名为“searchInput”、“搜索图标”命名为“searchIcon”、“搜索按钮”命名为“searchBtn”三、css|规范|网页直观命名当在设计Web页面以及需要对一个div进行标识的时候，最自然的想法就是使用可以描述元素所在页面位置的词汇来对其命名。

前端代码规范文档

前端代码规范文档前端代码规范文档一、命名规范1. HTML/CSS命名规范- 使用小写字母和连字符（-）作为单词分隔符；- 尽量避免使用缩写，除非是广泛接受的缩写；- 使用有意义的命名，不使用无意义的命名；- 使用统一的命名方式来表示特殊类型的元素（例如：头部、侧边栏等）；2. JavaScript命名规范- 使用驼峰命名法（camelCase）；- 使用有意义的命名来描述变量、函数或类的作用；- 避免使用单个字符的命名，除非是临时变量；- 使用全大写的命名方式来表示常量；二、缩进和空格规范1. 使用4个空格来进行缩进；2. 在括号前后留一个空格；3. 在运算符前后留一个空格；4. 在函数名和参数列表之间留一个空格；三、注释规范1. 使用注释来解释代码的功能和用途；2. 对于复杂的代码块或关键算法，应提供详细的注释；3. 注释应该是清晰明了的，避免使用不恰当的术语或缩写；4. 重要的注释可以使用大写字母或星号来标记；四、代码风格规范1. 使用一致的缩进和空格；2. 合理使用换行符，避免一行代码过长；3. 尽量避免使用行尾的空格或制表符；4. 使用一致的括号风格，例如在函数或语句块的开头和结尾都使用大括号；5. 使用分号来结束语句；6. 使用合理的命名方式来描述变量、函数和类的作用；7. 避免使用全局变量，使用局部变量或封装变量的方式来控制变量的作用范围；8. 避免使用多层嵌套的条件语句，可以使用条件判断的方法来简化代码；9. 使用恰当的函数和类来封装可重用的代码；五、代码结构规范1. 尽量避免大而复杂的函数，使用小而简单的函数来实现功能；2. 模块化代码，将相关联的函数和类放在同一个文件中；3. 合理使用空行来分隔不同的代码块；4. 将页面的结构和样式分离开来，使得HTML文件更加简洁和易于维护；5. 对于重要的功能块，使用代码块注释来标记开头和结尾；六、代码审查规范1. 对新提交的代码进行审查，确保其符合代码规范；2. 对代码中的错误和潜在问题进行识别和修复；3. 鼓励团队成员进行代码审查和互相学习，提高代码质量；4. 定期审核项目中的代码，找出不符合规范的代码并进行修正。

css命名规范

css命名规范CSS（层叠样式表）技术一直是Web开发者们进行前端开发的重要工具之一。

它可以为网页提供美观的外观，并且也可以提升网站的可用性。

在进行前端开发时，对于CSS文件定义和命名是一个非常重要的环节。

给CSS文件定义一个有意义的名字，可以帮助开发者理解文件的作用，以及里面定义的样式。

CSS文件的命名有不同的规范，这些规范的重要性不容忽视。

有意义的命名规范不仅可以帮助开发者在未来能够快速定位文件，而且也可以更加有效的维护网站的可读性。

下面将介绍几种常用的CSS命名规范。

1.写字母和数字组合：一种命名规范是使用最多的。

它非常简洁，便于区分。

通常使用小写字母和数字组合来命名CSS文件和样式，并且使用横线（-）做为连接符。

比如：style-sheet.css，button-style.css，footer-style.css等。

2. 使用驼峰式命名：峰式的命名法是一种英文单词的写法，它由单词的第一个字母小写开始，而每个单词的首字母都大写开始。

比如：styleSheet.css，buttonStyle.css，footerStyle.css等。

3. 使用短横线分隔：种命名方式使用了一个短横线将CSS文件和样式分隔，并且使用小写字母和数字组合命名CSS样式。

比如：style-sheet_button.css，style-sheet_footer.css等。

4. 使用下划线分隔：与前一种方式类似，这种方式也是使用小写字母和数字组合命名CSS样式，只是使用下划线（_）做为分隔符。

比如：style_sheet_button.css，style_sheet_footer.css等。

基本上，NASA等大型机构制定的CSS命名规范会以上述四种规范为主，有时会结合多种规范使用，以满足CSS文件的苛刻要求。

下面着重介绍一些常见的CSS命名规范。

1.名时尽量使用有意义的名称：命名时，尽量使用有意义的名称，而不是简单的数字或者字母。

web前端规范-CSS的命名

原则：整个项目的命名风格要统一，id说明特殊性，class说明普遍性。

从模块重用和节约文件体积的角度看，建议id类应尽量减少使用。

class类的命名向模块化发展。

命名风格：常见的命名风格有：1.分隔线 css-style(不推荐)；2.下划线 css_style(次推荐)；3.驼峰式 cssStyle(主推荐)。

没有强制一定用哪种风格，不过同个项目中最好只使用一种风格，除非想表达特殊作用的再用多种风格，但要写好注释说明。

好的命名规范也能体现出语义化。

id 和class：什么时候用id，什么时候用class没有一个绝对的说法。

这里只是提供一个参考。

对于页面的各个结构外层或者特殊部分（比如页面的布局，各个栏目），用id 来说明这个区域是什么内容。

对于页面中可重用的结构或者一些常用的从属结构（比如栏目中的标题，文章，列表等），用class来说明这个小块是什么，表现怎么样。

约定：搜索search不加bar修饰, 比如左边搜索区域, 命名为: searchL。

以此类推, L(左边), R(右边), T(上方), B(下方)。

不管任何模块, 为避开css 过多的命名名称, 比如选项卡tab的标题区域, 用hd命名, 写法为：" .tab .hd " 所有模块, 全部采用hd和bd模式。

另外, 用"Tb"代表表格的缩写，比如表单表格: formTb。

所有css命名采用Java的命名规范, 既是驼峰式的命名方式, 比如"newsList"。

大量模块使用雅虎的hd和bd命名思想（见‘CSS 书写’ 部分），将内层的css类命名简化，减少起名字的次数。

最好不要用id类定义html的模块外观，id类的唯一性比特殊。

比如在两个div中，用了相同的 id，js拿id 交互便会出现问题。

!当我们采用下划线 _ 方式命名的时候在Dreamweaver等工具中双击，即可全选命名。

WEB前端开发规范----css篇

WEB前端开发规范----css篇【1】css样式名的书写规则(页尾附常用模块命名)1.由数字、字母及符号_组成，且首字母不得是_ 。

例如：.header .leftMenu_bar2.驼峰标识书写规则或者"_"符连接规则。

例如：.topNav或者.top_nav3.定义字体样式时，比如字大小，可用"font" + 字体大小+ "字体单位"来定义：.font_12_px .font_14_pt .font_16_em等。

同理：font_simsun、font_microsoft、width_960、width_980、color_red、color_yellow、color_ff6600等。

【2】css属性的书写规则对于具有复合属性的css不允许拆开写，例如：margin-top:10px; margin-right:auto; margin-left:0px; margin-bottom:10px; 应写出：margin:10px auto 0px;【3】css属性的书写顺序建议遵循：布局定位属性->自身属性->文本属性-> 其他属性。

布局定位属性：float、position、top、bottom、left、right、display、visibility、overflow、clear、margin、padding等自身属性：width、height、background、border等文本属性：font、color、text-decoration、text-indent等其他属性：list-style-type、z-index、zoom、cursor等【4】避免使用html标签私有属性定义表现，如table中的align、cellspacing、cellpadding 等，用css对应的text-align、border-spacing、padding来定义【5】css组合的使用对于具有相同属性的多个选择符，禁止重复书写，可用英文逗号（,）隔开选择符。

WEB前端开发规范CSS命名参考

CSS命名规范以上结构可以组合使用，例如：左列标题lefttitle；底部导航footernav 书写原则是： 1.一律小写； 2.尽量用英文； 3.不加中杠和下划线； 4.尽量不缩写，除非一看就明白的单词页头：header登录条：loginBar 标志：logo侧栏：sideBar广告：banner导航：nav子导航：subNav 菜单：menu子菜单：subMenu 搜索：search滚动：scroll页面主体：main 内容：content标签页：tab文章列表：list 提示信息：msg小技巧：tips栏目标题：title 加入：joinus指南：guild服务：service热点：hot新闻：news下载：download注册：regsiter状态：status按钮：btn投票：vote合作伙伴：partner友情链接：friendLink页脚：footer版权：copyRight1.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(如购物车，收银台)当前的current2.另外在编辑样式表时可用的注释可这样写：<– Footer –>内容区<– End Footer –>3.样式文件命名主要的 master.css布局，版面 layout.css专栏 columns.css文字 font.css打印样式 print.css主题 themes.css。

前端开发规范文档

前端开发规范文档规范目的为提高团队协作效率，便于后端开发人员添加功能及前端后期优化维护，输出高质量的代码，特制定该文档。

本规范文档一经确认, 前端开发人员必须按本文档规范进行前端开发。

本文档如有不对或者不合适的地方请及时提出。

经讨论决定后方可更改。

基本准则符合web标准，语义化html，结构表现行为分离，兼容性优良。

页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。

一、html 文件命名及编写规范1、命名规则采用小写英文字母|| _的组合命名，菜单名_功能名称，后缀.html。

如：manage_list.html（管理列表）、manage_add.html（新增）、manage_edit.html（修改）、manage_detail.html（详情）。

同时将页面放在其对应的模块划分目录中。

2、编写规范：(1)文档类型声明及编码统一为html5声明类型“<!DOCTYPE html>”;(2)编码统一为<meta charset="utf-8" />, 书写时利用IDE实现层次分明的缩进;(3)区域块、功能组件以及需要标注的地方，插入注释。

(4)在布局文件结构时，应遵循语义化标签（该用p不要用div、该用ul、li不要用p，h标签应根据标题层级合理利用）、代码结构简单、清晰明了，少用标签、少套结构（一段结构布局中 1个标签能解决的不要用2个，套2层结构能解决的不要套3层）的基本原则。

代码标签、结构嵌套示例：目标效果图代码结构嵌套<ul><li><h4>罗田县九资河徐冲药材</h4><img src=”***.jpg”><div><h3>茯苓</h3><p>小丁</p><p class=”color_red”>32元/公斤</p></div></li></ul>代码分析：根据目标效果图，实现的代码部分别使用了ul/li /h4/ img /div /h3/ p 这些标签。

WEB前端开发规范文档+CSS命名规范

WEB前端开发规范文档+CSS命名规范规范目的为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文须按本文档规范进行前台页面开发. 本文档如有不对或者不合档. 本规范文档一经确认, 前端开发人员必前端开发人员必适的地方请及时提出, 经讨论决定后方可更改.基本准则符合web标准, 语义化html, 结构表现行为分离, 兼容性优良. 页面性能方面, 代码要求简洁明了有解析速度.保证最快的序, 尽可能的减小服务器负载, 保证最快的文件规范1. html, css, js, images文件均归档至<系统开发规范>约定的目录中;2. html文件命名: 英文命名, 后缀.htm. 同时将对应界面稿放于同目录中, 若界面稿命名为中文, 请重功能时查找对应页面;以方便后端添加命名与html文件同名, 以方便后端添加3. css文件命名: 英文命名, 后缀.css. 共用base.css, 首页index.css, 其他页面依实际模块需求命名.;4. Js文件命名: 英文命名, 后缀.js. 共用common.js, 其他依实际模块需求命名.html书写规范1. 文档类型声明及编码: 统一为html5声明类型<!DOCTYPE html>; 编码统一为<meta charset="gbk实现层次分明的缩进;" />, 书写时利用IDE实现层2. 非特殊情况下样式文件必须外链至<head>...</head>之间;非特殊情况下JavaScript文件必须外链至页面底部;3. 引入样式文件或JavaScript文件时, 须略去默认类型声明, 写法如下:Example Source Code []<link rel="stylesheet" href="..." /><style>...</style><script src="..."></script>4. 引入JS库文件, 文件名须包含库名称及版本号及是否为压缩版, 比如jquery-1.4.1.min.js; 引入插件, 文件名格式为库名称+插件名称, 比如jQuery.cookie.js;必须由小写字母及下划线数字组成, 且所有标属性命名5. 所有编码均遵循xhtml标准, 标签 & 属性 & 属性命名签必须闭合, 包括 br (<br />), hr(<hr />)等; 属性值必须用双引号包括;6. 充分利用无兼容性问题的html自身标签, 比如span, em, strong, optgroup, label,等等; 需要为htm首先要考虑下有没有默认的已有的合适标签去设置, 如果没有, 可以使用须l元素添加自定义属性的时候, 首先以"data-"为前缀来添加自定义属性，避免使用"data:"等其他命名方式;7. 语义化html, 如标题根据重要性用h*(同一页面只能有一个h1), 段落标记用p, 列表用ul, 内联元素中不可嵌套块级元素;户名是<8. 尽可能减少div嵌套, 如<div class="box"><div class="welcome">欢迎访问XXX, 您的用您的用欢迎访div class="name">用户名</div></div></div>完全可以用以下代码替代: <div class="box"><p>欢迎问XXX, 您的用户名是<span>用户名</span></p></div>;9. 书写链接地址时, 必须避免重定向，例如：href="/", 即须在URL地址后面加上“/”；10. 在页面中尽量避免使用style属性,即style="…";11. 必须为含有描述性表单元素(input, textarea)添加label, 如Example Source Code []<p>姓名: <input type="text" id="name" name="name" /></p>须写成:<p><label for="name">姓名: </label><input type="text" id="name" /></p>12. 能以背景形式呈现的图片, 尽量写入css样式中;13. 重要图片必须加上alt属性; 给重要的元素和截断的元素加上title;14. 给区块代码及重要功能(比如循环)加上注释, 方便后台添加功能;15. 特殊符号使用: 尽可能使用代码替代: 比如 <(<) & >(>) & 空格( ) & »(») 等等;16. 书写页面过程中, 请考虑向后扩展性;17. class & id 参见 css书写规范.css 书写规范1. 编码统一为utf-8;2. 协作开发及分工: i 会根据各个模块, 同时根据页面相似程序, 事先写好大体框架文件, 分配给前端人员实现内部结构&表现&行为; 共用css 文件base.css 由i 书写, 协作开发过程中, 每个页面请务必都要引入, 此文件包含reset 及头部底部样式, 此文件不可随意修改;3. class 与id 的使用: id 是唯一的并是父级的, class 是可以重复的并是子级的, 所以id 仅使用在大的模块上, class 可用在重复使用率高及子级可用在重复使用率高及子级中; id 原则上都是由我分发框架文件时命名的, 为JavaScript 预留钩子的除外;4. 为JavaScript 预留钩子的命名, 请以 js_ 起始, 比如: js_hide, js_show;5. class 与id 命名: 大的框架命名比如header/footer/wrapper/left/right 之类的在2中由i 统一命名其他样式名称由其他样式名称由小写英文 & 数字 & _ 来组合命名, 如i_comment, fontred, width200; 避免使用中文拼音, 尽量使用简易的单词组合; 总之, 命名要语义化, 简明简明化. 6. 规避class 与id 命名(此条重要, 若有不明白请及时与i 沟通):a, 通过从属写法规避, 示例见d;b, 取父级元素id/class 命名部分命名, 示例见d;c, 重复使用率高的命名, 请以自己代号加下划线起始, 比如i_clear;d, a,b 两条, 适用于在2中已建好框架的页面, 如,Example Source Code []要在2中已建好框架的页面代码<div id="mainnav"></div>中加入新的div 元素,按a 命名法则: <div id="mainnav"><div class="firstnav">...</div></div>,样式写法: #mainnav .firstnav{.......}按b 命名法则: <div id="mainnav"><div class="main_firstnav">...</div></div>,样式写法: .main_firstnav{.......}7. css 属性书写顺序, 建议遵循: 布局定位属性-->自身属性-->文本属性-->其他属性. 此条可根据自身习惯书写, 但尽量保证同类属但尽量保证同类属性写在一起.Example Source Code []属性列举:布局定位属性主要包括: display & list-style & position （相应（相应的 top,right,bottom,left ）＆ float & clear ＆ visibility ＆ overflow ；自身属性主要包括: width & height & margin & padding & border & background;文本属性主要包括：color & font & text-decoration & text-align & vertical-align & white- space & 其他 & content;我所列出的这些属性只是最常用到的, 并不代表全部;8. 书写代码前, 考虑并提高样式重复使用率;9. 充分利用html 自身属性及样式继承原理减少代码量, 比如:Example Source Code []<ul class="list"><li>这儿是标题列表<span>2010-09- 15</span></ul>定义定义ul.list li{position:relative} ul.list li span{position:absolute; right:0}即可实现日期居右显示即可实现日期居右显示10. 样式表中中文字体名, 请务必转码成unicode 码, 以避免编码错误时乱码;11. 背景图片请尽可能使用sprite 技术, 减小http 请求, 考虑到多人协作开发, sprite 按模块制作; 12. 使用table 标签时(尽量避免使用table 标签), 请不要用width/ height/cellspacing/cellpadding 等t able 属性直接定义表现, 应尽可能的利用table 自身私有属性分离结构与表现 , 如Example Source Code []thead,tr,th,td,tbody,tfoot,colgroup,scope;(cellspaing 及cellpadding 的css 控制方法:table{border:0;margin:0;border-collapse:collapse;} table th, table td{padding:0;} ,base.css 文件中我会初始化表格样式)13. 杜绝使用<meta http-equiv="X-UA-Compatible" content="IE=7" /> 兼容 ie8;14. 用png 图片做图片时, 要求图片格式为png-8格式,若png-8实在影响图片质量或其中有半透明效果, 请为ie6单独定义背景:Example Source Code []_background:none;_filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=crop, (sizingMethod=crop, src=’img/bg.png’);src=’img/bg.png’);15. 避免兼容性属性的使用, 比如text-shadow || css3的相关属性;16. 减少使用影响性能的属性, 比如position:absolute || float ;17. 必须为大区块样式添加注释, 小区块适量注释;18. 代码缩进与格式: 建议单行书写, 可根据自身习惯, 后期优化i 会统一处理;JavaScript 书写规范1. 文件编码统一为utf-8, 书写过程过, 每行代码结束必须有分号; 原则上所有功能均根据XXX 项目需求原生开发, 以避免网上down 下来的代码造下来的代码造成的代码污染(沉冗代码 || 与现有代码冲突 || ...); 2. 库引入: 原则上仅引入jQuery 库, 若需引入第三方库, 须与团队其他人员讨论决定;3. 变量命名: 驼峰式命名. 原生JavaScript 变量要求是纯英文字母, 首字母须小写, 如iTaoLun;Example Source Code []jQuery 变量要求首字符为'_', 其他与原生JavaScript 规则相同, 如: _iTaoLun;另, 要求变量集中声明, 避免全局变量.4. 类命名: 首字母大写, 驼峰式命名. 如 ITaoLun;5. 函数命名: 首字母小写驼峰式命名. 如iTaoLun();6. 命名语义化, 尽可能利用英文单词或其缩写;7. 尽量避免使用存在兼容性及消耗资源的方法或属性, 比如eval() & innerText;8. 后期优化中, JavaScript 非注释类中文字符须转换成unicode 编码使用, 以避免编码错误时乱码显示; 9. 代码结构明了, 加适量注释. 提高函数重用率;10. 注重与html 分离, 减小reflow, 注重性能.图片规范1. 所有页面元素类图片均放入img 文件夹, 测试用图片放于img/demoimg 文件夹;2. 图片格式仅限于gif || png || jpg;3. 命名全部用小写英文字母 || 数字 || _ 的组合，其中不得包含汉字 || 空格 || 特殊字符；尽量用易懂的词汇, 便于团队其他成员理解; 另, 命名分头尾两部分, 用下划线隔开, 比如ad_left01.gif || btn_submit.gif;4. 在保证视觉效果的情况下选择最小的图片格式与图片质量, 以减少加载时间;5. 尽量避免使用半透明的png 图片(若使用, 请参考css 规范相关说明);6. 运用css sprite 技术集中小的背景图或图标, 减小页面http 请求, 但注意, 请务必在对应的sprite psd 源图中划参考线, 并保存至img 目录目录下.注释规范 1. html 注释: 注释格式 , '--'只能在注释的始末位置,不可置入注释文字区域; 2. css 注释: 注释格式 /*这儿是注释*/;3. JavaScript 注释, 单行注释使用'//这儿是单行注释' ,多行注释使用 /* 这儿有多行注释 */;开发及测试工具约定建议使用Aptana || Dw || Vim , 亦可根据自己喜好选择, 但须遵循如下原则:1. 不可利用IDE 的视图模式'画'代码;2. 不可利用IDE 生成相关功能代码, 比如Dw 内置的一些功能js;3. 编码必须格式化, 比如缩进;测试工具: 前期开发仅测试FireFox & IE6 & IE7 & IE8 , 后期优化时加入Opera & Chrome & Safari; 建议测试顺序: FireFox-->IE7-->IE8-->IE6-->Opera-->Chrome-->Safari, 建议安装firebug 及IE Tab Plus 插件.其他规范1. 开发过程中严格按分工完成页面, 以提高css 复用率, 避免重复开发;2. 减小沉冗代码, 书写所有人都可以看的懂的代码. 简洁易懂是一种美德. 为用户着想, 为服务器着想.DIV+CSS 命名规范1.CSS ID 的命名外套：套： wrap主导航：主导航： mainnav子导航：子导航： subnav页脚：脚： footet整个页面：整个页面： content页眉：眉： header页脚：脚： footer商标：标： label标题：题： title主导航：主导航： mainbav （globalnav ）顶导航：顶导航： topnav边导航：边导航： sidebar左导航：左导航： leftsidebar右导航：右导航： rightsidebar旗志：志： logo标语：语： banner菜单内容1： menu1 content菜单容量：菜单容量： menu container子菜单：子菜单： submenu边导航图标：sidebarIcon注释：注释： note面包屑：面包屑： breadcrumb(即页面所处位置导航提示）即页面所处位置导航提示）容器：容器： container内容：内容： content搜索：搜索： search登陆：登陆： Login功能区：功能区： shop(如购物车，收银台)当前的当前的 current2.另外在编辑样式表时可用的注释可这样写： <-- Footer -->内容区内容区<-- End Footer -->3.样式文件命名主要的主要的 master.css布局，版面布局，版面 layout.css专栏专栏 columns.css文字文字 font.css打印样式打印样式 print.css主题主题 themes.css。

(完整word版)WEB前端开发代码使用要求规范.docx

实用文档WEB前端代码规范规范目的为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。

本规范文档一经确认，前端开发人员必须按本文档规范进行前台页面开发。

本文档如有不对或者不合适的地方请及时提出，经讨论决定后方可更改。

基本准则符合 web标准；语义化 html ；结构、表现、行为分离；兼容性优良。

页面性能方面，代码要求简洁明了有序，尽可能的减小服务器负载，保证最快的解析速度。

文件规范1.Html， css ，js ，images 文件均归档至相应约定的目录中。

cssimagesbackStagejs后台模⋯⋯cssWebRootimagesfrontStagejsWEB-INF前台模⋯⋯全局公共模⋯⋯2. html 文件命名：英文驼峰式命名，文件名.html 。

按实际模块需求命名。

3.jsp 文件命名：英文峰式命名，文件名 .jsp 。

按模需求命名。

4.css 文件命名：英文峰式命名，文件名 .css 。

共用 base.css ，首 index.css ，其他面按模需求命名。

5.js 文件命名：英文峰式命名，文件名 .js 。

共用 common.js，其他依模需求命名。

html 书写规范1. 文档型声明及：一html5的声明型<!DOCTYPE html>；一<meta charset="utf-8"/>，写利用IDE 次分明的。

2.非特殊情况下 css 文件必在 <head>...</head> 之引入， link 方式引入而非@import 形式。

3.非特殊情况下 js 文件必在面底部引入。

4.引入式文件或 JavaScript 文件，略去默型声明，写法如下：<link rel="stylesheet"href="..."/><style>...</style><script src="..."></script>5.引入 JS 文件，文件名包含名称及版本号及是否版，比如： jquery-1.4.1.min.js ；6.引入插件，文件名格式名称 +插件名称，比如： jQuery.cookie.js 。

CSS前端规范

前端CSS 规范大全本文转载自标点符，文章整理了Web前端开发中的各种CSS规范，包括文件规范、注释规范、命名规范、书写规范、测试规范等。

一、文件规范1、文件均归档至约定的目录中（具体要求以豆瓣的CSS规范为例进行讲解）：所有的CSS分为两大类：通用类和业务类。

通用的CSS文件，放在如下目录中：∙基本样式库/css/core∙通用UI元素样式库/css/lib∙JS组件相关样式库/css/ui业务类的CSS是指和具体产品相关的文件，放在如下目录中：∙读书/css/book/∙电影/css/movie/∙音乐/css/music/∙社区/css/sns/∙小站/css/site/∙同城/css/location/∙电台/css/radio/外联CSS文件适用于全站级和产品级通用的大文件。

内联CSS文件适用于在一个或几个页面共用的CSS。

另外一对具体的CSS进行文档化的整理。

如：∙util-01 reset /css/core/reset.css∙util-02 通用模块容器/css/core/mod.css∙ui-01. 喜欢按钮/css/core/fav_btn.css∙ui-02. 视频/相册列表项/css/core/media_item.css∙ui-03. 评星/css/core/rating.css∙ui-04. 通用按钮/css/core/common_button.css∙ui-05. 分页/css/core/pagination.css∙ui-06. 推荐按钮/css/core/rec_btn.css∙ui-07. 老版对话框/css/core/old_dialog.css∙ui-08. 老版Tab /css/core/old_tab.css∙ui-09. 老版成员列表/css/core/old_userlist.css∙ui-10. 老版信息区/css/core/notify.css∙ui-11. 社区用户导航/css/core/profile_nav.css∙ui-12. 当前大社区导航/css/core/site_nav.css∙ui-13. 加载中/css/lib/loading.css2、文件引入可通过外联或内联方式引入link和style标签都应该放入head中，原则上，不允许在html上直接写样式。

前端开发规范手册

前端开发规范手册前端开发规范手册一、命名规范1. 文件名使用小写字母，并且以连字符（-）连接。

2. 类型命名使用大驼峰命名法，例如：UserInfo。

3. 函数和变量使用小驼峰命名法，例如：getUserInfo。

4. CSS类名使用小写字母，并且以连字符（-）连接，例如：user-info。

二、代码规范1. 使用两个空格缩进代码。

2. 代码段之间加入空行，以提高可读性。

3. 对于较长的代码行，可以使用反斜杠（\）进行分行。

4. 尽量避免使用全局变量，使用局部变量和函数封装来避免变量冲突。

5. 删除不必要的空格、空行和注释。

三、HTML规范1. 缩进使用两个空格。

2. 使用语义化标签，例如：header、nav、section、article、aside等。

3. 尽量避免使用行内样式，使用外部CSS文件来处理样式。

4. 使用双引号来引用属性值。

四、CSS规范1. 使用CSS预处理器，例如：Sass或Less，来提高代码复用性和可维护性。

2. 使用规范的命名方式来命名CSS类名。

3. 使用缩写属性来减少代码量，例如：margin、padding、border等。

4. 使用CSS代码压缩工具来减少文件大小。

五、JavaScript规范1. 使用严格模式，使用"use strict"指令。

2. 避免使用全局变量，使用模块化的方式来封装代码。

3. 使用ES6的新特性来提高代码质量和可读性，例如：箭头函数、解构赋值、模板字符串等。

4. 避免使用eval函数，尽量使用其他方法来解决问题。

5. 使用事件委托方式来处理事件，减少事件监听器的数量。

六、图片规范1. 使用合适的图片格式，例如：JPEG、PNG、GIF等。

2. 压缩图片文件大小，使用压缩工具来减小文件大小。

3. 使用CSS Sprite技术来减少HTTP请求次数。

4. 使用图片懒加载技术来提高页面加载速度。

七、性能规范1. 删除不必要的代码和文件，减少HTTP请求次数。

web前端--css命名规范及常用命名

页⾯结构命名作⽤wrap 外套、包裹，⽤于最外层wrapper 外套，⽤于页⾯外围控制整体布局宽度box 盒⼦，容器header 头部，⽤于页头部分nav 导航，主导航main主要区域，内容主体content/container 内容，内容容器常⽤的⽂件命名命名作⽤全局样式global.css 布局结构layout.css 基本共⽤base.css 综合样式style.css 主要的master.css 模块module.css 表单forms.cssweb 前端--css 命名规范及常⽤命名命名规范1、主要的、重要的、特殊的、最外层的盒⼦使⽤ ID 属性命名，其他的都使⽤ class 属性命名。

2、命名规则须以内容优先，表现为辅。

⾸先根据所要呈现的内容、功能来命名，如果内容实在⽆法找到合适的命名，可以再根据表现命名。

3、⼤多数情况下，命名都使⽤英⽂单词，可以增加代码的可读性，但特殊情况下，实在找不到合适的单词时，可以使⽤拼⾳命名，但必须简明，结构清晰。

4、ID 和 Class 命名尽量全部都使⽤⼩写，多个单词可以使⽤连字符（-）链接，命名可以使⽤数字，但不能以数字开头。

5、命名可以使⽤单词缩写，但必须确保是有效的缩写，即别⼈能看懂，不能⾃定义缩写。

属性的书写顺序属性的书写顺序对于浏览器来说没有区别，除了优先级覆盖之外。

但是如果顺序保持⼀致的话，扫⼀眼可以很快地知道这个选择器有什么类型的属性影响了它，所以⼀般要把⽐较重要的属性放前⾯。

⽐较建议的顺序是这样的：CSS 常⽤命名在前端开发中，规范使⽤ DIV+CSS 命名，可以增强团队合作提⾼开发效率，有利于页⾯后期的维护和优化。

sidebar侧边栏footer底部，⽤于页脚部分页⾯结构命名作⽤主题/⽹页换肤themes.css字体font.css打印print.css补丁mend.css常⽤的⽂件命名命名作⽤产品相关命名命名作⽤keyword关键词。

web前端开发命名规则

web前端开发命名规则在web前端开发中，命名规则是确保代码可读性、可维护性和可扩展性的重要因素。

一个良好的命名规则可以使代码更加清晰、易于理解和修改。

以下是一些建议的web前端开发命名规则：1.文件命名规则o统一使用小写的英文字母、数字和下划线的组合，避免使用汉字和特殊字符。

o文件名应该具有描述性，能够清晰地表达文件的用途或内容。

o对于动态文件，可以使用性质描述作为文件名的一部分，例如“register_form.aspx”表示注册表单。

o对于不同模块之间的文件，可以使用前缀来区分，例如“module1_script.js”和“module2_style.css”。

2.变量和函数命名规则o变量和函数名应该具有描述性，能够清晰地表达其用途或功能。

o变量名应该使用小写字母和下划线的组合，例如“user_id”。

o函数名应该使用小写字母和下划线的组合，例如“get_user_info”。

o对于复杂的变量或函数，可以使用驼峰命名法，例如“userName”。

3.类和对象命名规则o类名应该使用大写字母开头的驼峰命名法，例如“User”。

o对象名应该使用小写字母开头的驼峰命名法，例如“user”。

4.HTML元素命名规则o HTML元素应该使用小写字母开头的驼峰命名法，例如“div”或“span”。

o对于自定义的HTML元素或属性，应该使用小写字母和下划线的组合，例如“data-user-id”。

5.CSS类和ID命名规则o CSS类名应该使用小写字母开头的驼峰命名法，例如“.my-class”。

o CSSID名应该使用小写字母开头的驼峰命名法，例如“#my-id”。

o对于复杂的CSS类或ID，可以使用前缀来区分，例如“.btn-primary”表示主要的按钮样式。

6.注释命名规则o注释应该具有描述性，能够清晰地解释代码的作用或意图。

o注释应该使用英文进行编写，以便于国际化的理解和交流。

7.代码缩进和排版规则o代码应该具有整齐的缩进和排版，以便于阅读和理解。

WEB前端开发规范文档

WEB前端开发规范文档一、命名规范1. 文件和文件夹名使用小写字母和短横线命名，例如：index.html2. CSS类名使用小写字母和短横线命名，例如：header-section3. JavaScript变量使用驼峰命名法，例如：userName4. 函数名使用驼峰命名法，例如：getUserInfo5.常量名全部大写，并使用下划线分隔，例如：MAX_COUNT6. HTML id和name属性使用小写字母和短横线命名，例如：user-name二、代码风格1.缩进使用四个空格2. CSS、JavaScript代码使用分号结尾3.避免使用全局变量，尽量使用局部变量4.函数和条件语句使用花括号包裹5.注释注明代码的功能和注意事项，方便他人阅读代码6.使用合适的空格和换行符，增强代码的可读性三、HTML规范2. 为所有的图片和链接添加alt属性，以提高可访问性3.避免使用行内样式，使用CSS样式表来管理样式4. 使用语义化的class和id名称，以增强代码可读性和可维护性四、CSS规范1.避免使用行内样式2. 在选择器中不要使用ID选择器，尽量使用class选择器3. 使用属性值缩写来减少代码量，例如：margin: 10px 5px;4. 避免使用!important，除非必要5. 建议使用CSS预处理器，如Sass或Less6. 使用CSS reset或normalize来统一各个浏览器的样式差异7. 书写顺序：布局属性 > 自身属性 > 文本属性 > 其他属性，例如：display, width, height, margin, padding, font-size, color五、JavaScript规范1. 使用严格模式，即在脚本文件的开头添加"use strict"2. 使用let和const关键字来声明变量和常量，避免使用var3. 使用单引号来定义字符串，例如：'Hello'4.避免使用全局变量，尽量使用模块化的方式组织代码5. 避免使用eval、with等容易引起安全问题的功能6. 使用ESLint来检查代码风格和潜在错误六、版本控制规范1. 使用git来管理代码，建议使用分支开发，不要直接在主分支上进行开发2.提交代码时必须编写有意义的提交信息，并按照规定的提交流程进行提交3.定期合并主分支的更新到自己的分支，保持代码的同步和整洁4.不要提交包含有敏感信息或测试用的临时代码的提交5.多人合作时，及时进行代码审核和讨论，确保代码质量和可维护性以上是一个WEB前端开发规范文档的示例。

前端开发规范：命名规范、html规范、css规范、js规范

前端开发规范：命名规范、html规范、css规范、js规范上周⼩组的培训内容是代码可读性艺术，主要分享如何命名、如何优化代码排版，如何写好的注释。

我们都知道写出优雅的代码是成为⼤⽜的必经之路。

下⾯感谢⼀位前端开发⼩伙伴总结的前端开发规范，通过学习相关开发规范，提升⾃⼰代码的可读性。

⼀个好的程序员肯定是要能书写可维护的代码，⽽不是⼀次性的代码，怎么能让团队当中其他⼈甚⾄⼀段时间时候你再看你某个时候写的代码也能看懂呢，这就需要规范你的代码了。

我是有⼀点强迫症的⼈，上周我们后端给我了⼀个CanUsename的接⼝（该接⼝的⽬的是判断输⼊的⽬的地是否是4级⽬的地），我真的是崩溃的。

我只是觉得这个名字不够语义化，但是让我⾃⼰想⼀个名字我⼜想不出来，于是我就在想，如果有⼀套命名规范的话，那么以后起名字就不⽤发愁了，直接按照规范来就好了~于是端午在家就百度了⼀下~命名驼峰式命名法介绍Pascal Case ⼤驼峰式命名法：⾸字母⼤写。

eg：StudentInfo、UserInfo、ProductInfoCamel Case ⼩驼峰式命名法：⾸字母⼩写。

eg：studentInfo、userInfo、productInfo⽂件资源命名⽂件名不得含有空格⽂件名建议只使⽤⼩写字母，不使⽤⼤写字母。

( 为了醒⽬，某些说明⽂件的⽂件名，可以使⽤⼤写字母，⽐如README、LICENSE。

)⽂件名包含多个单词时，单词之间建议使⽤半⾓的连词线 ( - ) 分隔。

引⼊资源使⽤相对路径，不要指定资源所带的具体协议 ( http:,https: ) ，除⾮这两者协议都不可⽤。

不推荐：<script src="/foundation.min.js"></script>推荐<script src="///foundation.min.js"></script>变量命名命名⽅式 : ⼩驼峰式命名⽅法命名规范 : 类型+对象描述的⽅式，如果没有明确的类型，就可以使前缀为名词类型⼩写字母array aboolean bfunction fnint iobject oregular rstring s推荐var tableTitle = "LoginTable"不推荐var getTitle = "LoginTable"函数命名⽅式 : ⼩驼峰⽅式 ( 构造函数使⽤⼤驼峰命名法 )命名规则 : 前缀为动词动词含义返回值can判断是否可执⾏某个动作 ( 权限 )函数返回⼀个布尔值。

web前端开发企业级CSS常用命名，书写规范总结

web前端开发企业级CSS常⽤命名，书写规范总结1.常⽤命名标题: 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　简介：profiles 评论：comment2.ID命名(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 版权：copyright3.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 { }推荐的CSS书写顺序相关的属性声明应当归为⼀组，并按照下⾯的顺序排列：PositioningBox modelTypographicVisual由于定位（positioning）可以从正常的⽂档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在⾸位。

web前端开发_文件目录样式函数等命名规范

web前端开发_⽂件⽬录样式函数等命名规范页⾯的命名规则1. 统⼀⽤翻译的英⽂命名（推荐）2. 统⼀⽤拼⾳命名（拼⾳的简化也可）3. 如果⽂件名过长，企业要提前约定⼀份缩写的规范，如pro—product例如：⾸页—index产品列表—prolist产品详细页⾯—prodetail新闻列表—newslist新闻详细页⾯—newsdetail发展历史—history关于我们—aboutus联系我们—linkus，contactus信息反馈—feedback留⾔—leavewords图⽚命名规范图⽚的名称分为头尾两部分，⽤下划线隔开，头部表⽰此图⽚的⼤类性质，例如⼴告，标志，菜单，按钮等banner：放置在页⾯顶部的⼴告，装饰图案等长⽅形的图⽚logo：标志性的图⽚button：在页⾯上位置不固定，并且带有链接的⼩图⽚menu：在页⾯中某⼀位置连续出现，性质相同的链接栏⽬的图⽚pic：装饰⽤的图⽚例⼦：banner_sohu.gif, banner_sina.gifmenu_aboutus.gif,menu_job.giftitle_news.giflogo_police.gifpic_people.gifCSS样式命名外套 wrap ------------------⽤于最外层头部 header ----------------⽤于头部主要内容 main ------------⽤于主体内容（中部）左侧 main-left -------------左侧布局右侧 main-right -----------右侧布局导航条 nav -----------------⽹页菜单导航条内容 content ---------------⽤于⽹页中部主体底部 footer -----------------⽤于底部DIV+CSS命名参考表：CSS样式命名说明⽹页公共命名#wrapper页⾯外围控制整体布局宽度#container或#content容器,⽤于最外层#layout布局#head, #header页头部分#foot, #footer页脚部分#nav主导航#subnav⼆级导航#menu菜单#submenu⼦菜单#sideBar侧栏#sidebar_a, #sidebar_b左边栏或右边栏#main页⾯主体#tag标签#msg #message提⽰信息#tips⼩技巧#tips⼩技巧#vote投票#friendlink友情连接#title标题#summary摘要#loginbar登录条#searchInput搜索输⼊框#hot热门热点#search搜索#search_output搜索输出和搜索结果相似#searchBar搜索条#search_results搜索结果#copyright版权信息#branding商标#logo⽹站LOGO标志#siteinfo⽹站信息#siteinfoLegal法律声明#siteinfoCredits信誉#joinus加⼊我们#partner合作伙伴#service服务#regsiter注册arr/arrow箭头#guild指南#sitemap⽹站地图#list列表#homepage⾸页#subpage⼆级页⾯⼦页⾯#tool, #toolbar⼯具条#drop下拉#dorpmenu下拉菜单#status状态#scroll滚动.tab标签页.left .right .center居左、中、右.news新闻.download下载.banner⼴告条(顶部⼴告条)电⼦贸易相关.products产品.products_prices产品价格.products_description产品描述.products_review产品评论.editor_review编辑评论.news_release最新产品.publisher⽣产商.screenshot缩略图.faqs常见问题.keyword关键词.blog博客.forum论坛CSS⽂件命名说明master.css,style.css主要的module.css模块base.css基本共⽤layout.css布局，版⾯themes.css主题columns.css专栏font.css⽂字、字体forms.css表单mend.css补丁print.css打印js函数命名规范函数命名：统⼀使⽤动词或者动词+名词形式 ---- fnInit()对象⽅法命名使⽤fn+对象类名+动词+名词形式 fnAnimateDoRun()某事件响应函数命名⽅式为fn+触发事件对象名+事件名或者模块名 fnDivClick()附常⽤的动词列表：get 获取/set 设置, add 增加/remove 删除create 创建/destory 移除 start 启动/stop 停⽌open 打开/close 关闭, read 读取/write 写⼊load 载⼊/save 保存, create 创建/destroy 销毁begin 开始/end 结束, backup 备份/restore 恢复import 导⼊/export 导出, split 分割/merge 合并inject 注⼊/extract 提取, attach 附着/detach 脱离bind 绑定/separate 分离, view 查看/browse 浏览edit 编辑/modify 修改, select 选取/mark 标记copy 复制/paste 粘贴, undo 撤销/redo 重做insert 插⼊/delete 移除, add 加⼊/append 添加clean 清理/clear 清除, index 索引/sort 排序find 查找/search 搜索, increase 增加/decrease 减少play 播放/pause 暂停, launch 启动/run 运⾏compile 编译/execute 执⾏, debug 调试/trace 跟踪observe 观察/listen 监听, build 构建/publish 发布input 输⼊/output 输出, encode 编码/decode 解码encrypt 加密/decrypt 解密, compress 压缩/decompress 解压缩pack 打包/unpack 解包, parse 解析/emit ⽣成connect 连接/disconnect 断开, send 发送/receive 接收download 下载/upload 上传, refresh 刷新/synchronize 同步update 更新/revert 复原, lock 锁定/unlock 解锁check out 签出/check in 签⼊, submit 提交/commit 交付push 推/pull 拉, expand 展开/collapse 折叠begin 起始/end 结束, start 开始/finish 完成enter 进⼊/exit 退出, abort 放弃/quit 离开obsolete 废弃/depreciate 废旧, collect 收集/aggregate 聚集常⽤的⽂件命名rc，source源代码，⽤src居多test，__tests__测试⽂件，也经常⽤__test__，facebook的测试框架jest默认的测试⽂件⽬录就是__test__ docs⽂档lib库⽂件，library的缩写dist⽤来放打包编译后的⽂件，应该是distribution的缩写build，scripts构建脚本utils，tools，helpers⼯具代码controllers，views，middlewares，modelsMVC对应的models，views，controllers，还有中间件middlewaresrouter路由server⽤来放服务端代码adapters适配器，适配器模式是⼀种很常⽤的设计模式legacy⼀般⽤来放兼容历史版本或兼容旧浏览器的代码config配置⽂件benchmarksbenchmarks测试，⼜叫基准测试或性能测试。