HTML、CSS、JS开发规范

最新推荐文章于 2024-06-22 23:29:57 发布

一月清辉

最新推荐文章于 2024-06-22 23:29:57 发布

阅读量465

点赞数

本文链接：https://blog.csdn.net/yiyueqinghui/article/details/121010545

版权

javascript 同时被 3 个专栏收录

134 篇文章 15 订阅

订阅专栏

css布局

42 篇文章 5 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

(一)、HTML规范

1、img标签要写alt属性

如果图片显示不出来，就直接alt提示的内容。

<img src="company-logo.svg"  />    // ✗ avoid
<img src="company-logo.svg" alt="ABC CompanyLogo"/> // ✓  ok

2、自定义属性要以data-开头

自己添加的非标准的属性要以data-开头，否则w3c会认为是不规范的

<div count="5"></div>    // ✗ avoid
<div data-count="5"></div> // ✓  ok

3、td要在tr里面，li要在ul/ol里面

4、ul/ol的直接子元素只能是li，同样，tr的直接子元素都应该是td

// ✗ avoid
<ol>          
    <span>123</span>
    <li>a</li>
    <li>b</li>
</ol>

// ✓  ok
<ol>          
    <li>a</li>
    <li>b</li>
</ol>

5、自定义属性要以data-开头

自己添加的非标准的属性要以data-开头，否则w3c会认为是不规范的

<div count="5"></div>    // ✗ avoid
<div data-count="5"></div> // ✓  ok

6、行内元素里面不可使用块级元素

行内元素内部套块元素，可能导致行内元素标签无法正常点击，如果非要行内套块，则可通过display将行内元素改为块元素

// ✗ avoid
<a href="/listing?id=123">
    <div></div>
</a>

// ✓  ok
<a href="/listing?id=123" style="display:block;">
    <div></div>
</a>

7、每个页面要写<!DOCType html>,设置页面的渲染模式为标准模式

如果没有写，则会变成怪异模式，从而影响页面的布局

8、不要在DOM中穿插style与script，script脚本放在文件结尾

script不要写在head标签里面，会阻碍页面加载

// ✗ avoid
<body>
  <div></div>
  <script>
  ...
  </script>
  <p></p>
</body>

// ✓  ok
<body>
  <div></div>
  <p></p>
</body>  
<script>
  ...
</script>

9、样式不能写在body里,统一放在head标签里

   样式不能写在body里，写在body里会导致渲染两次，特别是写得越靠后，可能会出现闪屏的情况，比如上面的已经渲染好了，突然遇到一个style标签，导致它要重新渲染，这样页面就闪了一下，影响用户体验。

   css如果不多，也推荐写成style标签直接嵌在页面上，因为如果搞个外链，浏览器需要先做域名解析，然后再建立连接，接着才是下载，这一套下来可能已经过了0.5s/1s，甚至更多。而写在页面的CSS虽然无法缓存，但是本身它也不会很大，再加gzip压缩，基本上在50k以内。

10、html要加上lang的属性

// ✓  ok

//英文的网页
<html lang="en">     //表示是英文的网页
<html lang="en-US">  //表示是美国英语的网页

//中文的网页
<html lang="zh-CN">

11、在head标签写上charset的meta标签，指定编码格式

// ✓  ok
<head>
   <meta charset="utf-8">
</head>

12、img中src为空的问题

有时候可能你需要在写一个空的img标签，然后在JS里面动态地给它赋src，因此可能会这么写：

// ✗ avoid
<img src="" alt>

但是这样写会有问题，如果你写了一个空的src，会导致浏览器认为src就是当前页面链接，然后会再一次请求当前页面，就跟你写一个a标签的href为空类似。如果是background-image也会有类似的问题。这个时候怎么办呢？

// ✓  ok

// 第一种是把src写成about:blank,去加载一个空白页面
<img src="about:blank" alt>

// 第二种是写一个1px的透明像素的base64
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

13、行内元素之间，代码换行引起的空格问题

