前端CSS规范整理

软件开发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.避免使用全局变量和全局函数，减少命名冲突的可能性。

网页设计前端页面规范要求和注意事项网页设计前端页面规范要求和注意事项引导语：网页前端的设计是直接面向用户的，是用户所看得见的效果，以下是店铺整理的网页设计前端页面规范要求和注意事项，欢迎参考阅读!1．尽量把页面的背景图及小图标整合到一张图片，用CSS定位方法。

这样以减少http请求，从而降底网站的下载的速度。

2．尊从内容与页面样式的脱离，如需要，同样也要做到布局与COLOR的脱离。

什么样的图片属于内容：从数据库里取出来的图片。

凡是不属于内容的图片请都用背景。

1）页面代码，做到精简，逻辑性清楚；公用部位可以引入进来，比如头部，脚部。

2）CSS逻辑清析，精简。

可在不改变功能的前提内，做到能更换页面布局及换色。

CSS样式每个页面引入不超过两个文件，一个是COMMON：它包含整个站点都需用到的公用部分，如整体布局，头部，脚部，框，按扭等。

另一个是当前页的CSS。

CSS文件引入在2个之内，减少http请求避免CSS的表达式。

3．将脚本放在底部。

这样页面就可以逐步呈现，而且页面中的可视组件可以尽早下裁。

配合程序开发人员我们需要注意的（xhtml）：1．了解用户可编辑上传修改的“图片”，“文字”区域的需求。

根据需求来定位控制，以保证页面的稳定显示。

如图片，需了解：1）宽度是否是固定大小，2）宽度最大限度，3）大小不一样时的居中显示如文字，需了解：1) 文字的最大长度。

及加“…”省略号区域,2) 在测试中经常也会碰到英文无空格情况，得用overflow:hidden的方法隐藏溢出部分。

2．每个页面加上正确显示的TITLE。

3．在页面中尽量完成每步交互效果，包括既时响应的。

4．提交程序员的'DEMO必须是连贯的，交互效里齐全，而且经过自已在IE6.0，IE7.0，FIREFOX一次以上的整体测试。

设计师需要注意的几点：1.尽量考虑为元素命名其本身的作用或”用意”，达到语义化。

不要使用表面形式的命名。

如:red/left/big等。

前端代码规范文档前端代码规范文档一、命名规范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. 定期审核项目中的代码，找出不符合规范的代码并进行修正。

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.代码注释规范-使用注释来说明代码的用途和作用；-使用块注释来注释一整段代码，使用行注释来注释一行代码。

阿里前端开发规范阿里前端开发规范包括代码、命名、HTML、CSS、JavaScript、图片方面的规范。

1. 代码规范：- 使用四个空格缩进，不使用制表符。

- 代码行长度不超过80个字符。

- 使用驼峰命名法，变量和函数名用小写开头，构造函数用大写开头。

- 使用严格相等运算符（===和!==）替代宽松相等运算符（==和!=）。

- 在条件表达式中，使用括号来提高可读性。

- 避免在循环中使用等号赋值（例如，for (var i = 0; i < array.length; i++)）。

- 避免使用eval()函数。

2. 命名规范：- 文件名应该全部小写，可以包含破折号（-）或下划线（_）。

- 文件夹名应该全部小写，可以包含破折号（-）或下划线（_）。

- CSS文件名应该以.css结尾。

- JavaScript文件名应该以.js结尾。

3. HTML规范：- 使用两个空格缩进，不使用制表符。

- 使用双引号而不是单引号作为属性值的引号。

- 在自定义属性中使用小写字母和破折号（-）。

- 为所有非自闭合标签使用闭合标签。

- 避免在HTML标签中使用行内样式。

4. CSS规范：- 使用两个空格缩进，不使用制表符。

- 使用小写字母和破折号（-）作为选择器和属性名的命名方式。

- 为每个选择器之间使用空行分隔。

- 使用简写属性来减少代码量。

- 使用预处理器（如Less或Sass）来编写CSS。

5. JavaScript规范：- 使用两个空格缩进，不使用制表符。

- 使用分号作为语句的结束符号。

- 避免使用全局变量。

- 避免使用with语句。

- 使用模块化的开发方式，避免全局作用域污染。

6. 图片规范：- 使用有意义的命名来描述图片内容。

- 使用适当的格式和压缩技术来减小图片文件大小。

- 将页面上的图片引用写成相对路径。

以上是阿里前端开发规范的一些主要内容。

