样式类文件命名规范

样式类文件命名

以前在写代码的时候，没有接触到比较大型的项目，在命名方面就很随意，在刚开始做项目的时候也没有太注意，但越往后，涉及到的代码量、文件多了后，才发现命名规范越来越重要，现在准备着把项目的文件结构以及代码都要重新整理下。
这篇是样式类文件命名篇，来源是《了不起的javascript》一书中第二章。只限参考，并没有把全部的方式找出来，只是在看书时觉得还不错，然后再根据实际需求改一下。

BEM + 面向属性命名

BEM

BEM是Block、Element、Modifier的首字母的简称。
核心原理: 通过Block、Element、Modifier三者的组合来减少选择器的嵌套使用。
这里我就直接以实例替换文字说明

<form class="form form--theme-xmas form--simple">
	<input class="form_input" type="text"/>
	<input class="form_submit form_submit-disabled" type="submit"/>
</form>

/* Block 最大的独立“作用域”,可以理解为全局form的基础样式*/
.form{}

/* Modifier 用来修饰的，可以理解为形容词。即某个form的特定的样式*/
.form--theme--xmas{}
.form--simple{}

/* Element 作用域中的元素的样式。如下面的指的是全局form中输入框的样式，以及提交输入框样式 */
.form__input{}
.form__submit{}

/* 下面这个是混用的，即禁止输入框的样式，disabled用来修饰submit的行为的 */
.form__submit--disabled{}

/* 建议都以 -- 来分隔 */

面向属性命名

	<div class="h20 w60 bgwh"></div>

/*这里的命名方式可以针对一些基础的样式，宽高颜色字体等等。*/
	.h20{ height:30px; }
	.w60{ width:60px; }
	.bgwh{ background-color:#fff; }
/*也可以用短线隔开，如下*/
	.d-b{ display: block; }
	.d-ib{ display: inline-block; }
	.t-0{ top:0; }

总结

综上，两个命名方式结合起来可以解决大部分问题，之后实际使用中若出现了其他情况再补充。
，