前端开发规范:命名规范、html规范、css规范、js规范(四)

简介: 前端开发规范:命名规范、html规范、css规范、js规范

修改内建对象的原型链

修改内建的诸如 Object.prototype 和 Array.prototype 是被严厉禁止的。修改其它的内建对象比如 Function.prototype,虽危害没那么大,但始终还是会导致在开发过程中难以 debug 的问题,应当也要避免。

三元条件判断(if 的快捷方法)

用三元操作符分配或返回语句。在比较简单的情况下使用,避免在复杂的情况下使用。没人愿意用 10 行三元操作符把自己的脑子绕晕。不推荐:

if(x === 10) {
  return 'valid';
} else {
  return 'invalid';
}

推荐:

return x === 10 ? 'valid' : 'invalid'

JSHint

在js规范中,有很多规范都是样式上的规范而不是逻辑上的规范,比如尽量使用===而不是==,我们可以使用JSHint或者JSLint,Javascript代码验证工具,这种工具可以检查你的代码并提供相关的代码改进意见。我个人使用的是JSHint,所以就以这个为例

webstorm内置JSHint

对于ws爱好者来说,我没有用过其他的编译器,ws基本上能满足你的所有需求(最新的ws集成了vue)。在Settings => language & frameworks => JavaScript => Code Quality Tolls => JSHint

image.png

 

webstorm中的jshint

这些规范都是什么意思呢,这里列出一些常用的,剩下的大家可以参考官方文档

 

css规范

id和class的命名

ID和class的名称总是使用可以反应元素目的和用途的名称,或其他通用的名称,代替表象和晦涩难懂的名称不推荐 :

.fw-800 {
  font-weight: 800;
}
.red {
  color: red;
}

推荐 :

.heavy {
  font-weight: 800;
}
.important {
  color: red;
}

合理的使用ID

一般情况下ID不应该被用于样式,并且ID的权重很高,所以不使用ID解决样式的问题,而是使用class不推荐:

#content .title {
  font-size: 2em;
}

推荐:

.content .title {
  font-size: 2em;
}

css选择器中避免使用标签名

从结构、表现、行为分离的原则来看,应该尽量避免css中出现HTML标签,并且在css选择器中出现标签名会存在潜在的问题。

使用子选择器

很多前端开发人员写选择器链的时候不使用 直接子选择器(注:直接子选择器和后代选择器的区别)。有时,这可能会导致疼痛的设计问题并且有时候可能会很耗性能。然而,在任何情况下,这是一个非常不好的做法。如果你不写很通用的,需要匹配到DOM末端的选择器, 你应该总是考虑直接子选择器。不推荐:

.content .title {
  font-size: 2rem;
}

推荐

.content > .title {
  font-size: 2rem;
}

尽量使用缩写属性

尽量使用缩写属性对于代码效率和可读性是很有用的,比如font属性。不推荐:

border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

推荐:

border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;

0后面不带单位

省略0后面的单位,不推荐:

padding-bottom: 0px;
margin: 0em;

推荐:

padding-bottom: 0;
margin: 0;

属性格式

  • 为了保证一致性和可扩展性,每个声明应该用分号结束,每个声明换行。
  • 属性名的冒号后使用一个空格。出于一致性的原因,
    属性和值(但属性和冒号之间没有空格)的之间始终使用一个空格。
  • 每个选择器和属性声明总是使用新的一行。
  • 属性选择器或属性值用双引号(””),而不是单引号(”)括起来。
  • URI值(url())不要使用引号。

作为最佳实践,我们应该遵循以下顺序(应该按照下表的顺序):

结构性属性:

  1. display
  2. position, left, top, right etc.
  3. overflow, float, clear etc.
  4. margin, padding

表现性属性:

  • background, border etc.
  • font, text

不推荐:

 .box {
  font-family: 'Arial', sans-serif;
  border: 3px solid #ddd;
  left: 30%;
  position: absolute;
  text-transform: uppercase;
  background-color: #eee;
  right: 30%;
  isplay: block;
  font-size: 1.5rem;
  overflow: hidden;
  padding: 1em;
  margin: 1em;
}

推荐:

.box {
  display: block;
  position: absolute;
  left: 30%;
  right: 30%;
  overflow: hidden;
  margin: 1em;
  padding: 1em;
  background-color: #eee;
  border: 3px solid #ddd;
  font-family: 'Arial', sans-serif;
  font-size: 1.5rem;
  text-transform: uppercase;
}
相关文章
|
1天前
|
前端开发 数据安全/隐私保护
从建站到拿站 -- HTML和CSS基础
从建站到拿站 -- HTML和CSS基础
7 0
|
3天前
|
前端开发 JavaScript
从零开始学习前端开发:HTML、CSS、JavaScript入门指南
【2月更文挑战第1天】本文将带领读者从零开始学习前端开发,介绍HTML、CSS和JavaScript的基础知识与应用,帮助读者快速入门前端开发领域。
17 1
|
4天前
|
JavaScript 前端开发 开发者
深入探讨前端框架Vue.js的数据绑定原理
在前端开发中,数据绑定是Vue.js框架的核心特性之一,它实现了视图与数据的双向绑定,极大地提高了开发效率和用户体验。本文将深入探讨Vue.js数据绑定的原理,从响应式数据、依赖追踪到虚拟DOM等方面进行详细分析,帮助读者更好地理解Vue.js框架的工作机制。
8 0
|
4天前
|
缓存 JavaScript 前端开发
前端工程化:优化JS加载速度
在现代Web应用中,JavaScript已成为必不可少的一部分,但是随着业务复杂度的增加,JS文件的体积也越来越大,导致网页加载速度变慢,影响用户体验。本文将介绍前端工程化的优化策略,以提高JS文件的加载速度。
|
5天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]知识点
[HTML、CSS]知识点
34 0
[HTML、CSS]知识点
|
5天前
|
移动开发 前端开发 JavaScript
[HTML、CSS]细节、经验
[HTML、CSS]细节、经验
28 0
[HTML、CSS]细节、经验
|
5天前
|
存储 缓存 JavaScript
解密前端框架Vue.js的响应式原理
作为当下最流行的前端框架之一,Vue.js的响应式原理是其核心之一。本文将深入探讨Vue.js的响应式原理,从数据劫持、依赖收集到更新视图的完整流程,帮助读者更好地理解Vue.js框架的工作方式。
|
17天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
H5+CSS3+JS逆向前置——5、DIV+CSS百分比布局
19 0
|
17天前
|
移动开发 前端开发 JavaScript
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
H5+CSS3+JS逆向前置——4、DIV+CSS绘制旗帜练习
10 0
|
6月前
|
Web App开发 前端开发 JavaScript
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
前端学习笔记202307学习笔记第五十七天-模拟面试笔记react-fiber解决了什么问题
82 0

相关产品

  • 云迁移中心