前端开发规范-个人总结图片命名方式之前使用的是下滑线命名的，为了和id class 统一，省去了记忆或者来回切换思路。后

命名

自学的前端，关于命名文件的命名、class、id、js等这些都是想写什么就写什么。工作一段时间之后发现命名，css写作的顺序等问题和同事之间的协作就有了冲突。现在开始总结一下自己的以后的前端开发规范，以后这是这样执行下去。自己一点点规范起来，让别人觉得你专业，规范。

废话不说了，直接开整

Html 中id和class如何命名

全部小写，不同单词之间使用中划线-来进行分割

比如：content-title、content-body、#content-foot

使用中划线 “-” 作为连接字符，而不是下划线 "_"。 2种方式都有不少支持者，但 "-" 能让你少按一次shift键，并且更符合CSS原生语法，所以只选一种目前普遍使用的方式

图片文件如何命名

图片命名方式之前使用的是下滑线命名的，为了和id class 统一，省去了记忆或者来回切换思路。后续统一使用中划线的方式命名。

比如 product-mannger.jpg

但是当图片名称是一个单词的时候，使用的一个即可，不需要拼接。比如logo.jpg

使用中划线 “-” 作为连接字符，而不是下划线 "_"。 2种方式都有不少支持者，但 "-" 能让你少按一次shift键，并且更符合CSS原生语法，所以只选一种目前普遍使用的方式

Html、Css、JS文件如何命名

当文件名是一个语意化的名称的时候。直接使用单词就行。比如index.html common.css index.js
当是文件名是用来拼接的时候，使用中划线来分隔。当然html和css很少有，但是出现了同样遵守这种命名方式；js文件比如get-news.js

Html中属性的书写顺序

id
class
name
data-xxx
src, for, type, href
title, alt
aria-xxx, role

CSS中选如何选择id和class

在项目开发的时候，比如想要给标签一些样式，我们是使用class呢还是id呢？

有时候自己也会纠结，到底使用哪一个，这两个有什么区别？

其实使用这两个都可以达到相应的设置css属性的目的
但是想要从class和id中间选择一个，aribnb推荐的做法是使用class，因为id选择器会将原有的权重打乱，同时id值是唯一的，设置相同样式的时候就无法重复使用之前设定的属性值。总的来说就是id设置的属性不可重复使用。所以推荐使用class
但是当使用jquery来进行DOM操作的时候，推荐使用id，因为id查询起来的效率比class的效率要高一下
在普通情况下，也就是非DOM操作的时候，尽量同时使用id和class

JS中变量和函数名如何命名

两者统一使用小驼峰的命名方式

js中有哪些需要注意的事情

变量名 let upColor = red;
- 常量全部大写。什么是常量呢？就是固定不变的值，那我应该怎么判断自己写的变量是不是常量呢？
- 比如我们项目中使用绘制股票分时图的数据，定义字体的颜色，涨对应红色，跌对应绿色。这就是一直不变的，对应的是常量。我们就可以命名称 let UPCOlOR = red；``DOWNCOLOR = GREEN；；
- 还有在新闻列表里面每次上拉加载更多的时候，每次星球的新闻的数据都是固定的10条，我们就认为这个也是一个常量，全部使用大写；
- 但是布尔值是我们使用的最多的时候，这个可不是常量，它有true和false两个值的；
布尔类型的使用is或者has做前缀。比如let isReady = false; let hasMoreCommands = false;
函数名 let foo = function geNewsList () {}
- 在不考虑兼容ie低版本浏览器的情况下，尽量使用es6的语法。比如使用let const来声明变量，尽量shying箭头函数
- 尽量是用forEach、filter等函数来操作数组，减少for循环
- 使用for循环的时候使用for let结构，避免使用for var 结构
函数传递参数的时候控制在6个以内
单个函数长度控制在50行以内
函数内部有变量声明的时候放在顶部，因为即使将变量放到自己需要使用的地方，js解析器也会将变量提升到顶部进行声明
声明变量的时候，不要使用糖葫芦的方式；比如let a=b=c=1;要使用这种let a =1;let b = a;let c = a;

注释

注释的原则，能不注释就不注释。但是大部分情况下都要注释一下。但是注释一定不要使之有自己能看懂，短短几个字就算完了，或者直接写缩写的的形式注释。

如果不写注释或者注释使用几个字来写的，别人维护的你的代码的时候会一边骂你，包括问候你的祖宗的，一边来熟悉更改你的代码的。相信我，这是肯定会存在的

不要写什么开始什么结束。英文的Start和End一样，也不要写。不要觉得自己的注释里面多个英文就高大上了，也就一个css而已。都是个人观点，别喷我，我是看到这样的代码就很乱，但是尼玛工作还得做。

Html注释

html的注释是这样子的，单行

一般情况下html的注释写的是内容分隔线。比如新闻、侧边栏、轮播图

但是不要写什么新闻开始、新闻结束啥的，个人观点很low！！！

Css注释

css的注释是/**/ 这样子的，也是单行，多行注释和js一样

这里可能是所有样式都写到了一起，可以这样写：新闻样式、侧边栏样式、轮播图样式、导航栏样式等

JavaScript 注释

单行注释 // 后面有空格。google开发规范
多行注释 /** 开头是两个，紧跟着换行有一个

/**
* 
* //这是第二行，从这里开始写
* //每个*后面都有一个空格
* 
* 
*/

Css书写顺序

由于定位（positioning）可以从正常的文档流中移除元素，并且还能覆盖盒模型（box model）相关的样式，因此排在首位；盒模型排在第二位，因为它决定了组件的尺寸和位置。其他属性只是影响组件的内部或者是不影响前两组属性，因此排在后面。

.declaration-order {
	/* 位置属性 */
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 100;

	/* 盒模型、大小尺寸行高等 */
	display: block;
	float: right;
	width: 100px;
	height: 100px;

	/* 文字系列 */
	font: normal 13px "Helvetica Neue", sans-serif;
  font-size: 14px;
	line-height: 1.5;
	color: #333;
	text-align: center;

	/* 背景色、圆角、边框等 */
	background-color: #f5f5f5;
	border: 1px solid #e5e5e5;
	border-radius: 3px;

	/* 其他 */
	opacity: 1;
  animation，
  transition等
}

链接的样式顺序

a:link -> a:visited -> a:hover -> a:active（LoVeHAte）

选择器必须以某个前缀开头

.m-detail .info { sRules; }
.m-detail .current { sRules; }
.m-detail .news { sRules; }

0后面的单位可以不写，透明度rgba(0,0,0,.5),rem等小于0的时候0页也可以不写。google开发规范
提升 CSS 选择器性能

CSS 选择器是从右到左进行规则匹配。只要当前选择符的左边还有其他选择符，样式系统就会继续向左移动，直到找到和规则匹配的选择符，或者因为不匹配而退出。最右边选择符称之为关键选择器。

CSS 选择器的执行效率从高到低做一个排序：
- 1.id选择器（#myid）
- 2.类选择器（.myclassname）
- 3.标签选择器（div,h1,p）
- 4.相邻选择器（h1+p）
- 5.子选择器（ul < li）
- 6.后代选择器（li a）
- 7.通配符选择器（*）
- 8.属性选择器（a[rel="external"]）
- 9.伪类选择器（a:hover, li:nth-child）
正确使用 Display 的属性

Display 属性会影响页面的渲染，请合理使用。
- display: inline后不应该再使用 width、height、margin、padding 以及 float；
- display: inline-block 后不应该再使用 float；
- display: block 后不应该再使用 vertical-align；
- display: table-* 后不应该再使用 margin 或者 float；

前端开发规范-个人总结

命名