在实际开发中，遵循这些规范可以提高代码的可读性和可维护性，使团队成员之间更容易协同工作。

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样式书写顺序及规范作者:WangMin格⾔:努⼒做好⾃⼰喜欢的每⼀件事在项⽬中，⼤部分前端程序员都没有按照良好的CSS书写规范来写CSS代码，每次写css样式都是⽤到什么就在样式表后添加什么，完全没有考虑到样式属性的书写顺序对⽹页加载代码的影响。

后来逐渐才知道正确的样式顺序不仅易于查看，并且也属于css样式优化的⼀种⽅式。

下⾯就开始学习吧！！各种类型属性的书写顺序及作⽤书写顺序优先级第⼀定位属性：position display float left top right bottom overflow clear z-index优先级第⼆⾃⾝属性：width height padding border margin background优先级第三⽂字样式：font-family font-size font-style font-weight font-varient color优先级第四⽂本属性：text-align vertical-align text-wrap text-transform text-indent text-decoration letter-spacing word-spacing white-space text-overflow line-height优先级第五css3中新增属性：content box-shadow border-radius transform……书写顺序的作⽤减少浏览器reflow（回流），提升浏览器渲染dom的性能。

解析html构建dom树，解析css构建css树：将html解析成树形的数据结构，将css解析成树形的数据结构构建render树：DOM树和CSS树合并之后形成的render树。

布局render树：有了render树，浏览器已经知道那些⽹页中有哪些节点，各个节点的css定义和以及它们的从属关系，从⽽计算出每个节点在屏幕中的位置。

前端开发规范文档一、概述。

本文档旨在规范前端开发工作，统一团队成员的开发风格，提高代码质量和可维护性。

在前端开发中，规范是非常重要的，它可以让团队成员之间的合作更加顺畅，代码更加易读易懂。

本规范文档将涵盖HTML、CSS、JavaScript等前端开发的相关规范，希望每位开发人员都能认真遵守。

二、HTML规范。

1. 文件命名规范。

文件名应使用小写字母，单词之间可以使用连字符“-”连接，例如，index.html、about-us.html。

文件名应简洁明了，不使用无意义的数字或字符。

2. 代码缩进规范。

使用两个空格进行代码缩进，不使用Tab键。

3. 标签规范。

标签名应使用小写字母。

标签属性值应使用双引号。

4. 注释规范。

在需要注释的地方使用<!--->进行注释。

5. 其他规范。

应尽量避免使用行内样式和行内脚本。

尽量减少标签的嵌套层级，保持HTML结构的简洁性。

三、CSS规范。

1. 文件组织规范。

将CSS文件统一放置在一个文件夹中，不要将CSS文件散落在各个目录中。

可以根据模块或页面的不同，将CSS文件拆分为多个文件，使用@import进行引入。

2. 类名规范。

类名应使用小写字母，单词之间可以使用连字符“-”连接，例如，header-nav、footer-content。

类名应简洁明了，不使用无意义的数字或字符。

3. 属性顺序规范。

CSS属性应按照一定的顺序书写，例如，布局定位属性、盒模型属性、文字排版属性、视觉效果属性等。

4. 其他规范。

尽量避免使用!important，除非必要情况下。

尽量使用缩写属性，减少代码量。

四、JavaScript规范。

1. 变量命名规范。

变量名应使用驼峰命名法，例如，myName、isShow。

变量名应简洁明了，不使用无意义的单个字母。

2. 代码缩进规范。

使用两个空格进行代码缩进，不使用Tab键。

3. 注释规范。

在需要注释的地方使用//进行单行注释，使用/ /进行多行注释。

前端开发设计规X目录前端开发设计规X (1)一、HTML使用规X (1)、页面文件命名规X (1)、页面head局部书写规X (1)、HTML元素开发规X (2)、HTML元素书写规X (2)、HTML元素命名规X (3)二、WEB页面开发规X (4)、错误跳转页面的处理 (4)、提示信息的处理 (4)、页面的返回 (4)、提交前数据的判断验证 (5)、删除操作 (5)、页面中java代码的使用 (5)、页面布局规X (6)、前台页面尺寸 (6)、标准网页广告图标规格〔参考〕 (6)、页面字体 (7)、字体颜色 (7)三、javaScript开发规X (7)、javaScript文件命名规X： (7)、javaScript开发规X (7)、javaScript书写规X (7)、javaScript命名规X (8)四、css样式规X (10)、css样式文件命名规X (10)、通用样式文件命名规X： (10)、业务类样式文件命名规X (10)、css样式文件命名须知 (11)、css样式文件存放目录规X (11)、css样式定义规X (11)、css样式内容顶部注释规X (11)、css样式内容注释规X (12)、css样式定义规X (12)、css样式常用id的命名 (13)、css样式常用class的命名 (15)、css样式书写规X (15)、css样式排版规X (15)、css样式书写风格规X (16)、css样式属性定义顺序规X (16)、css样式其他规X (17)、css样式Hack的使用 (18)、字体定义规X (18)、css样式检测 (19)、须知事项 (19)、css样式引用规X (19)、媒体内容命名规X (20)五、项目文件存放规X (20)六、前端开发规如此 (20)一、HTML使用规X1.1、页面文件命名规X命名格式为：项目名缩写_所属功能_所属功能子项_... .jsp/html…，文件命名下划线不能超过三个，命名尽量使用简短的能明确明确文件用途的英文或者英文简写。

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

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

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

