奔跑的akuan06：规范

最新推荐文章于 2020-06-08 15:48:22 发布

eynus_leo

最新推荐文章于 2020-06-08 15:48:22 发布

阅读量134

点赞数

分类专栏：奔跑的akuan

本文链接：https://blog.csdn.net/eynus_leo/article/details/81356135

版权

奔跑的akuan 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

原文：https://github.com/ecomfe/spec/blob/master/html-style-guide.md

html标签之外的其他标签的规范：（style，javascript）

2.1 缩进与换行

[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符。

解释：对于非 HTML 标签之间的缩进，比如 script 或 style 标签内容缩进，与 script 或 style 标签的缩进同级。

示例：

<style>
/* 样式内容的第一级缩进与所属的 style 标签对齐 */
ul {
    padding: 0;
}
</style>
<ul>
    <li>first</li>
    <li>second</li>
</ul>
<script>
// 脚本代码的第一级缩进与所属的 script 标签对齐
require(['app'], function (app) {
    app.init();
});
</script>

2.2 命名

[强制] class 必须单词全字母小写，单词间以 - 分隔。

[强制] class 必须代表相应模块或部件的内容或功能，不得以样式信息进行命名。

<!-- good -->
<div class="sidebar"></div>

<!-- bad -->
<div class="left"></div>

[强制] 元素 id 必须保证页面唯一。

[建议] id 建议单词全字母小写，单词间以 - 分隔。同项目必须保持风格一致。

[建议] id、class 命名，在避免冲突并描述清楚的前提下尽可能短。

<!-- good -->
<div id="nav"></div>
<!-- bad -->
<div id="navigation"></div>

<!-- good -->
<p class="comment"></p>
<!-- bad -->
<p class="com"></p>

<!-- good -->
<span class="author"></span>
<!-- bad -->
<span class="red"></span>

[强制] 禁止为了 hook 脚本，创建无样式信息的 class。

解释：

不允许 class 只用于让 JavaScript 选择某些元素，class 应该具有明确的语义和样式。否则容易导致 CSS class 泛滥。

使用 id、属性选择作为 hook 是更好的方式。

[强制] 同一页面，应避免使用相同的 name 与 id。

一个比较好的实践是，为 id 和 name 使用不同的命名法。

2.3 标签

[强制] 标签名必须使用小写字母。

<!-- good -->
<p>Hello StyleGuide!</p>

[强制] 对于无需自闭合的标签，不允许自闭合。

解释：

常见无需自闭合标签有 input、br、img、hr 等。

示例：

<!-- good -->
<input type="text" name="title">

<!-- bad -->
<input type="text" name="title" />

[强制] 对 HTML5 中规定允许省略的闭合标签，不允许省略闭合标签。

[强制] 标签使用必须符合标签嵌套规则。

解释：

比如 div 不得置于 p 中，tbody 必须置于 table 中。

详细的标签嵌套规则参见HTML DTD中的 Elements 定义部分。

[建议] HTML 标签的使用应该遵循标签的语义。

解释：

下面是常见标签语义

p - 段落
h1,h2,h3,h4,h5,h6 - 层级标题
strong,em - 强调
ins - 插入
del - 删除
abbr - 缩写
code - 代码标识
cite - 引述来源作品的标题
q - 引用
blockquote - 一段或长篇引用
ul - 无序列表
ol - 有序列表
dl,dt,dd - 定义列表

[建议] 在 CSS 可以实现相同需求的情况下不得使用表格进行布局。

2.4 属性

[强制] 属性名必须使用小写字母。

[强制] 属性值必须用双引号包围。

[建议] 自定义属性建议以 xxx- 为前缀，推荐使用 data-。

解释：

使用前缀有助于区分自定义属性和标准定义的属性。

示例：

<ol data-ui-type="Select"></ol>

3 通用

3.1 DOCTYPE

[强制] 使用 HTML5 的 doctype 来启用标准模式，建议使用大写的 DOCTYPE。

示例：

<!DOCTYPE html>

[建议] 启用 IE Edge 模式。

示例：

<meta http-equiv="X-UA-Compatible" content="IE=Edge">

[建议] 在 html 标签上设置正确的 lang 属性。

解释：

有助于提高页面的可访问性，如：让语音合成工具确定其所应该采用的发音，令翻译工具确定其翻译语言等。

示例：

<html lang="zh-CN">

3.2 编码

[强制] 页面必须使用精简形式，明确指定字符编码。指定字符编码的 meta 必须是 head 的第一个直接子元素。

解释：

见 HTML5 Charset能用吗一文。

示例：

<html>
    <head>
        <meta charset="UTF-8">
        ......
    </head>
    <body>
        ......
    </body>
</html>

3.3 CSS 和 JavaScript 引入

[强制] 引入 CSS 时必须指明 rel="stylesheet"。

示例：

<link rel="stylesheet" href="page.css">

[建议] 引入 CSS 和 JavaScript 时无须指明 type 属性。

解释：

text/css 和 text/javascript 是 type 的默认值。

[建议] 展现定义放置于外部 CSS 中，行为定义放置于外部 JavaScript 中。

[建议] 在 head 中引入页面需要的所有 CSS 资源。

[建议] JavaScript 应当放在页面末尾，或采用异步加载。

eynus_leo

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
奔跑的akuan06：规范

原文：https://github.com/ecomfe/spec/blob/master/html-style-guide.mdhtml标签之外的其他标签的规范：（style，javascript）2.1 缩进与换行[强制] 使用 4 个空格做为一个缩进层级，不允许使用 2 个空格或 tab 字符。解释：对于非 HTML 标签之间的缩进，比如 script 或 style 标...
复制链接

扫一扫