前端开发规范

PM吃瓜

发布于 2019-08-12 14:48:17

9080

发布于 2019-08-12 14:48:17

文章被收录于专栏：PM吃瓜(公众号)PM吃瓜(公众号)

基本原则

结构、样式、行为分离

尽量确保文档和模板只包含 HTML 结构，样式都放到样式表里，行为都放到脚本里。

缩进

统一两个空格缩进（总之缩进统一即可），不要使用 Tab 或者 Tab、空格混搭。

文件编码

使用不带 BOM 的 UTF-8 编码。

在 HTML中指定编码 <meta charset="utf-8"> ；
无需使用@charset指定样式表的编码，它默认为UTF-8（参考 @charset）；

一律使用小写字母

<!-- Recommended -->
<img src="google.png" alt="Google">
<!-- Not recommended -->
<A HREF="/">Home</A>

/* Recommended */
color: #e5e5e5;
/* Not recommended */
color: #E5E5E5;

省略外链资源 URL 协议部分

省略外链资源（图片及其它媒体资源）URL 中的 http / https 协议，使 URL 成为相对地址

<!-- Recommended -->
<script src="//www.w3cschool.cn/statics/js/autotrack.js"></script>
<!-- Not recommended -->
<script src="http://www.w3cschool.cn/statics/js/autotrack.js"></script>

/* Recommended */
.example {
  background: url(//www.google.com/images/example);
}
/* Not recommended */
.example {
  background: url(http://www.google.com/images/example);
}

统一注释

通过配置编辑器，可以提供快捷键来输出一致认可的注释模式。

/****************************HTML************************/

Class 与 ID

class 应以功能或内容命名，不以表现形式命名；
class 与 id 单词字母小写，多个单词组成时，采用中划线-分隔；
使用唯一的 id 作为 Javascript hook, 同时避免创建无样式信息的 class；

<!-- Not recommended -->
<div class="j-hook left contentWrapper"></div>
<!-- Recommended -->
<div id="j-hook" class="sidebar content-wrapper"></div>

严格嵌套约束

inline-Level 元素，仅可以包含文本或其它 inline-Level 元素;
<a>里不可以嵌套交互式元素<a>、<button>、<select>等;
<p>里不可以嵌套块级元素<div>、<h1>~<h6>、<p>、<ul>/<ol>/<li>、<dl>/<dt>/<dd>、<form>等。

语义化

没有 CSS 的 HTML 是一个语义系统而不是 UI 系统。

通常情况下，每个标签都是有语义的，所谓语义就是你的衣服分为外套，裤子，裙子，内裤等，各自有对应的功能和含义。所以你总不能把内裤套在脖子上吧。

此外语义化的 HTML 结构，有助于机器（搜索引擎）理解，另一方面多人协作时，能迅速了解开发者意图

HEAD

文档类型

为每个 HTML 页面的第一行添加标准模式（standard mode）的声明，这样能够确保在每个浏览器中拥有一致的表现。

<!DOCTYPE html>

字符编码

以无 BOM 的 utf-8 编码作为文件格式;
指定字符编码的 meta 必须是 head 的第一个直接子元素；

SEO 优化

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <!-- SEO -->
    <title>Style Guide</title>
    <meta name="keywords" content="your keywords">
    <meta name="description" content="your description">
    <meta name="author" content="author,email address">
</head>

viewport

viewport: 一般指的是浏览器窗口内容区的大小，不包含工具条、选项卡等内容；
width: 浏览器宽度，输出设备中的页面可见区域宽度；
device-width: 设备分辨率宽度，输出设备的屏幕可见宽度；
initial-scale: 初始缩放比例；
maximum-scale: 最大缩放比例；

<meta name="viewport" content="width=device-width, initial-scale=1.0">

此手册是在开发中积累下来的经验和参考其它规范/指南制定的，它只是起指导作用，除个别条目强制之外，大多数为非强制约束，开发者可根据自己的实际情况自行决定是否要遵守该指南只是保证大方向一致性和最佳实践的阶段性总结，不是最后结论

本文参与腾讯云自媒体分享计划，分享自微信公众号。

原始发表：2019-04-06，如有侵权请联系 cloudcommunity@tencent.com 删除

php

html

c++

本文分享自 Tech爬虫微信公众号，前往查看

如有侵权，请联系 cloudcommunity@tencent.com 删除。

本文参与腾讯云自媒体分享计划，欢迎热爱写作的你一起参与！

php

html

c++

登录后参与评论

0 条评论

热度