Web前端开发规范旨在规范前端开发，提高代码质量，增强代码可读性和可维护性。本文将详细讲解“Web前端开发规范2017(HTML/JavaScript/CSS)”的完整攻略。

HTML规范

DOCTYPE

统一使用HTML5标准的文档类型声明：

<!DOCTYPE html>
<html>
  ...
</html>

编码

使用UTF-8编码:

<meta charset="UTF-8">

内容

使用四个空格来代替制表符，缩进只能使用空格，不能使用制表符。

<!-- 推荐 -->
<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>

<!-- 不推荐 -->
<ul>
    <li>item 1</li>
    <li>item 2</li>
</ul>

不要混淆标记和内容，例如在\<h1>标签中同时包含一个标题和一段段落。

<!-- 不推荐 -->
<h1>标题和段落</h1>

<!-- 推荐 -->
<h1>标题</h1>
<p>段落</p>

CSS规范

选择器

嵌套不超过3层，可以使用伪类和伪元素。

/* 推荐 */
.selector .item:hover:before {
  content: "";
}

/* 不推荐 */
ul li .selector:hover:before {
  content: "";
}

尽量使用class，避免使用标签和ID选择器。

/* 推荐 */
.navbar {}

/* 不推荐 */
ul {}

#navbar {}

特殊情况下可以使用ID选择器，比如页面中的锚点。

属性

属性值为0时不要加单位。

/* 推荐 */
margin: 0;

/* 不推荐 */
margin: 0px;

使用简写属性来减少代码量。

/* 推荐 */
margin: 0;

/* 不推荐 */
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;

命名规范

给样式命名时要简单明了，避免出现类似“black”“red”这样的无意义名称。

/* 推荐 */
.login {}

/* 不推荐 */
.xjgo {}

使用中划线作为命名的分隔符。

/* 推荐 */
.news-list {}

/* 不推荐 */
.newslist {}

JavaScript规范

变量命名

变量名使用Camel命名法，函数名首字母应该大写。

// 推荐
var userName = "Tom";

function Login() {}

// 不推荐
var user_name = "Tom";

function login() {}

代码缩写

变量名称具有含义，不要使用缩写或者不必要的缩写。

// 推荐
var i = 0;

// 不推荐
var j = 0;

var count = 0;

代码格式

使用ESLint等工具进行代码规范检测，并编辑器配置代码美化、自动补全、快捷键等方便操作的插件。

示例

HTML示例

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Web前端开发规范2017</title>
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header id="header" class="clearfix">
        <a href="#" class="logo">
            <img src="images/logo.png" alt="logo">
        </a>
        <nav class="navbar">
            <ul>
                <li><a href="#">首页</a></li>
                <li><a href="#">产品</a></li>
                <li><a href="#">服务</a></li>
                <li><a href="#">客户案例</a></li>
                <li><a href="#">关于我们</a></li>
                <li><a href="#">联系我们</a></li>
            </ul>
        </nav>
    </header>
    <section id="banner" class="banner">
        <h2>Web前端开发规范2017</h2>
        <p>让代码更规范，让前端更优雅。</p>
    </section>
    <section id="introduction" class="introduction">
        <h2>开发规范</h2>
        <p>Web前端开发规范，为您打造更好的代码，更优雅的前端。</p>
    </section>
    <footer id="footer" class="clearfix">
        <p>版权所有 &copy; 2017 - Web前端开发规范</p>
    </footer>
    <script src="js/main.js"></script>
</body>
</html>

CSS示例

/*------------------------------------*\
    #UNIVERSAL RESETS
\*------------------------------------*/

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, menu, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video
{
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
}

/*------------------------------------*\
    #MAIN
\*------------------------------------*/

body {
    font-family: "Helvetica Neue",Helvetica,PingFang SC,"Hiragino Sans GB","Microsoft YaHei",Verdana;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    background: #f9f9f9;
}

h1, h2, h3, h4, h5, h6 {
    font-weight: normal;
    color: inherit;
}

.logo img {
    width: 80px;
    height: 36px;
}

.navbar ul {
    list-style: none;
}

.navbar a {
    color: #666;
    display: block;
    padding: 10px 15px;
}

.navbar a:hover {
    background: #f1f1f1;
}

.banner {
    height: 400px;
    background: url("../images/banner.jpg") center center no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.banner h2 {
    font-size: 48px;
    color: white;
    margin-bottom: 20px;
}

.banner p {
    font-size: 24px;
    color: #ccc;
}

.introduction {
    padding: 50px 0px;
    text-align: center;
}

.introduction h2 {
    margin-bottom: 20px;
}

.introduction p {
    color: #666;
}

#footer {
    padding: 20px 0px;
    text-align: center;
    background: white;
    color: #666;
}

#footer p {
    font-size: 12px;
}

JavaScript示例

function add(x, y) {
    return x + y;
}

function multiply(x, y) {
    return x * y;
}

var result = add(1,2);
console.log(result);

result = multiply(2,3);
console.log(result);

以上是对Web前端开发规范2017的详细讲解，希望可以帮助你编写更加高效规范的代码。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：Web前端开发规范2017(HTML/JavaScript/CSS) - Python技术站

Web前端开发规范2017(HTML/JavaScript/CSS)

HTML规范

DOCTYPE

编码

标签

空白

元素和属性

内容

CSS规范

选择器

属性

命名规范

JavaScript规范

变量命名

代码缩写

代码格式

示例

HTML示例

CSS示例

JavaScript示例

Web前端开发规范2017(HTML/JavaScript/CSS)

HTML规范

DOCTYPE

编码

标签

空白

元素和属性

内容

CSS规范

选择器

属性

命名规范

JavaScript规范

变量命名

代码缩写

代码格式

示例

HTML示例

CSS示例

JavaScript示例

相关文章