前端开发规范（W3C标准）

最新推荐文章于 2024-04-16 00:56:27 发布

啊啾同学

最新推荐文章于 2024-04-16 00:56:27 发布

阅读量637

点赞数

本文链接：https://blog.csdn.net/weixin_45822952/article/details/115109769

版权

1.结构、行为、样式相分离

2.统一注释

HTML区块注释：

<!
@name:Drop Down Menu
@description:Style of top bar down menu
@author:Alphagirl
!>

CSS注释：

组件块和子组件块以及声明块之间用一行空格分隔子组件之间三空行分隔。

Javascript注释：

1)函数/方法注释必须包含函数说明，有参数和返回值必须使用注释标识。

参数和返回值注释必须包含类型信息和说明，当函数是内部函数、外部函数不可以访问的时候，可以用@inner标识。

/**
*函数描述
*@param {string}p1参数1的说明
*@param {string}p2参数2的说明
*param (number=) p3参数3的说明
@return {object} 返回值描述
*/

function foo(p1,p2,p3){

var p3=p3||10;
return {

p1:p1,
p2:p2,
p3:p3
}

}

2)文件注释

文件注释用于告诉不熟悉这段代码的读者中这个文件包含哪些东西。应该提供文件的大体内容，它的作者、依赖关系、和兼容性信息。

/**
 * @fileoverview Description of file, its uses and information
 * about its dependencies.
 * @author user@meizu.com (Firstname Lastname)
 * Copyright 2015 Meizu Inc. All Rights Reserved.
 */

HTML

*自闭和标签无需闭合、闭合标签需要闭合。

*尽量减少标签的数量。

*class和id单词字母小写、多个单词组成用-分隔。

*标签的属性应该按照特定的顺序出现以保证可读性。

id->class->name->data-xxx->src、for、type、href、title、alt->aria-xxx、role

*属性的定义统一使用双引号

*a标签不允许嵌套div这种约束、属于语义嵌套约束比如a 不允许嵌套 a。

严格嵌套约束在所有的浏览器下都不被允许；而语义嵌套约束，浏览器大多会容错处理，生成的文档树可能相互不太一样。

a标签不可以嵌套交互式元素 <a>、<button>、<select>

p标签不可以嵌套块级元素<div>、h1~h6、<p>、<ul><ol><li> <dl>

<dt><dd>、<form>等

*在HTML5规范当中disabled、checked、selected等属性不用设置值。

语义化：

大段落引用 <blockquote>

一般引用 <cite>

代码标识 code

缩写 abbr

head中的模板

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE-edge,chrome=1">
<title>Style Guide</title>

<meta name="description" content="不超过150个字符">
<meta name="keywords" content="">
<meta name="author" content="name, email@gmail.com">
//为移动端添加 viewport 
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
//ios图标
<link rel="app-touch-icon-presomposed" href="/apple-touch-icon-57x57-precomposed.png">

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml"/>
<link rel="shortcut icon" href="path/to/favicon.ico">

</head>


</html>

css

1)以组件为单位组织代码段

2）制定一致的注释规范

3）组件块和子组件块以及声明块之间用一空行分隔、子组件块之间三行空格

如果使用了多个css文件

4）使用连字符 - 作为 ID、Class 名称界定符，不要驼峰命名法和下划线

5）避免选择器嵌套层级过多，尽量少于 3 级

.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;
}

写css样式的时候应该注意

.declaration-order {
  /* Positioning */
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 100;

  /* Box model */
  display: block;
  box-sizing: border-box;
  width: 100px;
  height: 100px;
  padding: 10px;
  border: 1px solid #e5e5e5;
  border-radius: 3px;
  margin: 10px;
  float: right;
  overflow: hidden;

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

  /* Visual */
  background-color: #f5f5f5;
  color: #fff;
  opacity: .8;

  /* Other */
  cursor: pointer;
}

媒体查询的位置

将媒体查询放在尽可能相关规则的附近，不要将他们打包放在一个单一样式文件或者放在文档底部。

.element { ... }
.element-avatar { ... }
.element-selected { ... }

@media (max-width: 768px) {
  .element { ...}
  .element-avatar { ... }
  .element-selected { ... }
}

不要使用@inport 与link相比 @import要慢很多不光增加额外请求数这还会导致不可预料的问题

链接的样式顺序

a:link->a:visted->a:hover->a:active

无需添加浏览器厂商前缀

当我们的css代码超过了1000行怎么办？

我们会想到组件化的思想 Components(组件)

将网站的模块都作为一个独立的Components

组件命名最少以两个单词命名通过-分离

点赞按钮 .like-button

搜索框 .sreach-form

文章卡片 .article-card

组件中的元素Elements的类名尽可能仅有一个单词

 .search-form {
    > .field { /* ... */ }
    > .action { /* ... */ }
  }

如果需要两个或两个以上的单词表达elements类名,不应该使用中划线和下划线连接应该直接连接

  .profile-box {
    > .firstname { /* ... */ }
    > .lastname { /* ... */ }
    > .avatar { /* ... */ }
  }

任何时候尽量用classnames 标签选择器在使用上没有问题但是其性能上稍弱表意不明

中划线和下划线都可以作为css的class前缀中划线比下划线更容易输出

头像 logo这些元素的应该设置固定的尺寸（宽度、高度...）

如果你需要为你的组件设置定位则应该在组件的（父元素）中处理

性能优化

高消耗的属性有这些：

box-shodows 、border-radius、transparency、transforms、css filters性能杀手。

display: inline-block 后不应该再使用 float；
display: block 后不应该再使用 vertical-align；
display: table-* 后不应该再使用 margin 或者 float；
如果使用基于 javaScript 的动画，尽量使用 requestAnimationFrame. 避免使用 setTimeout, setInterval.
避免通过类似 jQuery animate()-style 改变每帧的样式，使用 CSS 声明动画会得到更好的浏览器优化。
使用 translate 取代 absolute 定位就会得到更好的 fps，动画会更顺滑
一般在 Chrome 中，3D或透视变换（perspective transform）CSS属性和对 opacity 进行 CSS 动画会创建新的图层，在硬件加速渲染通道的优化下，GPU 完成 3D 变形等操作后，将图层进行复合操作（Compesite Layers），从而避免触发浏览器大面积重绘和重排。

下面的布尔表达式都返回 false:

null
undefined
'' 空字符串
0 数字0

但小心下面的, 可都返回 true:

'0' 字符串0
[] 空数组
{} 空对象

for-in 循环只用于 object/map/hash 的遍历, 对 Array 用 for-in 循环有时会出错. 因为它并不是从 0 到 length - 1 进行遍历, 而是所有出现在对象及其原型链的键值。

避免使用 jQuery 实现动画

禁止使用 slideUp/Down() fadeIn/fadeOut() 等方法；
尽量不使用 animate() 方法；

解决移动端click有延迟问题

FastClick 的使用方法非常简单，在 window load 事件之后，在 <body> 上调用FastClick.attach() 即可
window.addEventListener( "load", function() {
    FastClick.attach( document.body );
}, false );

啊啾同学

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
前端开发规范（W3C标准）

1.结构、行为、样式相分离2.统一注释HTML区块注释：<!@name:Drop Down Menu@description:Style of top bar down menu@author:Alphagirl!>CSS注释：组件块和子组件块以及声明块之间用一行空格分隔子组件之间三空行分隔。Javascript注释：1)函数/方法注释必须包含函数说明，有参数和返回值必须使用注释标识。参数和返回值注释必须包含类型信息和说明，当函数是内部函数、外部函数不
复制链接

扫一扫