代码规范文档学习笔记

命名规则

  1. 项目、JS、CSS、SCSS、HTML 全小写,下划线分割 my_project_name
  2. 目录命名 参照项目命名,注意复数命名 scripts,styles

HTML书写规范

  • 嵌套字节缩进
  • 属性使用双引号,名字全小写,中划线分割
  • 自动闭合标签避免结尾使用斜线

<html>
    <head>
        <title>Page titletitle>
    head>
    <body>
        <img src="images/company_logo.png" alt="Company">

        <h1 class="hello-world">Hello, world!h1>
    body>
html>
  • HTML标签加上lang属性
  • doctype大写
  • 字符编码写在head标签中
  • IE兼容模式,用 标签可以指定页面应该用什么版本的IE来渲染;

<html>
    <head>
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    head>
    ...
html>
  • 引入css,js不需要指明type,有默认值
  • 属性顺序出现,保证易读性 class—id—name—data-—src, for, type, href, value , max-length, max, min, pattern—placeholder, title, alt—aria-, role—required, readonly, disabled
  • boolean属性存在表示取值为true,反之false
  • 尽量避免在JS中生成标签

CSS书写规范

  • 末尾分号

空格

不需要空格:
- 属性名后
- 多个规则的分隔符’,’前
- !important ‘!’后
- 属性值中’(‘后和’)’前
- 行末不要有多余的空格
需要空格:

  • 属性值前
  • 选择器’>’, ‘+’, ‘~’前后
  • ‘{‘前
  • !important ‘!’前
  • @else 前后
  • 属性值中的’,’后
  • 注释’/‘后和’/’前

文本最后和‘}’后保留空行

/* not good */
.element {
    ...
}
.dialog {
    color: red;
    &:after {
        ...
    }
}

/* good */
.element {
    ...
}

.dialog {
    color: red;

    &:after {
        ...
    }
}

JavaScript 书写规范

  • 单行长度不要超过80
  • 一个函数作用域中所有的变量声明尽量提到函数首部,用一个var声明,不允许出现两个连续的var声明。
  • 无论是函数声明还是函数表达式,’(‘前不要空格,但’{‘前一定要有空格;

你可能感兴趣的:(代码规范)