前端开发规范

基本原则

结构、样式、行为分离

尽量确保文档和模板只包含 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 条评论
登录 后参与评论

相关文章

  • PHP similar_text() 函数

    注释:levenshtein() 函数比 similar_text() 函数更快。不过,similar_text() 函数通过更少的必需修改次数提供更精确的结果...

    公众号php_pachong
  • 初识 MQTT

    物联网 (IoT) 设备必须连接互联网。通过连接到互联网,设备就能相互协作,以及与后端服务协同工作。互联网的基础网络协议是TCP/IP。MQTT(消息队列遥测传...

    公众号php_pachong
  • 需求调研报告

    公众号php_pachong
  • 数据库PostrageSQL-字符集支持

    PostgreSQL里面的字符集支持你能够以各种字符集存储文本,包括单字节字符集,比如 ISO 8859 系列,以及多字节字符集 ,比如EUC(扩展 Unix ...

    cwl_java
  • 最小特权原则

    之前的项目中的一些事情的做法违背了最小特权原则(亦为最小权限原则),这里记录以下什么是该原则。

    技术小黑屋
  • CF--思维练习--CodeForces - 221C-H - Little Elephant and Problem (思维)

    ACM思维题训练集合 The Little Elephant has got a problem — somebody has been touching h...

    风骨散人Chiam
  • 智慧零售cue到的产品同学有话说

    在云+未来智慧零售分论坛上,被cue到的产品同学们,分别为哪些好用的工具打call? ? 高茵茵 腾讯社交广告高级总监 腾讯社交广告服务的客户行业很广泛,但是...

    腾讯云智慧零售
  • HDUOJ-----2852 KiKi's K-Number(树状数组+二分)

    KiKi's K-Number Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 32768/32...

    Gxjun
  • VF

    Vasya is the beginning mathematician. He decided to make an important contributi...

    书童小二
  • 【译】WordPress 中的50个过滤器(3):第11-20个过滤器

    本文为系列第三篇,原文:50 Filters of WordPress: Filters 11-20 原文地址 不多说,直接进入正题。 本系列文章翻译自tut...

    Jeff

扫码关注云+社区

领取腾讯云代金券