(css/js)如何起个好名字

什么鬼，又不知道怎么命名class了
直接进入正文

记得大一学C语言的时候，那个时候根本没把这当回事吧。
所谓的混沌阶段
变量名，函数名，随意吧，那个时候写简单地c程序，就好像写着玩，就算复杂点得也不过一二百行，所以变量名什么的，可能就会起a b c s s1 s2...

后来渐渐地代码写多了点，才发现也不能随便起名字吧，稍微有意义一点的。
就会给起名sum()表示求和函数，渐渐地知道最好用英语给变量或者是函数名起名字，尽管有时候英语不好，那就翻翻有道吧。

再后来工作，走上前端这条路了，恩，前端可是细致活，有一段时间觉得前端真是没意思啊，写div布局，调css样式，就只是为了对对齐，1px的移动感觉也并没有好看很多啊，而且里面那么多元素id到还好反正一个页面就一个，也用的少，class就特别多，代码量少一点的，布局清晰一点的页面还好，没有那么多class名字。接触到比较大的项目，有很多页面模块，每个模块的内容又有点相似，class很多，写新页面的时候会时不时地思考怎么给这个class起个不会重复又达意的名字。那个时候，TL和我们说，变量名长一点没关系不要让人看不懂，一个单词缩写不要缩写到两三个字母让人看不懂。所以有一段时间的命名是很长的两三个单词的驼峰法命名。
<!--more-->
看一些前端框架库，看他们的命名感觉都挺好的，至少看着舒心，不繁琐而且挺达意的。特别是-短杠的用法，之前看bootstrap，觉得挺好的，我之前的做法总是驼峰法命名，比如写一个商店的div如下

<div class="shop">
    <div class="shopName"></div>
    <div class="shopAddress"></div>
    <div class="shopType"></div>
    <div class="shopGood"></div>
</div>

只是一个例子，上述层级只有两级描述商店内容的相关信息，要是再接下去
shopGood下的分级描述有哪些类型的商品 我估计就起名
shopGoodFood shopGoodBook shopGoodTool...

这样如果页面少，也还好，主要是当项目有很多页面时候，这里命名了个shop 可能在别的地方又命名了个shop 很有体会，许多时候刚要给起个名字，智能提示已经存在了，然后有想换个啥呢总不能shop2

吐槽 归吐槽，总之，也是慢慢地在写代码的过程中形成自己的一套好一点的命名规范和风格吧，第一要务是要写的能让别人看页面布局 通过className DOM元素的意义关系 一目了然，可维护吧。

--------------------<h3 id="common">正文开始分割线</h3>--------------------------

在命名方面的一些自我总结

• 命名尽量用英语，好几个英语单词合成的名称，可以缩写，但前提能看懂意思，不然长点就长一点

• 我还是习惯驼峰命名规则，helloWorld

• 对一些元素的命名可以在后面加上这个元素名比如cancelBtn productListTable

• - 我觉得shopName 有时候可能shop-name 会不会看上去好一点呢(层级多一点话)

• 尽量减少不必要的class 比如对于ul li这样的，做好父级的命名

• 常用的class命名

• 其他

一些样式处理 Tips

• 因为浏览器自带各自的样式处理css，所以需要一套自己的reset.css

• 公共基础的样式简写在common.css

今天写想写这个就是因为起名字好烦觉得，看看别人怎么做的，果然找到了很多可以学习的文章,再贴一遍
什么鬼，又不知道怎么命名class了
概要知识点：

• BEM 命名 block element modifier

• 常见的class关键词 布局类/包裹类/大小类/状态类...

• 定制简单地规则 利用中划线- 名称前缀/后缀...

• 修饰关键词 header缩写hd .modal-hd .article-hd...

• 层级/样式范围

关于BEM CSS命名规范的几篇文章
为什么我们需要BEM
BEM —— 源自Yandex的CSS 命名方法论
NEC-CSS规范

关于 如何编写公共的css文件(common.css)的几篇文章
如何编写公共的css文件 如何让css文件更规范