代码规范总结

代码规范在合作开发中极为重要,一个合格的程序员,代码规范必须掌握。

HTML

  • 用两个空格来代替一个tab(因为在不同的编辑器中tab等于多少个空格是不一样的)

  • 嵌套元素应该缩进一次(相当于两个空格)

  • 属性的定义都用双引号,而不要单引号

  • 不要在自闭合的元素尾部添加斜线

  • HTML5 doctype
    为这个HTML页面添加标准模式

<!DOCTYPE html>
  • 引入css、js文件,一般不用指定type,因为text/css和type/javascript分别是它们的默认值

CSS

  • 在为选择器分组时候,应该将单独的选择器放在一行
/* Good CSS */
.selector,
.selector-secondary,
.selector[type="text"] {
  padding: 15px;
  margin-bottom: 15px;
  background-color: rgba(0,0,0,.5);
  box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff;
}
  • 为了获得准确的错误报告,每条声明都应该独占一行
  • 十六进制应该小写,如#fff.还有尽量使用小写形式
  • 为选择器的属性加上双引号
input[type="text"]
  • 避免为0添加单位
margin:0;
  • 声明顺序
    1.Positioning(位置)
    2.Box model(盒子模型)
    3.Typographic(排版)
    4.Visual(视觉)
.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box-model */
  display: block;
  float: right;
  width: 100px;
  height: 100px;

  /* Typography */
  font: normal 13px "Helvetica Neue", sans-serif;
  line-height: 1.5;
  color: #333;
  text-align: center;

  /* Visual */
  background-color: #f5f5f5;
  border: 1px solid #e5e5e5;
  border-radius: 3px;

  /* Misc */
  opacity: 1;
}
  • 不要使用@import
  • 注释(自我描述、易于他人理解)
  • class的命名。注意class的命名应该只能包括小写字符和破折号(不是下划线也不是驼峰)。应该尽可能短,但是含义务必明确。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

友情链接更多精彩内容