行内与块、块与块之间换行不会引起空格问题

<form>
    <label>Email:</label>
    <input type="email">
</form>

如上，在label和input中间会有一个空格，这个空格是两个行内元素之间换行引起的。

解决办法如下：

//第一种，将两个行内元素放一起，不要换行（不推荐，不利于阅读）
<form>
    <label>Email:</label><input type="email">
</form>

//第二种，可以给父级font-size：0 然后再给子元素设置自己的font-size;
<form style="font-size:0;"> 
    <label style="font-size:13px;">Email:</label>
    <input style="font-size:13px;"  type="email">
</form>

//第三种，子元素浮动，父级清除浮动;
<form style="overflow:hidden;"> 
    <label style="float:left;">Email:</label>
    <input style="float:left;"  type="email">
</form>

14、类的命名使用小写字母加中划线连接

// ✗ avoid
<div class="userinfo"></div>
<div class="userInfo"></div>
<div class="user_info"></div>

// ✓  ok
<div class="user-info"></div>

15、防止同一标签上同一属性的重复出现

// ✗ avoid
<input class="books" type="text" name="books" class="valid">

// ✓  ok
<input class="books valid" type="text" name="books">

16、不推荐使用属性设置样式,能用CSS设置的就用CSS （canvas除外）

属性上设置的样式可能会在safari上面是不支持的

// ✗ avoid

// img 属性设置其宽高
<img src="test.jpg" alt width="400" height="300" /> 

// table 设置边框
<table border="1"></table>

// ✓  ok

// 如果你用CSS设置的话它会变成拉伸，变得比较模糊
<canvas width="800" height="600"></canvas>

17、不要在https的链接里写http的图片

只要https的网页请求了一张http的图片，就会导致浏览器地址栏左边的小锁没有了，一般不要写死，写成根据当前域名的协议去加载，用//开头：

// ✓  ok
<img src=”//static.chimeroi.com/hello-world.jpg”>

(二)、CSS规范

1、CSS书写顺序

1、位置属性(position, top, right, z-index, display, float等)
2、大小(width, height, padding, margin)
3、文字系列(font, line-height, letter-spacing, color- text-align等)
4、背景(background, border等)
5、其他(animation, transition等)

// ✗ avoid
.example {
  color: red;
  z-index: 1;
  background-color: #dfdfdf;
  display: inline-block;
  font-size: 20px;
  height: 100px;
}

// ✓  ok
.example {
  color: red;
  z-index: 1;
  background-color: #dfdfdf;
  display: inline-block;
  font-size: 20px;
  height: 100px;
}

2、使用CSS缩写属性

// ✗ avoid
.list-box {
  font-family: serif;
  font-size: 20px;
  line-height: 1.5;
  padding-bottom: 10px;
  padding-top: 10px;
  padding-left: 5px;
  padding-right: 5px;
}

// ✓  ok
.list-box {
  font: 20px/1.5 serif;
  padding: 10px 5px;
}

3、去掉小数点前面的0

.example {
  letter-space: .5em;    // ✓  ok
  padding-top: 0.8em;    // ✗ avoid 
}

4、命名语义化，可简写，但前提是不影响语义化

// ✗ avoid
.author{
  color: #dfdfdf;
}

// 简写为
.atr{
  color: #dfdfdf; 
}

// ✓  ok
.navigation {
  font-size: 20px;
}

// 简写为
.nav {
  font: 20px/1.5 serif;
  padding: 10px 5px;
}

5、命名语义化，多个单词用中横线相连

// ✗ avoid
.maintitle {
  color: #dfdfdf;
}
.mainTitle {
  color: #dfdfdf; 
}
.main_title {
  color: #dfdfdf; 
}

// ✓  ok
.main-title {
  color: #dfdfdf;
}

6、id是唯一的，不可重复

7、若选择器表示状态, 可为选择器添加状态前缀

比如下图是添加了“.is-”前缀。

// ✗ avoid
.active {
  color: 'red';
}

