理一理那些小规范

Posted 2020-09-01

做了前端的这段时间中，整理整理我从渣渣到小白的规范。

/

/

/

 

ps--1 css 引入的时候

 

ps--2 命名规范

->项目命名

全部采取小写（eg:my_project_name）；

->目录命名

参照项目命名的规则，要采用复数命名法（eg:style,script,deta_modles）；

->JS文件命名

参照项目命名的规则；

->CSS,SCSS文件命名

参照项目命名的规则；

html命名

参照项目命名的规则;

 

ps--3 HTML结构

语法

在属性上使用双引号，不要使用单引号；

属性名称小写，用中划线做分隔符（除ID使用驼峰外，参考css规则）

属性顺序

属性顺序应该按照特性的顺序出现保证易读性；

ps--4 CSS

优先级

参考：

总结：尽量使用css设置样式，少用id。

        同时保证html加载css文件时，第三方样式最先加载，画面最后加载

        不要使用!important

        这样就可以保证画面的样式覆盖公共的，公共的覆盖第三方的文件

　　　

命名

类名使用小写字母，以中划线分隔；

id采用驼峰样式

颜色

颜色使用16进制小写字母

颜色16进制尽量用简写

媒体查询

尽量将媒体查询的规则靠近与他们相关的规则，不要把他们放在一个单独的样式表中，或者丢在文件的底部，这样会让大家容易忘记他们，从而修改的时候会出现偏差。

杂项：

尽量少用‘*’选择器；

去掉小数点前面的0；

属性值‘0’后面不要加单位；

去掉数字中不必要的小数点和0；

不要再一个文件中出现两个相关的规则；

 

 ps--5

引号

最外层统一使用单引号

 

变量命名

标准变量采用驼峰命名法，（除了对象的属性外，主要是考虑到cgi的返回数据）；

常量全大写，用下划线链接；

构造函数，第一个字母大写；

JQuery对象必须以’$‘开头命名；

 

 

 ps--6 编辑器设置

1.在HBuilder的整理代码格式设置中，使用默认配置[内置]，并且不要修改其中的内容。

 

2.语法检验器全部打开