前端最佳实践之HTML+CSS 和JS

一些前端的最佳实践,包括 html,css,javascript

HTML

  语义

HTML5为我们提供大量的语义元素的目的就是为了准确地描述内容,确保你受益于其丰富的词汇。

确保你了解你使用的语义元素。错误的使用语义元素是很糟糕的。

简洁

保持代码简洁。忘记你的旧 XHTM L的习惯。

可访问性

可访问性不应该是后面再来做的事。但你也不必成为一个WCAG专家来提高你的 网站,你可以立即做一些小事情,就会有巨大的改变,如:

  • 学习正确使用“alt”属性

  • 确保你的链接和按钮等标记(没有“< div class = button”这种滥用)

  • 不完全依赖颜色信息交流

  • 明确 label input控件

语言编码

虽然语言和字符编码的定义是可选的,但还是推荐声明在文档级别,即使他们HTTP头中指定。在任何支持utf - 8 字符编码里建议声明 utf-8 编码

性能

除非有一个充分的理由不然在加载脚本内容之前不要阻止呈现的页面。

CSS  

    分号

分号在技术上是一个分离器,总是把它当作结束符。

盒模型

盒子模型应该为整个文档是一样的。一个全局 “* { box-sizing:border-box;}”是可以的,在特定的元素里如果能避免最好不要改变它默认的盒模型。

文档流

如果你能避免最好不要改变一个元素的默认行为。尽可能的保持元素 自然文档流。例如,删除图像下的 white-space 不应该让你改变其默认显示:

同样的,如果你能避免最好不要把一个元素脱离文档流。

定位

css有很多方法来定位元素,但是最好使用下面的属性/值,按照优先顺序:

选择器

减少选择器紧密耦合的DOM。考虑添加一个类的元素,当你超过 3 层结构可以用伪类选择器匹配,或后代 兄弟选择器组合。

避免重载你的选择器在你不需要的时候。

特殊点

不要让值和选择器难以覆盖。减少使用id和 避免!important

override

override 的样式让选择器和调试困难。尽可能的避免它。

继承

不要重复声明样式,是可以继承的。

简洁

保持代码简洁。尽可能的使用简写属性,避免使用多个属性。

语言编码

只能是英语和数字

前缀

积极除掉过时的前缀。如果你需要使用它们,插入他们的标准属性之前

动画

用 transitions 代替 animations。动画执行的时候尽量避免使用其他属性,除了 opacity 和 transform.

单位

这个具体看场景,当你使用相对单位的时候推荐使用rem。用 秒 代替 毫秒

颜色

如果你需要使用透明,使用 rgba。否则,使用 16 进制格式的

图片

如果能用 css 代替最好避免使用 HTTP 请求

Hacks

不要使用这些

JavaScript

   性能

代码的可读性,正确性,可表达性优于性能。JavaScript 基本上不会有性能上的瓶颈。需要优化的东西像 图片优化,网络请求优化,DOM 渲染优化。如果你要在这个文档记住一条,那就记住这个吧。

无状态

尽量让你的函数保持干净,所有的函数最好没有副作用,不要使用外部数据,返回一个新的对象代替现在已经存在的。

原生方法

尽可能的使用语言自带的方法

类型转换(隐式转换)

请放心使用类型隐式转换当那样做有意义的时候,虽然说是要避免使用它,但是也不要盲目相信权威。

循环

当你不得已使用可变的对象时最好不要使用循环,使用array.prototype的方法。

如果你不想,或者说使用 array.prototype方法很恶心,建议使用递归

这是一个通用的循环函数,让递归更简单

Arguments

忘了 arguments 对象。其他的参数是个更好的选择,因为:

  1. 可以命名,能够让你有个更符合函数期待的参数

  2. 和数组没啥大区别,可以让你更方便的使用

Apply

忘了 apply()吧, 使用操作符代替.

Bind

当有更常用的办法时不要用 bind()

高阶函数

当你没必要的时候避免使用嵌套函数

组合

避免多个函数的嵌套,使用组合代替

缓存

变量

建议使用 const 代替 let,let 代替 var

条件

建议用 匿名执行函数返回语句 代替 if,else,switch 语句。

对象迭代

尽可能的避免使用 for .. in

使用 Map 创建对象

在使用对象的时候,Map 是个更好的选择

柯里化

柯里化很强大,但是很多开发者不是很熟悉。不要滥用它,但适当的使用是很不错的。

可读性

不要用一些看似聪明的小技巧混淆代码的可读性

代码复用

不要害怕创造许多小的,高度组合可重复使用的函数

依赖

减少依赖,你不熟悉第三方代码,不要为了一个简单的方法加载一个库。

最后:“相信有很多想学前端的小伙伴,今年年初我花了一个月整理了一份最适合2018年学习的web前端干货,从最基础的HTML+CSS+JS到移动端HTML5等都有整理,送给每一位前端小伙伴,53763,1707这里是小白聚集地,欢迎初学和进阶中的小伙伴。”

祝大家早日学有所成,拿到满意offer,快速升职加薪,走上人生巅峰。

猜你喜欢

转载自blog.csdn.net/weixin_38004595/article/details/84673165