// ✓  ok
.is-active {
  color: 'red';
}

8、常用的CSS命名字段

 头：header                内容：content/container
 尾：footer                导航：nav
 侧栏：sidebar             栏目：column
 左右中：left right center 登录条：loginbar
 标志：logo                广告：banner
 页面主体：main             热点：hot
 新闻：news                下载：download
 子导航：subnav             菜单：menu
 子菜单：submenu            搜索：search
 友情链接：friendlink       页脚：footer
 版权：copyright            滚动：scroll
 内容：content              标签：tags
 文章列表：list             提示信息：msg
 小技巧：tips               栏目标题：title
 加入：joinus               指南：guild
 服务：service              注册：regsiter
 状态：status               投票：vote
 合作伙伴：partner          页面外围控制整体布局宽度：wrapper
 按钮：btn

9、CSS文件命名

1. 一律小写;
1. 尽量用英文;
1. 多个单词用中横线相连

常用文件名

 主要的 master.css              模块 module.css
 基本共用 base.css              布局、版面 layout.css
 主题 themes.css                专栏 columns.css
 文字 font.css                  表单 forms.css
 补丁 mend.css                  打印 print.css

(三)、 Javascript 开发规范

1、变量与函数名统一采用小写驼峰命名、常量使用全部大写，字母之间用下划线分割

function my_function () { }    // ✗ avoid
function myFunction () { }     // ✓ ok

var my_var = 'hello'           // ✗ avoid
var myVar = 'hello'            // ✓ ok

const MAXSTOCKCOUNT = 1000        // ✗ avoid
const MAX_STOCK_COUNT = 1000        // ✓ ok

2、使用两个空格进行缩进

function hello (name) {
  console.log('hi', name)
}

3、除需要转义的情况外，字符串统一使用单引号

console.log('hello there')   // 无需转义
$("<div class='box'>")       // 需要转义

4、不要定义未使用的变量

function myFunction () {
  var result = something()   // ✗ avoid (result 无任何地方调用)
}

5、始终使用 === 替代 ==

if (name === 'John') { } // ✓ ok
if (name == 'John') { }    // ✗ avoid

if (name !== 'John') { }    // ✓ ok
if (name != 'John') { }    // ✗ avoid

6、字符串拼接操作符 (Infix operators) 之间要留空格

var x = 2
var message = 'hello, ' + name + '!'   // ✓ ok
var message2 = 'hello, '+name+'!'      // ✗ avoid

7、逗号后面加空格

// ✓ ok
var list = [1, 2, 3, 4]
function greet (name, options) { ... }

// ✗ avoid
var list = [1,2,3,4]
function greet (name,options) { ... }

8、函数声明时括号与函数名间加空格。

function name (arg) { ... }   // ✓ ok
function name(arg) { ... }    // ✗ avoid

9、else 关键字要与花括号保持在同一行

// ✓ ok
if (condition) {
  // ...
} else {
  // ...
}

// ✗ avoid
if (condition)
{
  // ...
}
else
{
  // ...
}

10、多行 if 语句的的括号不能省

// ✓ ok
if (options.quiet !== true) console.log('done')

// ✓ ok
if (options.quiet !== true) {
  console.log('done')
}

// ✗ avoid
if (options.quiet !== true)
  console.log('done')

12、使用浏览器全局变量时加上 window. 前缀

不包括: document, console and navigator.

window.alert('hi')   // ✓ ok

13、不允许有连续多行空行。

// ✓ ok
var value = 'hello world'
console.log(value)

// ✗ avoid
var value = 'hello world'


console.log(value)

14、对于三元运算符** `?` 和 `:` 与他们所负责的代码处于同一行

// ✓ ok 
var location = env.development ? 'localhost' : 'www.api.com'

// ✓ ok
var location = env.development
  ? 'localhost'
  : 'www.api.com'

// ✗ avoid
var location = env.development ?
  'localhost' :
  'www.api.com'

15、每个 var 关键字单独声明一个变量

