前端开发规范

在前端开发中，为了保证代码的可读性、可维护性和协同开发的效率，可以遵循一些书写规范。

CSS书写规范：       

1.使用规范的命名：使用有意义的类名和ID，使用小写字母和短横线"-"连接单词，尽量不缩写，除非一看就明白的单词。

.my-class {}

#my-id {}

2.使用缩进和换行：使用2或4个空格进行缩进，而不是制表符。并在选择器之间、属性之间和每个规则之后添加换行。

.my-class {
    font-size: 11px;
}

.my-box {
    font-size: 12px;
}

3.书写顺序：按照一定的顺序来书写CSS可以提高代码的可读性。一般的顺序如下：

• 位置属性 (position, top, right, z-index, display, float等)
• 大小 (width, height, padding, margin)
• 文字系列 (font, line-height, letter-spacing, color- text-align等)
• 背景 (background, border等)
• 其他 (animation, transition等)

4.避免使用全局选择器，尽量使用具体的选择器来限定样式的影响范围。尽量避免使用全局选择器（如 *），因为它们会增加样式的复杂性和难以维护性。

5.避免使用!important：尽量避免使用!important，除非某些特殊情况下需要覆盖其他样式。

.my-class {
    font-size: 20px !important;
}

6.使用简写属性：使用CSS的简写属性可以减少代码量并提高可读性（例如，使用 margin替代 margin-top、 margin-right等）。

.my-class {
    margin: 10px 20px 30px 20px;
}

7.单位一致性：使用相对单位（如em、rem）来保持网页的相对一致性，避免使用绝对单位（如px）。

8.使用CSS预处理器：使用Sass、Less等CSS预处理器来简化CSS的编写和维护。

9.注释：对于关键的代码块或特殊规则，请使用注释进行解释和说明，以方便他人理解和维护。

10.媒体查询：将媒体查询放在与其相关的样式块之后，并使用适当的缩进和注释来提高可读性。

11.选择器的嵌套：避免选择器的过度嵌套，以免增加样式的特殊性和影响性能。

以下是一些常用的CSS命名规则：       

• 头：header
• 内容：content/container
• 尾：footer
• 导航：nav
• 侧栏：sidebar
• 栏目：column
• 左右中：left right center
• 登录：login
• 标志：logo
• 广告：banner
• 页面主体：main
• 热点：hot
• 新闻：news
• 下载：download
• 子导航：subnav
• 菜单：menu
• 子菜单：submenu
• 搜索：search
• 友情链接：friendlink
• 版权：copyright
• 内容：content
• 标签：tags
• 文章列表：list
• 提示信息：msg
• 小技巧：tips
• 栏目标题：title
• 加入：joinus
• 指南：guild
• 服务：service
• 注册：regsiter
• 状态：status
• 投票：vote
• 合作伙伴：partner

JavaScript书写规范：       

1. 使用规范的命名：使用驼峰命名法（camelCase）来命名变量、函数和对象属性，首字母小写，例如：myVariable。使用语义化的命名，使代码易于理解和维护。

   let carNum = 1;
   
   function myFun() {};
   
   let myObj = {
   
   }

2. 常量：使用大写字母和下划线"_"连接单词来命名常量，并使用const关键字声明它们。

   
   const MAX_VALUE = 1;

3. 变量声明：始终使用关键字（var, let, const）声明变量，并在每个变量之间使用逗号进行分隔。尽量避免全局变量。在运算符周围和逗号后面使用空格，以提高代码的可读性。

   let x = y + z;
   let a, b;

4. 缩进和代码块：使用2或4个空格进行缩进，不要使用制表符。并在代码块之间添加换行。

5. 代码注释：添加适当的注释来解释代码的用途、功能和注意事项。

6. 使用严格等号：优先使用严格相等运算符（===）代替相等运算符（==）。

   if (obj === null) {}

7. 分号：在每个语句结束后添加分号，以避免可能的错误。

8. 引号：在字符串使用时，一致地使用单引号或双引号。

   let str = "字符串";

9. 括号：在函数调用、控制流语句和复杂表达式中使用括号来增加代码的可读性。

10. 函数：使用函数表达式或函数声明语法定义函数。给函数和参数使用有意义的名字，并在函数内部使用return语句明确返回值。

11. 错误处理：在可能出现错误的地方使用异常处理机制（try...catch）进行错误处理。

    
    try {
        var a = 123; //可能出现错误的地方
    } catch (err) {}

12. 使用严格模式：在脚本的顶部使用"use strict";启用严格模式，以避免常见的JavaScript错误。

13. 对象和数组：使用字面量语法创建对象和数组，并使用换行和缩进对其格式化。

14. 对象定义的规则包括将左花括号与类名放在同一行，冒号与属性值间有个空格，字符串使用双引号，数字不需要，最后一个属性-值对后面不要添加逗号，将右花括号独立放在一行，并以分号作为结束符号。

    let arr = [1, 2, 4]; //字面量语法
    let obj = {
        a: 1,
        b: "zifu",
        c: []
    };

15. 为了便于阅读，每行字符建议小于80个。