代码并不是一写就写完的，因为代码是写给未来的自己和别人看的。那么如何保证别人理解你代码的意思呢？如果有一套合适的规范，以后维护代码岂不是效率很高！常用命名规则1.大驼峰命名法，首字母大写FirstOne2。小驼峰命名法，第一个单词首字母小写，其他同firstOne3。蛇形命名法，单词先用下划线连接_one4。减号命名法，单词以减号分隔。这些命名法的最大好处是，你可以很容易地将单词与代码规范中的那些潜规则区分开来。html代码中的潜规则1.html不区分大小写浏览器解析标签不区分大小写。
//编译成这样虽然里面的class、id或者其他自定义属性都支持大写。但是基本不使用大写，所以建议html中的代码统一采用蛇命名方式和减号命名方式（好像是因为早期的xhtml不支持大写）2.语义标签其实很容易掌握，但了解这些语义标签的默认属性不容易重置。（如果你想知道如何重置属性，请阅读我的文章《开发效率创新高，只因收下了这波 CSS 操作》）个人感觉语义标签有两个主要优点。他们支持seo搜索，读起来很舒服，不会被别人喷。语义标签就这么多，掌握就是掌握。有实实在在的好处，建议大家掌握。JS代码中的潜规则JS是区分大小写的，所以常用的命名法是驼峰命名法。但是还有很多技巧：1.构造函数采用大驼峰命名方式（或者es6的class类）//构造函数简单的就是一个newfunctionFistOne(){}newFirstOne()//class符合以下语法糖classFirstOne(){}2.常量使用全部大写的蛇形命名法。常量是不能改变的变量。为了引人注目，它们都遵循全大写的蛇形命名法constFIRST_ONE=33。其他变量使用小驼峰命名法4.类型名缩写JS是一种弱类型语言，写起来非常方便。但是我想你一定遇到过下面这种情况//case1，一个名为true的字符串leta=trueletb='true'//case2，一个全是数字的字符串letc='123'letd=123candd这样就可以了说，因为js中有隐式转换。比较的话还是相等的，但是a和b不相等。我在和后端联调的时候遇到过这种情况。他告诉我，返回的是一个boolean类型的值，返回的是一个字符串。我只是用他作为判断条件leta='false'//假设这是后端返回给我的boolean值if(a){//XXXXX某列操作}结果可想而知，值明明是false总是执行。那时，我几乎怀疑人生，所以你能看到这篇文章是幸运的。这里有一个细节：GoogleConsole打印值时有颜色变化，字符串是纯黑色，其他类型的值是深蓝色。这部分说了这么多，可见类型的重要性，那么有哪些好呢？命名方法呢？类型缩写例如arrayaaApple一组苹果numbernnApple苹果的个数stringssAppleAmount,反正是一个字符串对象ooApple一个苹果对象functionfnfnApple关于苹果的函数booleanbbApple是否有一个苹果当然这部分是仁者智者不同。如果大家有更好的命名方式，欢迎评论交流。5.那些特定于功能的动词。动词意义类型值有。有什么吗？获取某个布尔值集并设置一些没有返回值的东西。这部分展开了。欢迎全能同学对拓展发表意见。6.合理评价。如果你看评论说第一反应是看源码，那好吧，我跟你没关系。..场景一：函数注解关键字含义@param{TYPE}传入的参数要说明支持什么类型@return{TYPE}返回的类型要说明支持什么类型。无返回值void@author作者信息@date创建时间@example例如/***@paramdate{Date|timestamp}需要格式化的时间*@paramformat{string}支持的关键字yyyyMMddhhmmss*@return{string}*@Authormrxu*@DateOctober13,2019*@Example*1570929141012->October15,2019(1570929141012,'yyyyyearMMmonthdd')*/functionFormat(date,format)上面的字符串写起来挺累的，所以需要快速生成代码片段（有兴趣的同学可以看我之前的文章《如何让 vscode 变成你的开发神器?》）CSS代码中的潜规则1.大写字母前面不能出现之前说过html标签是不区分大小写的，虽然属性值支持大写。但是，不建议大写。减号命名方式有一个问题就是双击不能选中，但是我偶然从别人的文章评论中找到了一个方法来设置双击选择减号命名方式的问题：//vscode或者sublime设置加上这个正则匹配可以选择wordSeparators":"./\\()\"':,.;<>~!@#$%^&*|+=[]{}`~?",2.style本身也是一个可分类的显示属性attributetext属性和其他装饰属性displaywidthfontvisibilityheighttext-alignpositionmargintext-decorationfloatpaddingvertical-alignclearborderwhite-spacelist-styleoverflowcolortopmin-widthbackground建议先写display属性->self属性（boxModel属性）->text属性等修改3.BEM布局块：模块，词间名称-连接元素：元素，模块的子元素，与带有__修饰符的块：模块的修改、变体、特殊定义module，与-和blockconnection//例如.person{}.person__header{}.person__main{}.person__footer{}.person--cap{}.person--clothing{}.person--shoe{}//现在预编译的css编译器也很流行，所以贴个css预编译器，会产生和上面一样的效果。person{&__header{}&__main{}&__footer{}&--cap{}&--clothing{}&--shoe{}}个人感觉css命名是最复杂的。因为样式代码非常多，而且有个潜规则，html、css、js代码是分开的。但是把html和css代码分开真的很难。刚开始写代码的时候，html和css代码是分开的。后来，UI允许你调整样式，只是一些简单的字体和间距。定位到对应的位置对我来说很麻烦，只好直接在行里写样式，重新设置样式。由于只有一两个属性，因此限定名称尤为重要。不幸的是，由于空间的原因，我不会在这篇文章中详细介绍BEM，因为这是一个很大的话题，但我需要你确保你了解这些东西。但是，我发现了两篇高质量的文章。有兴趣的可以看看这两篇文章：【译文】这些CSS命名约定会为你节省很多调试时间都涵盖了。还有一些很详细的就不说了，比如js中的隐藏变量，css中的属性尽量简写。