提供了编程的基础技术教程

zl程序教程

您现在的位置是：首页 >  后端

当前栏目

前端代码规范--- html、css、less、js

JSHTML前端CSS代码 --- 规范 Less
2023-09-27 14:22:48 时间

程序员写好看的代码，不亚于写一行好看的字
好看的代码总是让人心旷神怡，
不好，不规范的代码，让人看了只想摇头，
那我们就来学习一下规范的代码怎么写的吧

一、命名规范

(一) 项目命名

  • 全部采用小写的方式
  • 以中划线分割

正确命名：mall-management-system (商城管理系统)

错误命名：mall-management-system 或 mallManagementSystem

(二) 目录命名

  • 全部采用小写的方式
  • 以中划线命名
  • 复数时，要采用复数结构

正确命名：sctipts / styles / utils / demo-scripts

(三) JS、CSS、SCSS、HTML、PNG等文件命名

  • 全部采用小写的方式
  • 以中划线命名

正确命名：render-dom.js / signup.css / index.html / company-logo

(四) 命名严谨性

  • 严禁使用 拼音和中文混合的方式

  • 严禁使用中文、中文拼音

  • 正确使用 英文拼写和语法

  • 一些特殊的词语可以采用国际通用的名称

如：河南=henan / 人民币=rmb

正确命名：movie(电影) / employee(员工)

错误命名：dianyin(电影) condition --> condi (×)

二、HTML规范

(一) HTML类型

  • 推荐使用 HTML5 的文档类型申明
<!DOCTYPE html>
  • 规定的字符编码
<meta charset="UTF-8">
  • IE兼容模式
<meta http-equiv="X-UA-Compatible" content="IE-Edge">

(二) 缩进

  • 一个tab 使用两个空格
  • 嵌套的节点应该缩进

(三) 分块注释

在每一个块级元素，列表元素 和 表格元素中，加上一对HTML注释，注释格式

 <!-- 英文 中文 start -->
 <!-- 英文 中文 end -->

 例如：

<!-- header 头部 start -->
  <header>
    <div>
      <a href=""></a>
    </div>
  </header>
  <!-- header 头部 end -->

(四) 语义化标签

HTML5 有很多语义化标签，优先使用这些语义化标签，避免每一个页面都是 div或者 p

(五) 引号

**使用双引号" " **而不是单引号''

三、CSS 规范

(一) 命名

  • 类名使用小写字母，以中划线分割
.swiper-image { ... }
  • id 使用 驼峰式命名
#header { ... }

  • scss中的变量、函数、混合、placeholder采用驼峰命名

  • class 的命名不要使用 标签名

如：.p .div

(二) 选择器

尽量使用直接子选择器，否则，有时会造成性能损耗

不推荐：

.content .title { ... }

推荐

.content > .title { ... }

(三) 尽量使用缩写的属性

不推荐：

 border-style: solid;
 border-width: 1px;
 border-color: red;

推荐：

border: 1px solid red;

(四) 每个选择器及属性独占一行

不推荐：

img {
      width: 100%;box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}

推荐：
img {
      width: 100%;
      box-shadow: 3px 3px 3px 3px rgba(0, 0, 0, .1);
}

 (五) 省略 0 后面的单位

border-width: 0;

(六) 避免使用 ID 选择器及 全局标签污染全局样式

能不用 id选择器 就不要 使用id选择器，避免不是禁止

四、LESS 规范

(一) 代码组织

  • 将公告less文件放置在 style/less/common文件夹

  • 按以下顺序组织

  1. @import
  2. 变量声明
  3. 样式声明
@import 'mixins/size.less'
   
@default-text-color: #333;

.page {
	width: 960px;
    margin: 0 auto;
}

(二) 避免嵌套等级过多

将嵌套深度限制在 3 级

不推荐：

.main {
	.title {
		.name {
			color: #fff;
		}
	}
}

 推荐：

.main-title {
    .name {
		color: #fff;
    }
}

五、Javascript规范

(一) 命名

  • 采用小写驼峰命名 lowerCameCase，代码命名均不能以下划线开头，也不能以下划线或美元符号结尾

反例：_name / name_ / name$

  • 方法名、参数名、成员变量、局部变量统一采用驼峰命名风格

正确命名：localValue / getHttpMessage()

错误命名：localvalue / gethttpmessage()

  • 方法名 必须是 动词 或者 动词+名词 形式
  • 增删查改，统一使用如下 5 个单词

add  /  update  /  delete  /  get  /  detail

附：函数常用方法的动词：

get 获取       / set 设置
add 增加       / remove 删除
create 创建    / destory 移除
start 启动     / stop 停止
open 打开      / close 关闭
read 读取      / write写入
load 载入      / save 保存
begin 开始     / end 结束
backup 备份    / restore 恢复
import 导入    / export 导出
split 分割     / merge 合并
inject 注入    / extract 提取 

  • 常量全部大写，单词之间用下划线隔开，力求语义表达完整清楚，不要嫌名字长

(二) 代码格式

  • 使用两个空格进行缩进
if (x < y) {
	x += 10;
} else {
	x += 1;
}
  • 不同逻辑，不同语义，不同业务之间插入一个空行分隔

(三) 字符串

统一使用单引号''，不使用双引号""，这对创建HTML字符串非常有好处

let str = 'foo';
let testDiv = '<div id="test"></div>'

(四) 对象声明

  • 使用字面量创建对象

推荐：

let user = {};

不推荐：

let user = new Object();
  • 使用字面量来代替对象构建器

推荐：

let user = {
	age: 0
}

 不推荐：

let user = new Object();
user.age = 0;

(五) 优先使用ES6、ES7、ES8的语法

简化程序，使代码更加灵活和可复用

如：箭头函数、await/async、解构、let、for…of 等

(六) 括号

下列关键词必须有大括号（即使代码只有一行）:if / else / for / while / try / catch / finally / with

推荐：

if (isTrue) {
	doSomeThing();
}

不推荐

if (isTrue) doSomeThing();

(七) undefined判断

永远不要直接使用undefined进行变量判断；使用typeof 和字符串 'undefined'对变量进行判断

推荐：

if (typeof person === 'undefined') {
	...
}

不推荐

if (person === undefined) {
	...
}

(八) 条件判断和循环最多三层

条件判断能使用 三目运算符 和 逻辑运算符的，就不要使用条件判断。

如果超过三层的 ，抽成函数，并写清楚注释

(九) this的转换命名

对上下文 this的引用只能使用 self来命名

let self = this;

(十) 慎用 console.log

对 console.log会有性能问题，生产环境下请清除console.log

相关文章