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. Centos 7 编译php 7.2.10

    步骤一:安装依赖 yum install -y wget gcc gcc-c++ gd-devel zlib-devel libjpeg-devel libpng-devel libiconv-dev ...

  2. JDBC-Web项目导入mysql驱动包路径-Eclipse & Myeclipse

    初学JAVA,很多都不懂,开始听老师说导入数据库驱动包的时候是: 右键项目 -> Properties -> Java Build Path -> 右侧选项卡选择Libraries ...

  3. 夯实Java：从面向对象说起

    作者:伯特出处:github.com/ruicbAndroid/LoulanPlan声明:本文出自伯特的<LoulanPlan>,转载务必注明作者及出处. 刚学习 Java 那会就接触了& ...

  4. python中的多任务

    多任务 什么是任务 一个电脑运行这的软件 什么是多任务 电脑同时运行着的多个软件 多任务原理 时间片的轮转 并行与并发 并发:假的多任务,多个任务共用一个核 并行:正的多任务,一个核处理一个程序 生理 ...

  5. 嵩天老师的零基础Python笔记：https://www.bilibili.com/video/av13570243/?from=search&seid=15873837810484552531 中的15-23讲

    #coding=gbk#嵩天老师的零基础Python笔记:https://www.bilibili.com/video/av13570243/?from=search&seid=1587383 ...

  6. struts2接受请求参数

    https://blog.csdn.net/y249839817/article/details/77702745 https://blog.csdn.net/nthack5730/article/d ...

  7. TOJ 2944 Mussy Paper

    2944.   Mussy Paper Time Limit: 2.0 Seconds   Memory Limit: 65536K    Special JudgeTotal Runs: 381  ...

  8. irules事件和命令

  9. [CTSC2007]数据备份Backup 题解

    题意: 一维直线上有n个点,任取2k个互不相同的点组成k条链,求链的最小总长 思路: 1.最优时链不相交,相邻两两相减,将题目转化为:在n-1个数中取互不相邻的k个数使总和最小. 2.贪心取最小的“数 ...

  10. ES6__数据结构 Set

    /* 数据结构 Set */ /* *集合的基本概念:集合是由一组无序且唯一(即不能重复)的项组成的.这个数据结构使用了与有限集合相同的数学概念,应用在计算机的数据结构中. *特点:key 和 val ...