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命名及书写规范CSS命名规范一．文件命名规范全局样式：global.css；框架布局：layout.css；字体样式：font.css；链接样式：link.css；打印样式：print.css；二．常用类/ID命名规范页眉：header内容：content容器：container页脚：footer版权：copyright导航：menu主导航：mainMenu子导航：subMenu标志：logo标语：banner标题：title侧边栏：sidebar图标：Icon注释：note搜索：search按钮：btn登录：login链接：link信息框：manage……常用类的命名应尽量以常见英文单词为准，做到通俗易懂，并在适当的地方加以注释。
对于二级类/ID命名，则采用组合书写的模式，后一个单词的首字母应大写：诸如―搜索框‖则应命名为―searchInput‖、―搜索图标‖命名这―searchIcon‖、―搜索按钮‖命名为―searchBtn‖……CSS书写规范及方法一. 常规书写规范及方法1. 选择DOCTYPE：XHTML 1.0 提供了三种DTD声明可供选择：过渡的(Transitional):要求非常宽松的DTD，它允许你继续使用HTML4.01的标识(但是要符合xhtml的写法)。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Transitional//EN‖―/TR/xhtml1/DTD/xhtml1-transitional.dtd―>严格的(Strict):要求严格的DTD，你不能使用任何表现层的标识和属性，例如<br>。
完整代码如下：<!DOCTYPE html PUBLIC ―-//W3C//DTD XHTML 1.0 Strict//EN‖―/TR/xhtml1/DTD/xhtml1-strict.dtd―>框架的(Frameset):专门针对框架页面设计使用的DTD，如果你的页面中包含有框架，需要采用这种DTD。
WEB前端开发规范方案文档
WEB前端开发规范方案文档一、概述本文档旨在规范前端开发团队的开发流程和编码规范，以提高代码的可读性、可维护性和可扩展性。
本规范适用于Web前端开发工作，包括HTML，CSS和JavaScript等相关技术。
二、项目目录规范1.项目根目录下应包含以下文件或文件夹：- index.html：项目的入口文件；- css文件夹：存放项目的css文件；- js文件夹：存放项目的JavaScript文件；- images文件夹：存放项目的图片文件；- fonts文件夹：存放项目的字体文件；- libs文件夹：存放项目的第三方库文件；- README.md：项目的说明文档。
2.CSS文件命名规范- 使用小写字母和中划线来命名文件，如：main.css；- 使用语义化的名称来命名文件，如：reset.css；- 对于一些通用的样式文件，可以使用常见的名称，如：normalize.css。
3. JavaScript文件命名规范- 使用驼峰命名法来命名文件，如：app.js；- 使用语义化的名称来命名文件，如：utils.js；- 对于一些通用的JavaScript文件，可以使用常见的名称，如：jquery.js。
三、HTML规范2.缩进和换行- 使用两个空格的缩进来表示嵌套关系，不使用tab键；3.属性顺序- 属性应按照以下顺序书写：class、id、data-*、style、src、href、alt、title等。
四、CSS规范1.样式命名规范- 使用小写字母和中划线来命名样式，如：header-title；- 使用语义化的名称来命名样式，如：main-container；-避免使用缩写，提高代码的可读性和可维护性。
2.CSS选择器规范- 使用类选择器来选中元素，不使用id选择器，以免造成样式的耦合性和难以维护性；-避免使用通配符选择器；-避免使用嵌套选择器，以免造成样式的复杂性和性能问题。
3.代码注释规范-使用注释来说明代码的用途和作用；-使用块注释来注释一整段代码，使用行注释来注释一行代码。
前端命名规范
前端命名规范前端命名规范是一种约定俗成的规则，旨在保证代码的可读性和维护性，使团队成员能够更加高效地协作开发。
下面是一些常见的前端命名规范：1. 文件和文件夹命名规范- 文件名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：index.html, main.css。
- 文件夹名也应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：images, scripts。
2. HTML/CSS命名规范- HTML和CSS中的类名和ID名应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：header-wrapper, main-content。
- 避免使用无意义的命名，应该根据元素的作用和意义来命名。
3. JavaScript命名规范- 变量和函数名应该使用驼峰式命名法，即第一个单词的首字母小写，后面的单词的首字母大写，例如：firstName, getUserInfo。
- 常量名应该使用全大写字母，多个单词之间使用下划线“_”分隔，例如：MAX_NUM, API_URL。
- 类名应该使用帕斯卡命名法，即所有单词的首字母都大写，例如：Person, UserService。
4. 图片命名规范- 图片命名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：logo.png, slide-image.jpg。
5. URL命名规范- URL路径应该使用小写字母，多个单词之间使用连字符“-”分隔，例如：/news-list, /contact-us。
6. Git分支和提交规范- Git分支名应该使用有意义的名词或描述性的名词短语，多个单词之间使用连字符“-”分隔，例如：feature/login,hotfix/bug-fix。
- Git提交消息应该简明扼要地描述所做的更改，可以包括关键词和操作，例如：Add login form validation, Fix broken link。
WEB前端开发代码使用要求规范
WEB前端开发代码使用要求规范1.编码规范- 使用标准的HTML、CSS和JavaScript语法。
-使用缩进和空格来提高代码的可读性。
-使用注释来解释代码的目的和功能。
2.文件和目录结构规范-使用有意义的文件和目录命名，方便其他开发人员寻找代码。
-在项目中使用统一的目录结构，例如将HTML文件存放在一个文件夹中，将样式文件存放在另一个文件夹中，以此类推。
3.HTML规范- 避免在HTML中直接写入样式和脚本代码，应将样式和脚本代码分离到对应的CSS和JavaScript文件中。
4.CSS规范-使用适当的选择器，避免过多的嵌套。
-避免使用内联样式，应将样式写在CSS文件中，以提高可维护性。
- 使用合适的样式命名规则，例如使用BEM(Block-Element-Modifier)命名规则，或其他约定俗成的命名规则。
5. JavaScript规范-使用合适的变量和函数命名，提高代码的可读性。
-避免使用全局变量，应将变量和函数封装在模块中。
- 使用严格模式(`use strict`)，避免不规范的语法和行为。
- 避免使用`eval`和`with`等不安全的代码。
-在循环中使用合适的终止条件，避免死循环。
6.代码结构规范-代码应具有良好的组织结构，例如使用模块化的方式来组织代码。
-尽量遵循单一职责原则，每个函数和类应该只负责一件事情。
-提取重复的代码块，封装成函数或类，以提高代码的复用性。
-不要写过长的函数或类，应该根据需要进行拆分和重构。
7.注释规范-使用注释来解释代码的目的和功能，特别是代码的复杂部分。
-注释应该清晰、简洁，方便其他开发人员理解代码。
-避免使用无用的注释，注释应该随着代码的变化而更新。
总之，遵守WEB前端开发代码使用要求规范能够提高代码的质量和开发效率，减少错误和维护成本。
同时，还能提高团队合作的效率，方便其他开发人员理解和修改代码。
因此，在进行WEB前端开发时应该积极遵守和推崇相关规范。
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标准，语义化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前端开发规范
WEB前端开发规范WEB前端开发规范WEB前端开发规范目录1、规范目的2、基本准则3、文件规范4、文件规范5、html书写规范6、css书写规范7、JavaScript书写规范8、图片规范9、注释规范10、开发及测试工具约定11、其他规范12、CSSHack1规范目的为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,同是为网站有一个更好的前端架构，网站的发展及未来打好一个基础。
本文档如有不对或者不合适的地方请提出来,基本准则符合web标准,语义化html,结构表现行为分离,兼容性优良.页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度.文件规范3.1、html,css,js,images文件均归档至约定的目录中;23 3.2、html文件命名:命名以中文命名，依实际模块命名，如果同一模块以_&title&_来组合命名,以方便添加功能时查找对应页面，团结里的相互理解。
例如：我的好股网里的TAB命名大模块名称_小模块的titile.html我的好股网_关注的微博.html3.3、css文件命名:英文命名,后缀.css.初始化样式reset.css，其他样式依实际模块页面需求命名，共用样式一般以模块考虑来划分命名,如有改版修改的css文件可以采用&_时间日期例如：微博改版版块名称_时间日期.cssnew_blog_1212.css4.4、Js文件命名:英文命名,后缀.js.共用common.js,其他依实际模块需求命名.5.5、图片命名:4html书写规范4.1、文档类型声明及编码:统一用;编码统一为。
目的:统一性和网站提高开发合作效率。
4.2、非特殊情况下样式文件必须外链至之间;非特殊情况下JavaScript文件必须外链至页面底部之前;目的:网站的优化。
4.3、所有编码均遵循xhtml标准,标签&属性&属性命名必须由小写字母及下划线数字组成,且所有标签必须闭合,包括br(),hr()等;属性值必须用双引号包括;目的:更加符合web标准(w3c),也有利于seo。
(完整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命名规范大全网页制作中规范使用DIV+CSS命名规则，可以改善优化功效特别是团队合作时候可以提供合作制作效率，具体DIVCSS命名规则CSS命名大全内容如下：页头：header如：#header{属性:属性值;}或.header{属性:属性值;},也许你需要了解class与id 区别及用法登录条：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版权：copyRight常用配合标签div、h1、h2、h3、h4、span、em、b、strong、font、u 1.CSS的ID的命名也许你需要了解class与Id区别外套：wrap主导航：mainNav子导航：subnav页脚：footer整个页面：content页眉：header版权：copyRight商标：label标题：title主导航：mainNav(globalNav)顶导航：topnav边导航：sidebar左导航：leftsideBar右导航：rightsideBar旗志：logo标语：banner菜单内容1：menu1Content菜单容量：menuContainer子菜单：submenu边导航图标：sidebarIcon注释：note面包屑：breadCrumb(即页面所处位置导航提示)容器：container内容：content搜索：search登陆：login功能区：shop(如购物车，收银台)当前：currentDIV+CSS命名小结：无论是使用“.”（小写句号）选择符号开头命名，还是使用“#”(井号)选择符号开头命名都无所谓，但我们最好遵循，主要的、重要的、特殊的、最外层的盒子用“#”(井号)选择符号开头命名，其它都用“.”（小写句号）选择符号开头命名，同时考虑命名的CSS选择器在HTML中重复使用调用。
id、css命名规范
id、css命名规范main热点：hot新闻：news下载：download⼦导航：subnav菜单：menu⼦菜单：submenu搜索：search友情链接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab⽂章列表：list提⽰信息：msg⼩技巧：tips栏⽬标题：title加⼊：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner联系我们：contact（⼆）注释的写法:/* Footer */内容区/* End Footer */（三）id的命名:(1)页⾯结构容器: container页头：header开场、序曲：intro内容：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(四)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.尽量不缩写，除⾮⼀看就明⽩的单词.主要的 master.css模块 module.css基本共⽤ base.css布局，版⾯ layout.css主题 themes.css专栏 columns.css⽂字 font.css表单 forms.css补丁 mend.css打印 print.css。
css 命名规范
css 命名规范CSS命名规范是一种约定俗成的标准，用于统一命名CSS类、ID、选择器等，以确保代码的一致性和可维护性。
以下是一个约1000字的CSS命名规范的例子：一、命名规则：1. 采用英文小写字母、数字或连字符（-），不使用大写字母、下划线（_）或其他特殊字符。
2. 以字母开头，不以数字开头。
3. 使用有意义的名称，避免使用缩写或简写。
命名应反映元素的功能或用途。
4. 使用短小、精准的名称，不使用冗长或复杂的名称。
二、选择器命名：1. 使用有意义的名称来定义选择器。
例如，使用类名来表示元素的特征或功能。
（例如：.header，.sidebar）2. 避免使用无意义或单一的选择器名称。
可以使用多个类名来表示一个元素的多个特征或功能。
（例如：.primary-button.button）3. 不要使用ID选择器来定义样式，ID选择器具有较高的优先级，会导致样式难以重用和维护。
三、类名命名：1. 使用小写字母或连字符来分隔单词。
例如：.nav-bar，.info-box。
2. 使用有意义的名称来描述元素的功能或用途。
例如：.card，.container。
3. 使用简洁明了的名称，不要出现冗长或复杂的类名。
4. 避免使用HTML标签名称作为类名，以免混淆和难以维护。
四、ID命名：1. 使用小写字母或连字符来分隔单词。
例如：#home-page，#top-header。
2. ID命名应尽量避免使用，因为ID具有较高的优先级且唯一性，会导致样式难以重用和维护。
五、样式规则：1. 使用短小、精确的样式规则名称，可以简洁明了地反映样式的用途或作用。
（例如：.bold，.highlight）2. 选择器和样式命名应保持一致性，以提高代码的可读性和维护性。
3. 避免使用内联样式，尽量使用外部CSS样式文件来管理样式规则，以便代码的复用和维护。
六、注释规范：1. 使用注释来解释代码的用途、作用和相关信息，以便开发人员和维护人员理解代码的意图。
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上直接写样式。
Web前端开发规范手册
W e b前端开发规范手册内部编号：（YUUT-TBBY-MMUT-URRUY-UOOY-DBUYI-0128）Web前端开发规范手册一、规范目的1.1 概述1二、文件规范2.1文件命名规则 (1)2.2文件存放位置22.3css书写规范32.4html书写规范72.5JavaScript书写规范112.6图片规范122.7注释规范132.8css浏览器兼容13一、规范目的1.1 概述为提高团队协作效率,便于后台人员添加功能及前端后期优化维护,输出高质量的文档,特制订此文档.本规范文档一经确认,前端开发人员必须按本文档规范进行前台页面开发.本文档如有不对或者不合适的地方请及时提出,经讨论决定后可以更改此文档.二、文件规范2.1文件命名规则文件名称统一用小写的英文字母、数字和下划线的组合，其中不得包含汉字、空格和特殊字符；命名原则的指导思想一是使得你自己和工作组的每一个成员能够方便的理解每一个文件的意义，二是当我们在文件夹中使用“按名称排例”的命令时，同一种大类的文件能够排列在一起，以便我们查找、修改、替换、计算负载量等等操作。
a.HTML的命名原则引文件统一使用index.htmindex.htmlindex.asp文件名（小写）各子页命名的原则首先应该以栏目名的英语翻译取单一单词为名称。
例如：关于我们\aboutus信息反馈\feedback产品\product如果栏目名称多而复杂并不好以英文单词命名，则统一使用该栏目名称拼音或拼音的首字母表示；每一个目录中应该包含一个缺省的html文件，文件名统一用index.htmindex.htmlindex.asp；b.图片的命名原则图片的名称分为头尾两部分，用下划线隔开，头部分表示此图片的大类性质例如：广告、标志、菜单、按钮等等。
放置在页面顶部的广告、装饰图案等长方形的图片取名：banner标志性的图片取名为：logo在页面上位置不固定并且带有链接的小图片我们取名为button在页面上某一个位置连续出现，性质相同的链接栏目的图片我们取名：menu 装饰用的照片我们取名：pic不带链接表示标题的图片我们取名：title范例：banner_sohu.gifbanner_sina.gifmenu_aboutus.gifmenu_job.giftitle_news .giflogo_police.giflogo_national.gifpic_people.jpg鼠标感应效果图片命名规范为"图片名+_+on/off"。
css文件命名规则
*伪类(pseudo-class)：最常见的是锚(a)伪类，比如a:link,a:visited.
*属性选择符(attribute selectors)：比如div[class=demo],含有class为demo的div元素
左右中：left right center
(2)导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
当你写给一个元素定义class或者id，你可以省略前面的元素限定，因为ID在一个页面里是唯一的，class可以在页面中多次使用。你限定某个元素毫无意义。例如：
div#id1{}可以写成#id1{}
七、默认值
通常padding和margin的默认值为0，background-color的默认值是transparent。但是在不同的浏览器默认值可能不同。为避免冲*突，可以在样式表一开始就先定义所有元素的
模块 module.css
基本共用 base.css
布局，版面 layout.css
主题 themes.css
专栏 columns.css
文字 font.css
表单 forms.css
补丁 mend.css
打印 print.css
二、id和class的使用及区别
前端技术的标准与规范
前端技术的标准与规范随着Web技术的发展，前端技术已逐渐成为开发领域的重要一环，前端的工具和技术也越来越多。
然而，单靠广泛的技术和工具是远远不够的，一个好的团队和项目都应该有一套完整且严格的标准和规范，来确保开发质量和交付时间。
本文将探讨一些前端技术的标准和规范，以帮助开发人员更好地组织、管理和交付前端项目。
1. HTML规范HTML是网页的基础，也是前端开发的核心语言，因此HTML规范的制定和遵循对于开发者来说至关重要。
以下是一些HTML常规规范：（1）避免使用具有函数功能的HTML标签，如`<font>`、`<center>`等。
（2）标签必须按嵌套层次正确书写。
（3）所有标签必须正确闭合。
（4）代码必须使用小写字母。
（5）class和id命名必须见名知意，不要使用拼音或缩写。
（6）类名和ID名应该使用中横线、下划线或者CamelCase的方式书写，例如：`.main-container`、`#my-id`或者`myClassName`。
（7）尽量不要嵌套过多的元素，在不影响布局的情况下避免使用没必要的容器。
2. CSS规范CSS是CSS规范的核心语言，开发人员需要遵循以下的CSS规范。
（1）所有样式一律采用外部css文件，不要在HTML页面里直接写内联样式，方便维护，减少代码冗余。
（2）每个选择器规则之间应该留一个空格，增加代码可读性。
（3）永远不要使用`!important`，除非确实需要覆盖某些已有样式。
（4）样式命名遵循BEM（Block, Element, Modifier）规范，例如：`.card__header---large`，其中`card`是块，`header`是元素，`large`是修饰符。
（5）用统一的命名规则来统一功能单元、类名的命名，在现有的CSS框架或第三方库中选择一个标准来限制自己的命名，这样就可以为你的网站带来一定的规范性。
（6）当样式表庞大且复杂时，应该尽量对样式进行分类以及分组，方便管理。
css命名规范
css命名规范CSSWeb发中的重要组成部分，也是构建用户界面的重要工具。
如果使用不当，它可能会大大影响用户体验，还会影响网站的性能。
因此，为了确保网站的可读性和可维护性，正确的命名规范对 CSS 代码的质量至关重要。
CSS名规范的目的是确保程序员之间的代码一致性，并确保代码能够顺利传达所承载的信息。
有很多种不同的命名规范可以选择，但最终选择哪一种取决于团队的偏好。
要为 CSS名，需要考虑的一些点是，CSS称应该反映其外观和功能，并尽可能将它们区分开来。
CSS 代码应该具有可读性，使其易于理解和修改。
下面是一些有助于提高 CSS 代码可读性和可维护性的建议：一、使用有意义的名称CSS称应该反映其外观和功能，例如使用“depth-heading-primary”而不是“style-1”。
这能够使代码更加简洁，并使代码更易于理解和修改。
二、使用统一的命名规则为了确保 CSS 代码的一致性，建议在开发中使用统一的命名规则，例如选择“短横线”或“驼峰式”命名法。
强烈建议不要混合这两种命名法，除非你想混淆其他程序员。
三、使用正确的构造方式正确的构造方式有助于将 CSS 代码区分为一个个独立的模块，例如使用命名空间，在不同的模块中使用子模块，或者在样式应用中使用容器。
四、使用有意义的缩写缩写是避免写出长单词而引入的另一种方法。
例如，使用“bg”而不是“background”。
但同时也要注意，如果这些缩写不是一般人都熟悉的，可能会增加其他人解读你的 CSS 代码的难度。
五、使用标签来区分命名另一种提高 CSS 代码可读性和可维护性的方式是使用标签。
可以使用特定的标签来区分代码的类型，例如使用“-header”来标记标题样式，“-list”来标记列表样式等。
六、使用浏览器兼容的样式有时候，为了兼容不同浏览器，可能需要使用不同的样式。
在这种情况下，可以在命名中加入浏览器的名称或缩写，例如使用“-ie8”或“-ff”。
WEB前端开发代码使用规范
WEB前端代码规范规范目的为提高团队协作效率，便于后台人员添加功能及前端后期优化维护，输出高质量的文档，特制订此文档。
本规范文档一经确认，前端开发人员必需按本文档规范进行前台页面开发。
本文档如有不对或者不合适的地方请刚好提出，经探讨确定后方可更改。
基本准则符合web标准；语义化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文件时，须略去默认类型声明，写法如下：11.语义化html，如标题依据重要性用h1-h6(同一页面只能有一个h1)，段落标记用p，列表用ul，内联元素中不行嵌套块状元素。
12.尽可能削减div的嵌套层数。
13.在页面中尽量避开运用内嵌样式表，即在标签内运用style="…"。
14.以背景形式呈现的图片，尽量写入css样式中；重要图片必需加上alt属性；15.特别符号运用：尽可能运用代码替代：比如<(<)、>(>)、空格( )、&(&)、”（"）等等；16.尽量避开运用过度困难的HTML结构。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
原则：整个项目的命名风格要统一，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等工具中双击，即可全选命名。
而采用分割线 - 命名时双击选取只能选中分割的一部分。
本文档来自宝来网按照行业从业经验编写，转载请注明：宝来网。