经讨论决定后方可更改。

基本准则符合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 这些标签。

前端开发规范文档前端开发是指在网站、网页或移动端应用的开发过程中，负责用户界面的设计和开发的工作。

一个良好的前端开发规范可以提高团队的工作效率、降低错误率，并且方便后期的维护和扩展。

本文将介绍一些常见的前端开发规范。

一、HTML规范2.使用正确的缩进和格式：使用合适的缩进和换行，使HTML代码易于阅读和维护。

4. 使用语义化的类名和id名：类名和id名应该能够准确描述元素的作用和功能，避免使用无意义的名称。

二、CSS规范2. 避免使用!important：尽量避免使用!important来覆盖样式，应优先考虑调整选择器的优先级。

3.使用合适的样式复用方式：避免重复的代码，可以使用类名或父子选择器来复用样式。

4. 使用合适的尺寸单位：根据具体情况选择合适的尺寸单位，如px、em、rem等。

5. 使用CSS预处理器：可以使用Sass、Less或Stylus等CSS预处理器来提高开发效率和代码的可维护性。

三、JavaScript规范1. 使用严格模式：在JavaScript代码的开头使用"use strict"启用严格模式，以减少错误和提高代码质量。

2.使用合适的命名规范：变量、函数和类名应该具有描述性的名称，遵循驼峰命名法或下划线分隔符。

3.避免全局变量污染：尽量避免使用全局变量，可以通过使用模块化的方式来封装代码，或者使用命名空间。

4. 避免使用eval和with：避免使用eval函数和with语句，它们可能会引起安全问题和性能问题。

5.使用合适的循环和控制结构：使用合适的循环和控制结构来提高代码的可读性和性能，避免过多嵌套的层级。

四、代码管理规范1. 使用版本控制工具：使用Git等版本控制工具来管理代码的版本，方便团队协作和代码的追踪和回滚。

2.编写有意义的提交信息：每次提交代码时，应编写有意义的提交信息，描述本次提交的内容和目的。

3.周期性地进行代码审查：定期进行代码审查，发现和修复潜在的问题，提高代码质量和稳定性。

前端开发规范及注意事项一、CSS编码规范1、单行形式书写风格的排版约束1.1）每一条规则的大括号 { 前后加空格1.2）多个selector共用一个样式集，则多个selector必须写成多行形式1.3）每一条规则结束的大括号 } 前加空格1.4）属性名冒号之前不加空格，冒号之后加空格1.5）每一个属性值后必须添加分号; 并且分号后空格例如：div.test { width: 100px; height: 200px; }a:focus,a:hover { position: relative; right: 1px; }2、多行形式书写风格的排版约束2.1）每一条规则的大括号 { 前添加空格2.2）多个selector共用一个样式集，则多个selector必须写成多行形式2.3）每一条规则结束的大括号} 必须与规则选择器的第一个字符对齐2.4）属性名冒号之前不加空格，冒号之后加空格2.5）属性值之后添加分号;3、其他规范3.1）使用单引号，不允许使用双引号3.2）如果使用CSS3的属性，如果有必要加入浏览器前缀，则按照webkit- / -moz- / -ms- / -o- / std的顺序进行添加，标准属性写在最后，并且属性名称要对齐，例如：div.animation-demo {-webkit-animation: mymove 5s infinite;-moz-animation: mymove 5s infinite;-o-animation: mymove 5s infinite;animation: mymove 5s infinite;}4、命名规则书写规范4.1）规则命名中，一律采用小写加中划线的方式，不允许使用大写字母或 _4.2）命名避免使用中文拼音，应该采用更简明有语义的英文单词进行组合4.3）命名注意缩写，但是不能盲目缩写，具体请参见常用的CSS 命名规则4.4）不允许通过1、2、3等序号进行命名4.5）避免class与id重名4.6）id用于标识模块或页面的某一个父容器区域，名称必须唯一，不要随意新建id4.7）class用于标识某一个类型的对象，命名必须言简意赅。

