Recommend a few big factory front-end code specification, learned, you can also write poetry like code!

It's night and day 2020-11-12 00:17:02
recommend big factory front-end end

Hello everyone , I'm yours Front end Octopus cat , One doesn't like fish 、 I don't like meow Super Cat ~

brief introduction

Front end Octopus cat from 2016 To join in GitHub, To the present 2020 year , Come on 5 A year .

I believe many people didn't visit GitHub The habit of , So there's always the asymmetry of open source information , What excellent front-end open source projects are worth learning .

Between the initial front end and the advanced front end , The biggest gap may be caused by poor information .

from 2018 Year begins , I've developed the habit of going shopping every day GitHub The habit of , Usually in the morning before going to work or at noon lunch break will go around .

Look at the good front-end projects that open source every day , What are the mainstream front-end technology stacks used , It's worth learning .

So I also collected a lot of good open source projects , I would like to recommend it to you , There will be one to three essays in a week .

I hope you're browsing 、 Learning the process of these open source projects recommended by the front-end Octopus cat , You can learn more about programming 、 Improve programming skills 、 Find the joy of programming .

official account : front end GitHub, Focus on Mining GitHub Excellent front-end open source project , Smooth your front end information asymmetry , cover JavaScript、Vue、React、Node、 Applet 、Flutter、Deno、HTML、CSS、 Data structure and algorithm wait .

The following is a 【 front end GitHub】 Of the 5 Content of the issue .

What I bring to you today is Front end code specification of several large factories .

Front end code specification  

Ten million lines of code , Safety first line ; The front end is not standardized , Two lines of tears of colleagues .


It contains a lot of content :

PC End topic : Quick start 、 File directory 、 Page header 、 Universal title、 Universal foot、 Statistical code 、 Compatibility testing

Mobile theme : Quick start 、 File directory 、 Page header 、REM Layout 、 Universal foot、 Statistical code 、 Share components 、 Compatibility requirements

Double ended official website : Quick start 、 Page Jump

But there's also something about the business , It's not universal .


Compared with Tencent's code specification , I would recommend the bump lab code specification , It's quite complete .

HTML standard

be based on W3C、 Apple developers and other official documents , And combined with the team's daily business needs and the team in the daily development process summed up the experience of the agreement .

Picture specification

Learn about various image format features , Develop a picture specification based on characteristics , Including but not limited to the quality of the picture agreement 、 How to introduce pictures 、 Image merging, etc .

CSS standard

Unified team CSS Code writing and SASS The syntax style of a precompiled language , Provide common media query statements and browser private property reference , And from the business level to standardize the reference of common modules .

Naming specification

from “ Catalog name ”、“ Picture name ”、“ClassName” Naming and other levels of agreement to standardize the naming habits of the team , Enhance the readability of team code .

JavaScript standard

Unified team JS Grammar style and writing habits , Reduce the probability of program errors , It also includes ES6 Grammar norms and best practices for .

Bump lab :


Contains : type 、 object 、 Array 、 character string 、 function 、 attribute 、 Variable 、 promote 、 Comparison operator & Equal sign 、 block 、 notes 、 blank 、 comma 、 A semicolon 、 Type conversion 、 Naming rules 、 Accessors 、 Constructors 、 event 、 modular 、jQuery、ECMAScript 5 Compatibility 、 test 、 performance 、 resources 、JavaScript The style guide says

Airbnb Javascript Style Guide:


JavaScript Coding standards 、HTML、CSS、Less、E-JSON Data transmission standard 、 Modules and loaders 、 Package structure 、 Project directory structure 、 Chart library standard 、react Coding standards .

such as : Indent

  • [ mandatory ] Use  4  Space as an indent level , Not allowed  2  A space or  tab  character .
  • [ mandatory ] switch  Under the  case  and  default  You have to add an indent level .
