前端命名规范

命名规范主要包括css命名、js命名和图片命名，首先来讲讲css命名。

css命名

1、使用BEM命名，以下划线区分：模块_元素_修饰符。

如：

<ul class="list">
    <li class="list_item">
        <div class="list_item_content"></div>
    </li>
</ul>

这样，我们就能比较清晰的知道这些结构的层级关系了。不过，命名不宜过长，模块_元素_修饰符这三层就足够了，太长会影响可读性，如果还需要继续嵌套的话，跟外层一样，也是从模块到模块_元素_修饰符，之后用一层的后代选择器将他们连接起来。

如:

​
<ul class="list">
    <li class="list_item">
        <div class="list_item_content">
            <div class="left">
  		        <div class="left_content_img"></div>
  		        <div class="left_content_text"></div>
             </div>
  	        <div class="right">
  		        <div class="right_content"></div>
  	        </div>
        </div>
    </li>
</ul>

​

虽然说后代选择器的性能不如子选择器，但这里用子选择器会使代码显得更加臃肿，可读性和维护的便易性都会大打折扣，所以最后我选择了这样的仅有一层的后代选择器。而且事实上，这种使用方式与子选择器的性能消耗相差不会太大，在可以接受范围内。

2、以功能区分模块去命名。

为了提高复用性，减少代码冗余，尽量以功能区分模块这种方式去命名，需要进一步区分的再加一个class。

如：

 

JS命名 

js命名比较简单，现在大部分使用的是小驼峰和下划线命名。

变量、函数用小驼峰，如：getParams

私有变量开头加下划线，如：_this

这样看起来整洁干净，可读性强。

图片命名

在项目中，图片的命名同样讲究，我的做法是结合小驼峰和下划线，以项目名称_图片名称_图片作用这样的格式去命名。

如：hotelProject_blueArrow_icon

在上述例子中可以看到，blueArrow就使用了小驼峰的命名方法，因为一个项目中可以存在很多arrow，所以我们需要为它添加特征以更好地区分开这些图片。

总结

命名格式固然重要，但命名中更重要的一点莫过于语义化，一段有语义的代码的可读性是远远高于没有语义的代码。在实际工作中，无论是团队合作还是个人的后续维护，如果没有好的命名规范，那你的工作将变得十分混乱。

 

微信公号搜索：遇见一朵小花。（或扫描二维码）找我玩啊只讲对你有用的东西。

也常常给粉丝寄出自己看完闲置的好书，喜欢看书的可以来看看，

还不定期在公众号请大家喝奶茶！

想与我聊聊或者有什么问题都可以在公众号找到我。

等你哟~