// ✓ ok
var silent = true
var verbose = true

// ✗ avoid
var silent = true, verbose = true

// ✗ avoid
var silent = true,
    verbose = true

16、单行代码块两边加空格

function foo () {return true}    // ✗ avoid
function foo () { return true }  // ✓ ok

17、对象不允许有多余的行末逗号，始终将逗号置于行末

// ✗ avoid
var obj = {
  name:'Jony',
  message: 'hello',   // 多余行未逗号
}
var obj = {
  name:'Jony'
  ,message: 'hello'  // 逗号未始终放于行末
}

// ✓  ok
var obj = {
  name:'Jony',
  message: 'hello'   
}

18、点号操作符须与属性需在同一行

console.
  log('hello')  // ✗ avoid

console.log('hello') // ✓ ok

19、函数调用时标识符与括号间不留间隔

console.log ('hello') // ✗ avoid
console.log('hello')  // ✓ ok

20、键值对当中冒号与值之间要留空白

var obj = { 'key' : 'value' }    // ✗ avoid
var obj = { 'key' :'value' }     // ✗ avoid
var obj = { 'key':'value' }      // ✗ avoid
var obj = { 'key': 'value' }     // ✓ ok

21、构造函数要以大写字母开头

function animal () {}
var dog = new animal()    // ✗ avoid

function Animal () {}
var dog = new Animal()    // ✓ ok

22、无参的构造函数调用时要带上括号

function Animal () {}
var dog = new Animal    // ✗ avoid
var dog = new Animal()  // ✓ ok

23、子类的构造器中一定要调用 super

class Dog {
  constructor () {
    super()   // ✗ avoid
  }
}

class Dog extends Mammal {
  constructor () {
    super()   // ✓ ok
  }
}

24、定义变量时使用数组字面量而不是构造器

var nums = new Array(1, 2, 3)   // ✗ avoid
var nums = [1, 2, 3]            // ✓ ok

25、对象字面量中不要定义重复的属性

var user = {
  name: 'Jane Doe',
  name: 'John Doe'    // ✗ avoid
}

26、同一模块有多个导入时一次性写完

import { myFunc1 } from 'module'
import { myFunc2 } from 'module'          // ✗ avoid

import { myFunc1, myFunc2 } from 'module' // ✓ ok

27、避免不必要的布尔转换

const result = true
if (!!result) {   // ✗ avoid
  // ...
}

if (result) {     // ✓ ok
  // ...
}

28、switch 一定要使用 break 来将条件分支正常中断

// ✗ avoid
switch (filter) {
  case 1:
    doSomething()    
  case 2:
    doSomethingElse()
}

// ✓ ok
switch (filter) {
  case 1:
    doSomething()
    break         
  case 2:
    doSomethingElse()
}

29、不要省去小数点前面的0

const discount = .5      // ✗ avoid
const discount = 0.5     // ✓ ok

30、正确使用 ES6 中的字符串模板

const message = 'Hello ${name}'   // ✗ avoid
const message = `Hello ${name}`   // ✓ ok

31、用 throw 抛错时，抛出 Error 对象而不是字符串

throw 'error'               // ✗ avoid
throw new Error('error')    // ✓ ok

32、不要使用 undefined 来初始化变量

let name = undefined    // ✗ avoid

let name
name = 'value'          // ✓ ok

33、return，throw，continue 和 break 后不要再跟代码

function doSomething () {
  return true
  console.log('never called')     // ✗ avoid
}

34、禁止多余的构造器

class Car {
  constructor () {      // ✗ avoid
  }
}

35、遇到分号时, 空格要留分号后面，不留前面

for (let i = 0 ;i < items.length ;i++) {...}    // ✗ avoid
for (let i = 0; i < items.length; i++) {...}    // ✓ ok

36、针对接口返回的数据，必须做数据格式的验证