// good
switch (variable) {
case '1':
// do...
case '2':
// do...
// do...
// bad
switch (variable) {
case '1':
// do...
case '2':
// do...
// do...
Specification document :

Netease coding specification :

CSS standard : A set of rules and methods , Help you structure and manage styles

HTML standard : A series of suggestions and methods , Help you build a simple and rigorous structure

Engineer specifications : Front end page development engineer's workflow and team cooperation specification

But it's not just that , There are more :

JavaScript Standard Style

In addition to many corporate organizations , Many individuals also use specifications in projects .


This is official Vue Style guide for specific code .

If used in engineering Vue, To avoid mistakes 、 Little tangles and antipatterns , This guide is a good reference .

But we're not sure that all the content of the style guide is ideal for all teams or projects .

So based on past experience 、 The surrounding technology stack 、 It is advisable to make a meaningful deviation in personal values .

Official style guide :


How to integrate ES6 New syntax , Applied to coding practice , With the traditional JavaScript Grammar goes together , Write reasonable 、 Easy to read and maintain code .

es6 Programming style :


It contains HTML and CSS.


grammar 、HTML5 doctype、 Language properties 、IE Compatibility mode 、 Character encoding 、 introduce CSS and JavaScript file 、 Practical is king 、 Attribute order 、 Boolean properties 、 Reduce the number of tags 、JavaScript Generated Tags .


grammar 、 Declaration order 、 Do not use @import、 Media query (Media query) The location of 、 Prefixed properties 、 Single line rule statement 、 Attribute declaration in short form 、Less and Sass Nesting in 、Less and Sass Operator in 、 notes 、class name 、 Selectors 、 Code organization .

Bootstrap Coding standards :


At present, most front-end projects will use Can be assembled JavaScrip t and JSX Check tools .

Find the problem

ESLint Statically analyze your code to quickly discover problems .ESLint Built into most text editors , You can use ESLint Run as part of the continuous integration pipeline .

Auto repair

ESLint Many of the problems found can be fixed automatically .ESLint Fix recognizable syntax , So you won't encounter the errors introduced by traditional search and replace algorithms .


Preprocessing code , Using a custom parser , And write with ESLint Built in rules used with your own rules . You can customize ESLint, Make it work exactly the way the project requires .


ESLint Chinese net :


Prettier It's a “ Have a point of view ” Tool formatting code .

In short , This tool can make the output code consistent with the style .

It is also used in most front-end projects at present .



Okay ,【 front end GitHub】 Of the 5 We've finished the issue , For more details, please see the warehouse address below :

Original address :

How to find good open source projects , Take a look at these two articles :GitHub The supernatural skill of mining - How to find excellent open source projects and To tell you the truth , You may even GitHub Search doesn't work - How to accurately search for immortals .

Feel useful ? Collect if you like , By the way, I'd like to say something nice , Your support is my greatest encouragement !

Wechat search “ front end GitHub”, reply “ e-book ” You can get 160 The front end is the essence book .

In the past, the essence of literature

本文为[It's night and day]所创,转载请带上原文链接,感谢

  1. [front end -- JavaScript] knowledge point (IV) -- memory leakage in the project (I)
  2. This mechanism in JS
  3. Vue 3.0 source code learning 1 --- rendering process of components
  4. Learning the realization of canvas and simple drawing
  5. gin里获取http请求过来的参数
  6. vue3的新特性
  7. Get the parameters from HTTP request in gin
  8. New features of vue3
  9. vue-cli 引入腾讯地图(最新 api,rocketmq原理面试
  10. Vue 学习笔记(3,免费Java高级工程师学习资源
  11. Vue 学习笔记(2,Java编程视频教程
  12. Vue cli introduces Tencent maps (the latest API, rocketmq)
  13. Vue learning notes (3, free Java senior engineer learning resources)
  14. Vue learning notes (2, Java programming video tutorial)
  15. 【Vue】—props属性
  16. 【Vue】—创建组件
  17. [Vue] - props attribute
  18. [Vue] - create component
  19. 浅谈vue响应式原理及发布订阅模式和观察者模式
  20. On Vue responsive principle, publish subscribe mode and observer mode
  21. 浅谈vue响应式原理及发布订阅模式和观察者模式
  22. On Vue responsive principle, publish subscribe mode and observer mode
  23. Xiaobai can understand it. It only takes 4 steps to solve the problem of Vue keep alive cache component
  24. Publish, subscribe and observer of design patterns
  25. Summary of common content added in ES6 + (II)
  26. No.8 Vue element admin learning (III) vuex learning and login method analysis
  27. Write a mini webpack project construction tool
  28. Shopping cart (front-end static page preparation)
  29. Introduction to the fluent platform
  30. Webpack5 cache
  31. The difference between drop-down box select option and datalist
  32. CSS review (III)
  33. Node.js学习笔记【七】
  34. Node.js learning notes [VII]
  35. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  36. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  37. 【JQuery框架,Java编程教程视频下载
  38. [jQuery framework, Java programming tutorial video download
  39. Vue Router根据后台数据加载不同的组件(思考->实现->不止于实现)
  40. Vue router loads different components according to background data (thinking - & gt; Implementation - & gt; (more than implementation)
  41. 【Vue,阿里P8大佬亲自教你
  42. 【Vue基础知识总结 5,字节跳动算法工程师面试经验
  43. [Vue, Ali P8 teaches you personally
  44. [Vue basic knowledge summary 5. Interview experience of byte beating Algorithm Engineer
  45. 【问题记录】- 谷歌浏览器 Html生成PDF
  46. [problem record] - PDF generated by Google browser HTML
  47. 【问题记录】- 谷歌浏览器 Html生成PDF
  48. [problem record] - PDF generated by Google browser HTML
  49. 【JavaScript】查漏补缺 —数组中reduce()方法
  50. [JavaScript] leak checking and defect filling - reduce() method in array
  51. 【重识 HTML (3),350道Java面试真题分享
  52. 【重识 HTML (2),Java并发编程必会的多线程你竟然还不会
  53. 【重识 HTML (1),二本Java小菜鸟4面字节跳动被秒成渣渣
  54. [re recognize HTML (3) and share 350 real Java interview questions
  55. [re recognize HTML (2). Multithreading is a must for Java Concurrent Programming. How dare you not
  56. [re recognize HTML (1), two Java rookies' 4-sided bytes beat and become slag in seconds
  57. 【重识 HTML ,nginx面试题阿里
  58. 【重识 HTML (4),ELK原来这么简单
  59. [re recognize HTML, nginx interview questions]
  60. [re recognize HTML (4). Elk is so simple