在前端开发中,为了保证代码的可读性、可维护性和协同开发的效率,可以遵循一些书写规范。
CSS书写规范:
- 使用规范的命名:使用有意义的类名和ID,使用小写字母和短横线"-"连接单词,尽量不缩写,除非一看就明白的单词。
.my-class {}
#my-id {}
- 使用缩进和换行:使用2或4个空格进行缩进,而不是制表符。并在选择器之间、属性之间和每个规则之后添加换行。
.my-class {
font-size: 11px;
}
.my-box {
font-size: 12px;
}
- 书写顺序:按照一定的顺序来书写CSS可以提高代码的可读性。一般的顺序如下:
- 位置属性 (position, top, right, z-index, display, float等)
- 大小 (width, height, padding, margin)
- 文字系列 (font, line-height, letter-spacing, color- text-align等)
- 背景 (background, border等)
- 其他 (animation, transition等)
- 避免使用全局选择器,尽量使用具体的选择器来限定样式的影响范围。尽量避免使用全局选择器(如
*
),因为它们会增加样式的复杂性和难以维护性。
* {}
- 避免使用!important:尽量避免使用!important,除非某些特殊情况下需要覆盖其他样式。
.my-class {
font-size: 20px !important;
}
- 使用简写属性:使用CSS的简写属性可以减少代码量并提高可读性(例如,使用
margin
替代margin-top
、margin-right
等)。
.my-class {
margin: 10px 20px 30px 20px;
}
-
单位一致性:使用相对单位(如em、rem)来保持网页的相对一致性,避免使用绝对单位(如px)。
-
使用CSS预处理器:使用Sass、Less等CSS预处理器来简化CSS的编写和维护。
-
注释:对于关键的代码块或特殊规则,请使用注释进行解释和说明,以方便他人理解和维护。
-
媒体查询:将媒体查询放在与其相关的样式块之后,并使用适当的缩进和注释来提高可读性。
-
选择器的嵌套:避免选择器的过度嵌套,以免增加样式的特殊性和影响性能。
以下是一些常用的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书写规范:
- 使用规范的命名:使用驼峰命名法(camelCase)来命名变量、函数和对象属性,首字母小写,例如:myVariable。使用语义化的命名,使代码易于理解和维护。
let carNum = 1;
function myFun() {};
let myObj = {
}
- 常量:使用大写字母和下划线"_"连接单词来命名常量,并使用
const
关键字声明它们。
const MAX_VALUE = 1;
- 变量声明:始终使用关键字(
var
,let
,const
)声明变量,并在每个变量之间使用逗号进行分隔。尽量避免全局变量。在运算符周围和逗号后面使用空格,以提高代码的可读性。
let x = y + z;
let a, b;
-
缩进和代码块:使用2或4个空格进行缩进,不要使用制表符。并在代码块之间添加换行。
-
代码注释:添加适当的注释来解释代码的用途、功能和注意事项。
-
使用严格等号:优先使用严格相等运算符(=)代替相等运算符()。
if (obj === null) {}
- 分号:在每个语句结束后添加分号,以避免可能的错误。
- 引号:在字符串使用时,一致地使用单引号或双引号。
let str = "字符串";
-
括号:在函数调用、控制流语句和复杂表达式中使用括号来增加代码的可读性。
-
函数:使用函数表达式或函数声明语法定义函数。给函数和参数使用有意义的名字,并在函数内部使用
return
语句明确返回值。 -
错误处理:在可能出现错误的地方使用异常处理机制(
try...catch
)进行错误处理。
try {
var a = 123; //可能出现错误的地方
} catch (err) {}
-
使用严格模式:在脚本的顶部使用
"use strict";
启用严格模式,以避免常见的JavaScript错误。 -
对象和数组:使用字面量语法创建对象和数组,并使用换行和缩进对其格式化。
-
对象定义的规则包括将左花括号与类名放在同一行,冒号与属性值间有个空格,字符串使用双引号,数字不需要,最后一个属性-值对后面不要添加逗号,将右花括号独立放在一行,并以分号作为结束符号。
let arr = [1, 2, 4]; //字面量语法
let obj = {
a: 1,
b: "zifu",
c: []
};
- 为了便于阅读,每行字符建议小于80个。