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

Rainie 发布于2019-08-28 18:22 / 745人阅读

摘要：就会给起名表示求和函数，渐渐地知道最好用英语给变量或者是函数名起名字，尽管有时候英语不好，那就翻翻有道吧。所以有一段时间的命名是很长的两三个单词的驼峰法命名。

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

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

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

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

看一些前端框架库，看他们的命名感觉都挺好的，至少看着舒心，不繁琐而且挺达意的。特别是-短杠的用法，之前看bootstrap，觉得挺好的，我之前的做法总是驼峰法命名，比如写一个商店的div如下

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

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

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

--------------------

正文开始分割线

--------------------------

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

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

我还是习惯驼峰命名规则，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文件更规范

云服务器 GPU云服务器如何注册个好域名给小麦起个域名 +css+js cdn css js

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/111208.html

爬虫 - 收藏集 - 掘金

摘要：在这之前，还是有必要对一些概念超轻量级反爬虫方案后端掘金前言爬虫和反爬虫日益成为每家公司的标配系统。爬虫修炼之道——从网页中提取结构化数据并保存（以爬取糗百文本板块所有糗事为例） - 后端 - 掘金欢迎大家关注我的专题：爬虫修炼之道上篇爬虫修炼之道——编写一个爬取多页面的网络爬虫主要讲解了如何使用python编写一个可以下载多页面的爬虫，如何将相对URL转为绝对URL，如何限速，...

1fe1se 2019-07-31 10:58 评论0 收藏0
小白的边学边写，一个基于laravel的APP接口【API】（二）

摘要：当注册成功以后，我们应该立即返回确认用户登录的值，并且作为的变量给储存起来，直到退出时删除，或者超出时间后删除。在文档里也有提及，对，就是那个叫的东东。用户信息也被正常写入，之后就可以欢快的扩展注册机制啦。前言根据上一篇文章，我们已经吧dingo/api给安装并且调试好了，那么下一步，就是来完善咱们的API了。最首要的步骤一定是要先把注册的功能给完善了，好了，那就给第一条正式API...

skinner 2019-07-24 10:31 评论0 收藏0
小白的边学边写，一个基于laravel的APP接口【API】（二）

摘要：当注册成功以后，我们应该立即返回确认用户登录的值，并且作为的变量给储存起来，直到退出时删除，或者超出时间后删除。在文档里也有提及，对，就是那个叫的东东。用户信息也被正常写入，之后就可以欢快的扩展注册机制啦。前言根据上一篇文章，我们已经吧dingo/api给安装并且调试好了，那么下一步，就是来完善咱们的API了。最首要的步骤一定是要先把注册的功能给完善了，好了，那就给第一条正式API...

jlanglang 2019-06-27 12:07 评论0 收藏0
JavaScript 回顾学习：变量

摘要：变量的分类全局变量可以在任何地方使用的变量局部变量在函数内声明的变量只在函数内有定义，作用域是局部性的什么时候使用当一个数据需要被反复使用时，就要先保存在变量中。第一篇回顾学习，变量什么是变量变量就是在内存中刨一个坑存一个数据，再给这个坑起个名。为什么要给一个加引号呢，因为JavaScript是松散类型的，即一个变量可以用来保存任何类型的数据。变量的分类：全局变量：可以在任何地方...

KitorinZero 2019-08-22 18:03 评论0 收藏0