前端开发规范

基本原则

结构、样式、行为分离

尽量确保文档和模板只包含 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************************/

标签

  • 自闭合(self-closing)标签,无需闭合 ( 例如: img input br hr 等 );
  • 可选的闭合标签(closing tag),需闭合 ( 例如:</li></body> );
  • 尽量减少标签数量;

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>等。

语义化

没有 CSSHTML 是一个语义系统而不是 UI 系统。

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

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

文档类型

为每个 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">

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

本文分享自微信公众号 - Tech爬虫(php_pachong)

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-04-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏微卡智享

Android NDK OpenCV级联方式实时进行人脸检测

前面的文章《Android通过OpenCV和TesserartOCR实时进行识别》我们已经搭好一个利用NDK方式实时处理摄像头数据的程序了,今天我们就在看看Op...

23140
来自专栏华章科技

为什么C语言仍然占据统治地位?

导读:C语言五十年来一直是软件开发的一种主力语言。本文介绍它在如今的2019年与C++,Java,C#,Go,Rust和Python抗衡的方式。

18150
来自专栏窗户

入门任意一种编程语言所必须的几道习题

  每当学习一门计算机语言,我们也要做一些练习以便逐步熟悉。随着我们对这种编程语言本身支持的抽象手段理解的过程,以下这些问题,基本可以在几乎每门编程语言学习的过...

13020
来自专栏java一日一条

为什么强烈推荐Java程序员使用Google Guava编程

目前Google Guava在实际应用中非常广泛,本篇博客将以博主对Guava使用的认识以及在项目中的经验来给大家分享!学习使用Google Guava可以让你...

17530
来自专栏点云PCL

连接两个点云中的字段或数据形成新点云以及Opennni Grabber初识

(1)学习如何连接两个不同点云为一个点云,进行操作前要确保两个数据集中字段的类型相同和维度相等,同时了解如何连接两个不同点云的字段(例如颜色 法线)这种操作的强...

7320
来自专栏明丰随笔

浅谈.Net反射 7

emberInfo是一个基类,它包含的是类型的各种成员共有的一组信息。对于字段、属性、方法、事件等具体成员类型来说,它们包含的信息显然是不一样的,因此,在.NE...

6710
来自专栏微卡智享

Android通过OpenCV和TesserartOCR实时进行识别

最近一系列的文章都是用Android利用OpenCV NDK的方法通过摄像头实时获取图像进行图像处理,在上一篇《Android使用Tesseract-ocr进行...

55930
来自专栏猿天地

Sharding-JDBC:单库分表的实现

通过上面的优化,已经能满足大部分的需求了。只有一种情况需要我们再次进行优化,那就是单表的数量急剧上升,超过了1千万以上,这个时候就要对表进行水平拆分了。

24130
来自专栏点云PCL

PCL 可视化

可视化(visualization)是利用计算机图形学和图像处理技术,将数据转换图像在屏幕上显示出来,并进行交互处理的的理论,方法和技术,

27520
来自专栏杨建荣的学习笔记

ClickHouse初识

ClickHouse这些年还是比较火的一门技术,是Yandex在2016年6月15日开源的数据分析的数据库。在GitHub上有7000多的星。

12220

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励