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 Utilities管理工具

    前提: 1.安装MySQL Utilities工具 2.复制my_print_defaults命令至/usr/bin下或写入环境变量. 卸载方式: python ./setup.py clean -- ...

  2. INFORMATION_SCHEMA InnoDB 表

    INFORMATION_SCHEMA InnoDB Tables 本节提供InnoDB INFORMATION_SCHEMA表的表定义. 有关相关信息和示例,请参见"InnoDB INFOR ...

  3. Nginx 跨域

    if ($request_method = 'OPTIONS') { add_header 'Access-Control-Allow-Origin' '*'; add_header 'Access- ...

  4. 前端基础之CSS_1

    摘要 CSS(层叠样式表)的三种设置方法 基本选择器 组合选择器 属性选择器 分组与嵌套 伪类选择器 伪元素选择器 选择器的优先级 一些样式的设置(字体.文本.背景.边框) display属性设置 0 ...

  5. SolrCloud 概念

    原文链接 https://www.w3cschool.cn/solr_doc 当您的集合对于一个节点来说太大时,您可以通过创建多个分片将其分解并分段存储. 碎片是集合的逻辑分区,包含集合中的文档的子集 ...

  6. UVALive - 6275 Joint Venture (二分)

    题意: 给定一个整数w, 然后给定n个数, 问有没有两个数之和恰好为w 分析: 现将n个数数组a[]排序, 然后用两个变量i,j指向开头和末尾, 如果a[i] + a[j] > w, i++, ...

  7. BZOJ 3926: [Zjoi20150]诸神眷顾的幻想乡

    3926: [Zjoi20150]诸神眷顾的幻想乡 Time Limit: 10 Sec  Memory Limit: 512 MBSubmit: 438  Solved: 273 Descripti ...

  8. PTA 05-树8 File Transfer (25分)

    题目地址 https://pta.patest.cn/pta/test/16/exam/4/question/670 5-8 File Transfer   (25分) We have a netwo ...

  9. vue2.0 类淘宝不同屏幕适配及px与rem转换问题

    因为项目需要,vue开发项目,必须将已写的以px为单位的部分,转换为rem.要是全部转换,这大量的计算量,哪怕是sublime Text 的cssrem插件,也是一个庞大的工作量.所以,直接使用插件没 ...

  10. SQL Prompt 5.1使用

    SQL Prompt 5.1教程 1.下载 自行下载安装文件.本人是从http://www.cr173.com/下载的. 2.安装 安装没什么特别的,不用说了 3.注意一下破解和配置 按里面的read ...