本文详细介绍了前端开发的规范，包括项目目录结构、代码书写、命名规范、类型选择器的使用、CSS和JS的格式规范以及注释要求。强调了增强语义化、关注点分离、代码可读性和维护性的重要性，提供了具体的命名和格式示例。
前端项目开发规范
目录结构
一、项目目录
1、 PC目录说明
2、web目录说明
注意
二、代码规范
书写规范：增强语义化，增强阅读性
- 只用小写字母
- 增强语义
- 关注点分离
- type属性
格式规范：禁止看到参差不齐的格式 - HTML格式
2.CSS格式
命名规范：严禁简化命名 - ID和class的命名
- ID和class命名风格
- 类型选择器
4.属性缩写 - 0和单位，省略0后面的单位，省略0开头小数点前面的0。
- ID和class命名的定界符
- 组件命名
Js语法规范（重点）：严格按照此中语言的语法要求进行编码。 - 变量
- 函数
- 构造函数
- 类的成员
三、注释
函数(方法)注释
一、项目目录
目录结构的统一化，可读性，分模块、组件构建，严禁构建杂乱无章，毫无可读性而言的项目目录
目录结构整齐划一，方便日后维护和其他同事的阅读
1、 PC目录说明
index.html放在根目录下面
所有的其余页面都放到page目录下面，page目录下的页面都要分类进行放置
所有的js插件放到lib目录下
js目录根据你业务需求分别构建不同的子目录
所有的图片放到images文件夹下面，static目录下放置需要后台传入的图片，默认是静态图片后期可删除
如果需要用到特殊字体，都放到font目录下
css目录下放置必须要有base文件，来统一初始化样式，需要用到的插件放到lib目录下面
2、web目录说明
index.html放在根目录下面
其他的所有页面都放在components组件目录下，并且要归类放置，不可直接扔进去
所有的图片放到所属子组件的目录下，static目录下放置固定不动的图片，和默认的css包
总共三层开发目录，src、build、dist，src是源码文件夹，build是调试文件夹，dist目录依赖于build目录，生成线上版完整代码
注意
所有的文件命名，尽量使用单个英文单词，英文不好可以百度翻译一下，如果一个英文单词搞不定，就是用多个单词，中间用‘_’隔开，不要使用‘-’和驼峰命名法
二、代码规范
书写规范：增强语义化，增强阅读性
- 只用小写字母
所有的代码都用小写字母：适用于元素名，属性，属性值（除了文本和 CDATA ）， 选择器，特性，特性值（除了字符串）。
<!-- 不推荐 -->
<A HREF="/">Home</A>
<!-- 推荐 -->
<img src="google.png" alt="Google"></pre>
<h3>行尾空格</h3>
<strong>删除行尾白空格。</strong>
行尾空格没必要存在。
<pre><!-- 不推荐 -->
<p>What?_
<!-- 推荐 -->
<p>Yes please.
- 增强语义
根据HTML各个元素的用途去使用它们，要知道为什么要使用它们和是否正确，例如，heading元素构造标题，p元素构造段落，a元素构造锚点等
根据HTML各个元素的用途去使用是很重要的，它涉及到文档的可访问性，重用和代码效率等问题
<!-- 不推荐 -->
<div onclick="goToRecommendations();">All recommendations</div>
<!-- 推荐 -->
<a href="recommendations/">All recommendations</a>
禁止用行内元素包裹块级元素，例如不要在p标签里面嵌套别的标签
3. 关注点分离
将表现和行为分开
严格保持结构（标记），表现（样式），和行为（脚本）分离，并尽量让这三者之间的交互保持最低限度
确保文档和模板只包含HTML结构，把所有表现都放到样式表里，把所有的行为都放到脚本里
此外，尽量使脚本和样式表在文档与模板中有最小接触面积，即减少外链
将表现和行为未开维护是很重要的，因为更改HTML文档结构和模板会比更新样式表和脚本更花费成本
如果是用vue构建的项目，css的书写要带scope
<!-- 不推荐 -->
<!DOCTYPE html>
<title>HTML sucks</title
最低0.47元/天 解锁文章
扫一扫
4997
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
