指数级提升你开发效率的小技巧 / 四六文摘

《HelloWorld公开课》自开播以来，为广大的学员普及了一系列的技术干货内容，受到了许多学员的喜爱。但我们也深知，系统的技术知识仅仅是一方面。在日常的开发中，如果你掌握了巧妙的开发技巧，是可以指数级提升你的开发效率的。

这不，5月8号的公开课，前端老司机川哥为我们奉献了他多年编码所积攒下来的所有开发技巧，如果你是一名前端开发人员，这节公开课你必不可错过。

代码开发技巧

说起代码开发技巧和规范，最让人头疼的莫过于命名，特别是新手而言，用拼音来给字段命名那是常用的事情。所以我们先来看下，在前端日常开发中，有哪些字段是需要注意的

前端开发常用命名

CSS文件常用命名

除了命名规范，下划线的使用也要注意，- 中划线，仅作为连字符使用，表示某个块或者某个子元素的多单词之间的连接记号。__ 双下划线用来连接块和块的子元素，_ 单下划线用来描述一个块或者块的子元素的一种状态，同时修饰符值与修复符名称之间也用单个下划线。

工具使用技巧

良好的工具可以帮助我们高效的开发项目。前端er在日常开发中接触最多的想必是HTML、CSS、JS、调试这几方面的内容。针对这几个模块，川哥也给我们准备了相对于的开发利器。巧用下面的开发工具，相信你的代码开发速率会有质的飞跃。

CSS代码分析统计工具：检查网站样式字体，字体大小等

语法参考：查看css语法规则

CSS工具：css转换预编译，css各属性可视化效果

Flex-box 帮助：flex-box可视化查看，帮助学习

色系选择：选择合适的色系，对没有审美底子的友好

图文 CSS 语法效果：左侧代码右侧效果

Grid Garden：闯关游戏的方式学习grid

bearcss：基于HTML结构生成CSS样式结构

bootcss可视化布局：拖拽的方式构建HTML结构，可导出代码

jsconsole：web版console

工具函数大全 2：常用工具方法汇总

设计模式大全：很全的设计模式介绍

如何提升自身能力

能力的提升可以分为信息检索、知识获取、总结归纳三个部分，最后的总结归纳部分没有捷径可走，需要你经常使用思维导图进行自身知识体系的总结，建立自己的技能树。下面来看看，有哪些方法可以提高我们的信息检索和知识获取的能力

信息检索

Github搜索技巧

知识的获取强烈依赖渠道和信息差，针对前端开发者，川哥列举了如下的实用网站，灵活运用这些资源，相信在信息获取方面，你会快人一步。

	描述	地址
前端前沿	前端前沿信息获取	https://uptodate.frontendrescue.org/zh/
设计导航	可以获取前端样式设计的资源	http://hao.shejidaren.com/
阿猫阿狗导航	产品用，前端可以开拓视野	https://dh.woshipm.com/
前端开发博客	强烈推荐，内容很全	http://caibaojian.com/links/
Githuber	github作者排行	https://githuber.cn/rank
前端导航网	这是一个很酷炫的前端网站搜集器	https://wangchujiang.com/

讲师介绍

川哥，FCC武汉社区组织者，360前端Leader

《Hello,World公开课》是由开课吧推出的面向广大开发工程师的免费加餐课，集结业内名师大咖，聚焦热门技术和实战解决方案，以专业知识分享交流为桥梁，链接正在创造世界的一群科技主力们，向初心致敬，为技术发烧。无论你是初入职场的应届生，还是准备升职加薪的职场精英，相信这里都有你需要的养料。

指数级提升你开发效率的小技巧