首页 > 代码库 > 理一理那些小规范

理一理那些小规范

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

/

/技术分享

/

 

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.语法检验器全部打开

 技术分享

 

理一理那些小规范