实用文档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 规范大全本文转载自标点符，文章整理了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技术的发展，前端技术已逐渐成为开发领域的重要一环，前端的工具和技术也越来越多。

然而，单靠广泛的技术和工具是远远不够的，一个好的团队和项目都应该有一套完整且严格的标准和规范，来确保开发质量和交付时间。

本文将探讨一些前端技术的标准和规范，以帮助开发人员更好地组织、管理和交付前端项目。

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）当样式表庞大且复杂时，应该尽量对样式进行分类以及分组，方便管理。

前端开发设计规范文档1.前言前端开发是构建用户界面的过程，它的设计和编写需要遵循一定的规范，以保证代码的可读性、可维护性和可扩展性。

本文档旨在提供一个前端开发的设计规范，帮助开发人员在设计和编写前端代码时遵循统一的规范。

2.命名规范2.1文件和文件夹命名-文件名使用小写字母，单词之间可以使用连字符“-”连接。

-文件夹名同样使用小写字母，单词之间使用连字符“-”连接。

2.2变量和函数命名- 变量和函数名使用驼峰命名法，即第一个单词首字母小写，后面的单词首字母大写。

例如：userInfo, getUserInfo。

2.3CSS类命名- CSS 类名使用连字符“-”连接，例如：main-container, login-button。

3.HTML规范3.2嵌套规范-HTML元素的嵌套应该保持良好的层次结构，不要过深嵌套。

-使用缩进保持结构清晰，增加代码的可读性。

4.CSS规范4.1使用外部样式表-将CSS样式写在外部样式表中，使代码可重用和维护。

4.2避免使用行内样式-避免在HTML元素上使用行内样式定义样式。

4.3样式规则的书写顺序-将样式规则按照从上到下的顺序书写，以保持结构清晰。

-先定义通用样式，再定义特定样式。

-按照样式的属性顺序书写，例如先写字体相关，再写颜色相关。

4.4使用CSS预处理器-使用CSS预处理器（如SASS或LESS）来提高CSS代码的可维护性和可扩展性。

5. JavaScript 规范5.1使用严格模式- 在 JavaScript 文件的开头添加 "use strict" 来启用严格模式。

5.2使用语义化的命名-使用有意义的变量和函数名，易于理解和维护。

5.3避免全局变量和函数-尽量避免使用全局变量和函数，以减少命名冲突和代码污染。

5.4缩进和空白符-使用合适的缩进和空白符来增加代码的可读性。

5.5注释规范-使用注释解释代码的意图和功能。

-在复杂的代码块前添加注释，帮助其他开发人员理解代码逻辑。

css语法规则CSS语法规则CSS是一种用于网页设计的样式表语言，它可以为HTML文档添加样式和布局。

为了正确地使用CSS，我们需要遵循一些基本规则和语法。

下面是一个全面的、详细的CSS语法规则，以帮助您更好地掌握这门语言。

一、基本概念1. CSS指层叠样式表（Cascading Style Sheets）。

2. CSS样式定义了HTML元素的外观和布局。

3. CSS样式可以通过内部样式表、外部样式表或行内样式来定义。

4. CSS选择器用于选择要应用样式的HTML元素。

二、CSS语法1. CSS规则由选择器和声明块组成。

2. 选择器指定要应用样式的HTML元素。

3. 声明块包含一个或多个声明，每个声明由属性和值组成，属性与值之间使用冒号分隔，每个声明之间使用分号分隔。

4. 外部CSS文件必须以.css扩展名保存，并通过<link>标签在HTML 文档中引入。

5. 内部CSS可以在<head>标签中使用<style>标签来定义，并将其放置在<head>标签中间。

6. 行内CSS可以直接在HTML元素中使用style属性来定义。

三、CSS选择器1. 元素选择器：通过HTML元素名称来选择元素。

例如，p选择器会选择所有的段落元素。

2. ID选择器：通过HTML元素的ID属性来选择元素。

例如，#myid 选择器会选择ID为“myid”的元素。

3. 类选择器：通过HTML元素的class属性来选择元素。

例如，.myclass选择器会选择class为“myclass”的所有元素。

4. 属性选择器：通过HTML元素的属性来选择元素。

例如，[href]选择器会选择所有具有href属性的元素。

5. 伪类选择器：通过HTML元素的状态或位置来选择元素。

例如，:hover伪类可以在鼠标悬停在一个链接上时改变链接的颜色。

6. 组合选择器：将多个不同类型的CSS规则组合在一起，以便同时应用于一个或多个HTML元素。