Web前端开发规范旨在规范前端开发，提高代码质量，增强代码可读性和可维护性。本文将详细讲解“Web前端开发规范2017(HTML/JavaScript/CSS)”的完整攻略。
HTML规范
DOCTYPE
统一使用HTML5标准的文档类型声明：
<!DOCTYPE html>
<html>
...
</html>
编码
使用UTF-8编码:
<meta charset="UTF-8">
标签
空白
在空标签中不要使用斜线：
<!-- 推荐 -->
<hr>
<!-- 不推荐 -->
<hr />
元素和属性
- 应该使用双引号而不是单引号，属性值不区分大小写。
<!-- 推荐 -->
<div class="wrapper"></div>
<!-- 不推荐 -->
<div class='wrapper'></div>
- 在书写属性和值时，不要留空格。
<!-- 推荐 -->
<a class="btn" href="xxx.html">click me</a>
<!-- 不推荐 -->
<a class= "btn" href= "xxx.html" >click me</a>
内容
- 使用四个空格来代替制表符，缩进只能使用空格，不能使用制表符。
<!-- 推荐 -->
<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>版权所有 © 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技术站
微信扫一扫 
支付宝扫一扫 