编码的黄金法则

无论有多少人在同一个项目上工作，都要确保每一行代码看起来都是同一个人编写的。HTML1。语法1).使用两个空格来表示制表符2)。嵌套元素应该缩进一次（两个空格）3)。对于属性的定义，使用双引号4)。不要在自闭合元素的末尾添加斜杠2.HTML5doctype在每个html页面的第一行添加标准模式语句，以确保在每个浏览器中呈现一致。3。语言属性强烈建议为html根元素指定lang属性，以便为文档设置正确的语言。这将帮助语音合成工具确定应该使用的发音，帮助翻译工具确定它们在翻译时应该遵循的规则，等等。4.IE兼容模式IE支持特定的标记来确定应该用于绘制当前页面的IE版本。除非有强烈的特殊需求，否则最好将其设置为边缘模式，以便通知IE采用其支持的最新模式。5。字符编码6。导入CSS和JavaScript文件一般在导入CSS和JavaScript文件时不需要指定type属性7.实用为王尽量使用最少的标签，始终保持最小的复杂度。8.属性顺序classid,namedata-*src,for,type,href,valuetitle,altrole,aria-*9。布尔（boolean）类型的属性不需要赋值。110.减少标签的数量尽量避免多余的父元素。11。如果可能，应避免使用JavaScript生成的标签。CSS1。语法1).用两个空格替换制表符2)。对选择器进行分组时，将单个选择器放在一行中。3).在每个声明块的左大括号前添加一个空格。4).声明块的右花括号应该在单独的一行中。5).在每个声明语句中的:之后应插入一个空格。6).每条语句都应独占一行。7).对于以逗号分隔的属性值，应在每个逗号后插入一个空格（例如，box-shadow）。8).不要在rgb()、rgba()、hsl()、hsla()或rect()值中的逗号后插入空格。9).对于属性值或颜色参数，对于小于1的小数，省略前导0（例如，.5而不是0.5；-.5px而不是-0.5px）。10).十六进制值要全部小写，尽量使用缩写的十六进制值。例如：#fff11)。为选择器中的属性添加双引号，例如input[type="text"]。12).避免为0值指定单位，例如，使用margin:0;而不是保证金：0px;。/*糟糕的CSS*/.selector,.selector-secondary,.selector[type=text]{padding:15px;margin:0px0px15px;background-color:rgba(0,0,0,0.5);box-shadow:0px1px2px#CCC,inset01px0#FFFFFF}/*好的CSS*/.selector,.selector-secondary,.selector[type="text"]{padding:15px;margin-bottom:15px;background-颜色：rgba(0,0,0,.5)；框阴影：01px2px#ccc，插图01px0#fff;}2.声明顺序PositioningBoxmodelTypographicVisual.declaration-order{/*定位*/position:absolute;顶部：0；右：0；底部：0；左：0；z-指数：100；/*盒子模型*/display:block;浮动：对；宽度：100px；高度：100px；*/font:normal13px"HelveticaNeue",sans-serif;行高：1.5；颜色：#333；文本对齐：居中；/*视觉*/背景色：#f5f5f5;;边界半径：3px；/*杂项*/不透明度：1；}3.不要使用@import与标签相比，@import指令慢很多解决方法：使用多个<link>元素通过类似于Sass或Less的CSS预处理器将多个CSS文件编译成一个文件。Rails、Jekyll等系统已经提供了CSS文件合并功能。4.媒体查询（Mediaquery）的位置不应该是它们被捆绑成一个单一的样式表或者放在文档的底部，尽可能靠近相关规则。element{...}.element-avatar{...}.element-selected{...}@媒体（最小宽度：480px）{.element{...}.element-avatar{...}.element-selected{...}}5.前缀属性缩进，使每个属性值垂直对齐，方便多行编辑。/*前缀属性*/.selector{-webkit-box-shadow:01px2pxrgba(0,0,0,.15);框阴影：01px2pxrgba(0,0,0,.15);}6.单行规则语句对于只包含一条语句的样式，建议将语句放在同一行。7.缩写形式的属性声明应尽量限制缩写形式的属性声明的使用。简写属性声明的常见滥用如下：paddingmarginfontbackgroundborderborder-radius/*Badexample*/.element{margin:0010px;背景：红色；背景:url("图片.jpg");边框半径：3px3px00；}/*很好的例子*/.element{margin-bottom:10px;背景色：红色；背景图像：url（“image.jpg”）；边框左上角半径：3px；border-top-right-radius:3px;}8.Less和Sass中的嵌套避免不必要的嵌套。这是因为尽管您可以使用嵌套，但这并不意味着您应该这样做。嵌套只有在必须将样式限制在父元素（即后代选择器）内，并且有多个元素需要嵌套时才使用。//没有嵌套。表>thead>tr>th{...}。table>thead>tr>td{…}//嵌套。表>thead>tr{>th{...}>td{...}}9.Less和Sass中的运算符在括号中的数学表达式中的值、变量和运算符之间添加一个空格。10.注释不要简单地重复组件或类名。对于较长的笔记，一定要写完整的句子；对于一般的笔记，简短的短语就可以了。/*坏例子*//*模态标题*/.modal-header{...}/*好例子*//*.modal-title和.modal-close的包装元素*/.modal-header{...}11.classnaming类名只能出现小写字符和破折号（dashe）（不能是下划线，也不是驼峰式）。破折号应该用于相关的类名（类似于命名空间）（例如，.btn和.btn-danger）。避免过于随意的速记。.btn代表按钮，但.s不代表任何东西。类名应尽可能短且明确。使用有意义的名称。使用有条理或有目的的名称，而不是表象名称。根据最近的父类或基类为新类添加前缀。使用.js-*类来识别行为（与样式相对），并且不要将这些类包含到CSS文件中。/*不好的例子*/.t{...}.red{...}.header{...}/*好的例子*/.tweet{...}.important{...}.tweet-header{...}12、选择器对常用元素使用class，有利于渲染性能的优化。避免为频繁出现的组件使用属性选择器（例如[class^="..."]）。这些因素会影响浏览器性能。选择器应尽可能短，并尽量限制组成选择器的元素数量。建议不要超过3个。仅在必要时将类限制为最近的父元素（也称为后代选择器）（例如，当不使用带前缀的类时——前缀类似于名称空间）。/*不好的例子*/span{...}.page-container#stream.stream-item.tweet.tweet-header.username{...}.avatar{...}/*好的例子*/.avatar{...}.tweet-header.username{...}.tweet.avatar{...}13.代码组织以组件为单位组织代码片段。制定一致的注解规范。使用一致的空格将代码分成块，这有助于扫描更大的文档。如果使用多个CSS文件，将它们拆分为组件而不是页面，因为页面将被重组而组件只会被移动。/*组件部分标题*/.element{...}/**组件部分标题**有时您需要为整个组件包含可选的上下文。如果它足够重要，请在此处执行此操作。*/。元素{..。}/*上下文子组件或修饰符*/.element-heading{...}14.编辑器配置将您的编辑器设置为以下配置以避免常见代码不一致和差异：使用两个空格而不是制表符（软制表符使用空格来表示制表符）。保存文件时，删除尾随空格。将文件编码设置为UTF-8。在文件末尾添加一个空行。