前端之编码规范总结

最新推荐文章于 2023-06-20 23:30:35 发布

原创最新推荐文章于 2023-06-20 23:30:35 发布 · 569 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#编码规范 #前端

web tips 专栏收录该内容

4 篇文章

订阅专栏

本文总结了前端编码规范，包括HTML的Tab键使用、字符编码声明、标签语义化，CSS的选择器分层、属性顺序和简写，以及JS的变量声明、注释和脚本引入位置。强调编码规范的重要性在于统一性和可读性。

随着web编码的接触时间增长，越来越注重代码的规范性，今天直接对它做一个小结……

HTML

1. Tab键还是两个空格的选择，个人倾向于用Tab键，比较简单，但Tab键不同编辑器，显示的位置是不一样的，建议用双空格，这样不同编辑器打开都是一样的，还是看个人喜欢，主要在于统一；

2.嵌套元素要学会缩进，例如

<body>
  <p>代码规范</p>
</body>

3.对于属性的定义，全部用双引号，统一性，如

<a href="#content" >

4.结束标签不可忽略，如<p></p>；自闭合标签的“/ ” 在HTML5中是可选的，有无标签都是一样的，而之前的版本是需要 / 的；

5.字符编码不要忽略，通过明确声明字符编码，能够确保浏览器快速并容易的判断页面内容的渲染方式，可以避免在 HTML 中使用字符实体标记，从而全部与文档编码一致（一般采用 UTF-8 编码）。如

<head>
  <meta charset="UTF-8">
</head>

6.HTML5的CSS与JS不需要写type属性,这是默认的，如直接

<script src="style.js"></script></span>

7.将属性以class，id，name，data-*，src, for, type, href, title, alt, role的顺序，形成良好的编码习惯；

8.减少标签的数量，比如说有一些span其实是没必要的，就不需要添加了；

9.尽可能少的使用无语义的标签，选择语义化标签，便于开发者阅读，代码的优雅性以及浏览器的识别，下面列了常用的语义化标签：

语义化标签
标签	描述	标签	描述
<header></header>	页面	<nav></nav>	导航链接
<footer></footer>	页脚	<article></article>	文章
<section></section>	区段	<hgroup></hgroup>	标题组合
<aside></aside>	article的附属部分	<h1-6></h1-6>	标题元素

CSS

1.写选择器样式时，要清晰的分层，避免行内样式，行内脚本等，每条声明单独一行，以分号结尾，如果只有一个样式，则可全部一行表示；选择器与左花括号之间留一个空格，右花括号单独成行；选择器与样式之间一个空格，如

.page-one,
.page-two,
.page-three {
  display: none;

  margin: 0;
}

span { font-size: 1.2em; }

2.对于属性值与颜色参数，若小于1，前面的0可省略，如 .5代替0.5；避免在0后跟上单位，如0px后的px直接忽略不写；

3.十六进制值全部小写，易于分辨，并尽量使用简写，如#fff代替#ffffff;

4.选择器的属性利用双引号，统一规范，如 input[ type="text" ]

5.声明顺序根据Position位置属性（如 position, left, top, z-index等），box-model盒模型（如display, float, width, height, margin, padding等）, typographic排字（如font， line-height, color, text-align等），visual视觉其他效果（如background, border, transition等）

6.@的规则放在一起;

7.带有前缀的属性，上下的属性值垂直方向对齐，如

-webkit-transition: width .2s;

transition: width .2s;

8.如果只是设置部分位置时，避免用简写形式，经常综合用的是margin, padding, border-radius, 只需设置单个值，则如margin-top: 2px;代替margin: 2px 0 0 0;

9.重要的命名规范，采用小写字母及减号（-, 不是下划线，也不是驼峰式），名称要简洁易懂，如.btn-save;

10. 多个选择器同一样式，尽量不要超过3个；id名一般不用于样式；

11.尽量少用多重选择器或后代选择器，如ul.list-color 直接为.list-color;

1.多个变量，尽量用一个var在最开始声明，如

var x = 0,

y = 0;

2.适当的注释是需要的，可帮助开发人员理解，以及代码的可修改性;