web前端开发 代码规范 及注意事项

外部命名规范

html 、js 、css文件名称命名规范

my_script.js

my_camel_case_name.css

my_index.html

路径规范 不写http、https

  • js
<script src="//cdn.com/test.min.js"></script>
  • css
.example {

  background: url(//static.example.com/images/bg.jpg);

}

html,js,css文档上部分 增加作者注释，开发时间，功能，最后一次修改时间（多次）

html命名规范

文档格式

  • css 文件放在 head标签中，js放到 body尾部
  • 使用 utf-8 文字编码
  • html 标签一律使用小写
  • 属性使用双引号
<!--

	作者：xuess

	时间：2017-06-22

	描述：测试页面

-->

<!DOCTYPE html>

<html>

	<head>

		<meta charset="UTF-8">

		<title></title>

		<meta http-equiv="Access-Control-Allow-Origin" content="*">

		<!--rem先关首先加载-->

		<script src="https://g.alicdn.com/mtb/??lib-flexible/0.3.2/flexible_css.js,lib-flexible/0.3.2/flexible.js"></script>

		<!--css在head-->

		<link rel="stylesheet" type="text/css" href="xxx.css" />

	</head>

	<body>

		<div>

			<div></div>

		</div>

		<!--js在文档尾部-->

		<script src="xxx.js" type="text/javascript" charset="utf-8"></script>

	</body>

</html>

推荐使用语义化标签

<header>

	<h1>My page title</h1>

</header>

<nav class="top-navigation">

	<ul>

		<li class="nav-item">

			<a href="#home">Home</a>

		</li>

		<li class="nav-item">

			<a href="#news">News</a>

		</li>

		<li class="nav-item">

			<a href="#about">About</a>

		</li>

	</ul>

</nav>

<section class="page-section news">

	<header>

		<h2 class="title">All news articles</h2>

	</header>

	<article class="news-article">

		<header>

			<div class="article-title">Good article</div>

			<small class="intro">Introduction sub-title</small>

		</header>

		<div class="content">

			<p>This is a good example for HTML semantics</p>

		</div>

		<aside class="article-side-notes">

			<p>I think I'm more on the side and should not receive the main credits</p>

		</aside>

		<footer class="article-foot-notes">

			<p>This article was created by David <time datetime="2018-01-01 00:00" class="time">1 month ago</time></p>

		</footer>

	</article>

	<footer class="section-footer">

		<p>Related sections: Events, Public holidays</p>

	</footer>

</section>

<footer class="page-footer">

	Copyright 2017

</footer>

结构、表现、行为三者分离

1. 不要写行内样式

2. 不使用表象元素（`b`, `u`, `center`, `font`, `i`）

3. 不要在html 中写js代码

4. 元素自定义属性 使用`data-`开头

js命名规范

变量声明

1. 推荐使用es6语法规范，局部作用域变量用let，常量用const

2. 常量使用全大写命名（const FAIL_STATE = 101）

3. 普通变量名称用小写字母开头，驼峰式（let userInfo = {}）

4. 对象命名以大写字母开头，大驼峰式（function User(){//...}）

5. 声明字符串建议使用单引号（let msg = 'This is some HTML <div class="makes-sense"></div>';）

变量赋值时的逻辑操作

//不推荐

if(!x) {

  if(!y) {

    x = 1;

  } else {

    x = y;

  }

}

//推荐

let x = x || y || 1;

css 命名规范

css权重

第一等：代表内联样式，如: style=””，权值为1000

第二等：代表ID选择器，如：#content，权值为100

第三等：代表类，伪类和属性选择器，如：.content，权值为10

第四等：代表类型选择器和伪元素选择器，如：div p，权值为1

基本原则

1. 选择器应该避免使用ID，一般情况ID不应该用于样式

2. 选择器中避免直接写标签名，没有语义，而且很容被重叠

3. 选择器应该尽可能的精确，推荐使用 大于号`>`

4. 尽量使用简写，如：padding: 10px 35px;

5. 0px、0rem，不用写单位

6. 颜色尽量使用简写，如：用 #fff 代替 #ffffff;

7. 书写代码前, 考虑并提高样式重复使用率，可以定义一些常用的简写样式

8. 选择器要尽可能短，并且尽量限制组成选择器的个数，建议不要超过3层

9. 多写有效注释，小伙伴看了会比较明了

10. 为避免重叠，单独模块，可以使用命名空间

命名规范

1. class名称使用`-`中划线链接（短横线命名），不推荐使用大小写的驼峰式。

2. 需要绑定事件的class名称，应该单独写。不要与样式class公用。事件与样式区分开。推荐`J_xxx`开头

3. 语义明确的情况下，class名称尽量言简意赅

声明顺序

1. 结构性属性：

display

position, left, top, right etc.

overflow, float, clear etc.

margin, padding

2. 表现性属性：

background, border etc.

font, text

转载请注明出处

作者：xuesswuniu2010@126.com

时间：2017年06月16日

最后修改时间：2017年06月16日

web前端开发 代码规范 及注意事项的更多相关文章

  1. Web 前端开发代码规范（基础）

    一. 引言 对于一个多人团队来说,制定一个统一的规范是必要的,因为个性化的东西无法产生良好的聚合效果,规范化可以提高编码工作效率,使代码保持统一的风格,以便于代码整合和后期维护. 二. HTML/CS ...

  2. Web前端开发标准规范

    web前端开发规范的意义 提高团队的协作能力 提高代码的复用利用率 可以写出质量更高,效率更好的代码 为后期维护提供更好的支持 一.命名规则 命名使用英文语义化,禁止使用特殊字符,禁止使用拼音,禁止使 ...

  3. Web前端开发CSS规范总结

    作为Web前端开发必备语言,CSS为大家广为熟知,今天就跟大家分享下CSS规范总结,Web前端的小伙伴们看过来吧! CSS样式的权值(权重) 权值等级的定义 第一等:代表内联样式,如: style=” ...

  4. Extjs4前端开发代码规范参考

    准则:  一致性, 隔离与统一管理, 螺旋式重构改进, 消除重复, 借鉴现有方案 1.    保证系统实现的一致性,寻求一致性方案, 相同或相似功能尽量用统一模式处理: 2.    尽可能使用隔离技术 ...

  5. Web前端开发最佳实践（1）：前端开发概述

    引言 我从07年开始进入博客园,从最开始阅读别人的文章到自己开始尝试表达一些自己对技术的看法.可以说,博客园是我参与技术讨论的一个主要的平台.在这其间,随着接触技术的广度和深度的增加,也写了一些得到了 ...

  6. web前端开发CSS命名规范参考

    做为一个web前端工程师,每天接触HTML.css就像吃饭一样,但是作为一名合作.优秀的web前端工程师,对DIV+CSS命名还是有一定的规范的,本文整理了一份web前端开发中DIV+CSS各种命名规 ...

  7. WEB前端开发规范

    WEB前端开发规范 规范目的 为提高团队协作效率, 便于后台人员添加功能及前端后期优化维护, 输出高质量的文档, 特制订此文档.本文档如有不对或者不合适的地方请及时提出, 经讨论决定后方可更改. 基本 ...

  8. WEB前端开发规范文档（转）

    http://codeguide.bootcss.com/  编写灵活.稳定.高质量的 HTML 和 CSS 代码的规范上面的文档 再结合下面的规范: 无论是从技术角度还是开发视角,对于web前端开发 ...

  9. Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

    Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Wind ...

随机推荐

  1. mysql在线开启或禁用GTID模式

    在线开启步骤: 1.要求: (1)必须是5.7.6版本以上的mysql (2)GTID状态为OFF 2.开启步骤: (1):SET GLOBAL ENFORCE_GTID_CONSISTENCY = ...

  2. Linux内核学习总览

    断断续续学习操作系统已经有大半年时间了,一直想系统地梳理一下. 正好借助<深入Linux内核架构> (Wolfgang Manuere 著,郭旭 译)汇总一下. 首先基础框架篇,Linux ...

  3. FreeMarker与SSH项目整合流程

    FreeMarker与SSH项目整合流程 学习了SSH之后,一般为了减少数据库的压力,会使用FreeMarker来生成静态HTML页面.下面简单说一下FreeMarker与SSH项目的整合全过程~ 前 ...

  4. Windows使用Nginx+ffmpeg搭建RTMP服务器

    简介Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器.nginx-rmtp-module是Nginx服务器的流媒体插件.nginx通过rtmp模块提供r ...

  5. 【CodeForces 426】div1 B The Bakery

    Some time ago Slastyona the Sweetmaid decided to open her own bakery! She bought required ingredient ...

  6. 数据结构实验6：C++实现二叉树类

    实验6 学号:     姓名:      专业:   6.1 实验目的 掌握二叉树的动态链表存储结构及表示. 掌握二叉树的三种遍历算法(递归和非递归两类). 运用二叉树三种遍历的方法求解有关问题. 6 ...

  7. npm 的作用

    接触 npm 也有一个多月的时间了,一直只是将他作为当着 webstorm + node.js 环境中的一个插件来用(甚至说把她当着命令来用).毕竟大部分的时间,他是输入的命令行中的一部分(别笑,小新 ...

  8. 【瞎扯】我的OI之路

    这里大概是一些我自己对我的OI之路的一些记录. 2015.11不知道哪一天-- 我听说了"编程". 当时还不懂得啥是信息学竞赛,以为这只是纯粹的程序设计.后来才明白信息学竞赛是算法 ...

  9. SQL中varchar和nvarchar的基本介绍及其区别

    SQL中varchar和nvarchar的基本介绍及其区别 varchar(n) 长度为 n 个字节的可变长度且非 Unicode 的字符数据.n 必须是一个介于 1 和 8,000 之间的数值.存储 ...

  10. iOS-runtime-根据类名推送到任意控制器，且实现属性传值

    // // WJRuntime.m // RuntimeSkip // // Created by tqh on 15/9/8. // Copyright (c) 2015年 tqh. All rig ...