36.1、为什么要验证

 在对接口返回数据处理时，浏览器常见的报错如下：
 `xxx is not a function`
 `xxx is not property of xxx`
 这种报错，大多是由于返回的数据类型与预期的数据类型不一致，而你没有对数据类型进行判定，就调用了相应数据类型的方法。

36.2、常见的数据类型判定方法

数组类型Array：

Array.isArray(参数)、参数.constructor === Array

对象类型Object：
```
参数.constructor === Object
```

字符串String:

参数.constructor === String  、 typeof 参数 === 'string'

数字Number:

参数.constructor === Number  、 typeof 参数 === 'number'

布尔值Boolean:

参数.constructor === Boolean  、 typeof 参数 === 'boolean'

一月清辉

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

HTML、CSS、JS开发规范

(一)、HTML规范

1、img标签要写alt属性

2、自定义属性要以data-开头

3、td要在tr里面，li要在ul/ol里面

4、ul/ol的直接子元素只能是li，同样，tr的直接子元素都应该是td

5、自定义属性要以data-开头

6、行内元素里面不可使用块级元素

7、每个页面要写<!DOCType html>,设置页面的渲染模式为标准模式

8、不要在DOM中穿插style与script，script脚本放在文件结尾

9、样式不能写在body里,统一放在head标签里

10、html要加上lang的属性

11、在head标签写上charset的meta标签，指定编码格式

12、img中src为空的问题

13、行内元素之间，代码换行引起的空格问题

14、类的命名使用小写字母加中划线连接

15、防止同一标签上同一属性的重复出现

16、不推荐使用属性设置样式,能用CSS设置的就用CSS （canvas除外）

17、不要在https的链接里写http的图片

(二)、CSS规范

1、CSS书写顺序

2、使用CSS缩写属性

3、去掉小数点前面的0

4、命名语义化，可简写，但前提是不影响语义化

5、命名语义化，多个单词用中横线相连

6、id是唯一的，不可重复

7、若选择器表示状态, 可为选择器添加状态前缀

8、常用的CSS命名字段

9、CSS文件命名

(三)、 Javascript 开发规范

1、 变量与函数名统一采用小写驼峰命名、常量使用全部大写，字母之间用下划线分割

2、使用两个空格进行缩进

3、除需要转义的情况外，字符串统一使用单引号

4、不要定义未使用的变量

5、始终使用 === 替代 ==

6、字符串拼接操作符 (Infix operators) 之间要留空格

7、逗号后面加空格

8、函数声明时括号与函数名间加空格。

9、else 关键字要与花括号保持在同一行

10、多行 if 语句的的括号不能省

12、使用浏览器全局变量时加上 window. 前缀

13、不允许有连续多行空行。

14、对于三元运算符** ? 和 : 与他们所负责的代码处于同一行

15、每个 var 关键字单独声明一个变量

16、单行代码块两边加空格

17、对象不允许有多余的行末逗号，始终将逗号置于行末

18、点号操作符须与属性需在同一行

19、函数调用时标识符与括号间不留间隔

20、键值对当中冒号与值之间要留空白

21、构造函数要以大写字母开头

22、无参的构造函数调用时要带上括号

23、子类的构造器中一定要调用 super

24、定义变量时使用数组字面量而不是构造器

25、对象字面量中不要定义重复的属性

26、同一模块有多个导入时一次性写完

27、避免不必要的布尔转换

28、switch 一定要使用 break 来将条件分支正常中断

29、不要省去小数点前面的0

30、正确使用 ES6 中的字符串模板

31、用 throw 抛错时，抛出 Error 对象而不是字符串

32、不要使用 undefined 来初始化变量

33、return，throw，continue 和 break 后不要再跟代码

34、禁止多余的构造器

35、遇到分号时, 空格要留分号后面，不留前面

36、针对接口返回的数据，必须做数据格式的验证

36.1、为什么要验证

36.2、常见的数据类型判定方法

1、变量与函数名统一采用小写驼峰命名、常量使用全部大写，字母之间用下划线分割

14、对于三元运算符** `?` 和 `:` 与他们所负责的代码处于同一行