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

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

HTML

 语义

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

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

简洁

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

可访问性

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

学习正确使用“alt”属性

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

不完全依赖颜色信息交流

明确labelinput控件

语言编码

虽然语言和字符编码的定义是可选的,但还是推荐声明在文档级别,即使他们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对象。其他的参数是个更好的选择,因为:

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

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

Apply

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

Bind

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

高阶函数

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

组合

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

缓存

变量

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

条件

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

对象迭代

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

使用 Map 创建对象

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

柯里化

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

可读性

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

代码复用

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

依赖

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

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

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

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,732评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 87,496评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 151,264评论 0 338
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,807评论 1 277
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,806评论 5 368
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,675评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,029评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,683评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 41,704评论 1 299
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,666评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,773评论 1 332
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,413评论 4 321
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,016评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,978评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,204评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,083评论 2 350
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,503评论 2 343

推荐阅读更多精彩内容

  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,421评论 1 45
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,727评论 1 92
  • 在线阅读 http://interview.poetries.top[http://interview.poetr...
    程序员poetry阅读 114,237评论 24 450
  • 今早起来看看没什么饭可做,就去门口买了一笼云豆猪肉包子,两碗油粉一碗八宝粥,两个素馅小饼。李俊达吃了5个笼包半碗八...
    俊达爸阅读 117评论 0 0
  • 今天周六有空余时间,我又打算收拾一下屋子。在收拾书房的书籍时,我突然有一个念头,我发现我的这种收拾习惯好像来自于结...
    锦语良言阅读 817评论 3 3