优雅的命名

前言


优秀的代码往往是最通俗易懂的代码,在于它的易于维护。在开发过程中,变量/方法优秀的命名往往有助于理解该变量/方法的用途,起到命名即注释的作用。而糟糕的命名往往会让人摸不着头脑。为了提高代码的可维护性,我们需要更优雅的命名方式。


一、通用规则


1. 有意义


起一个有意义的变量名这条相信绝大多数开发者都能做到,即变量名有实际的指代意义,在此不再赘述。


2. 指代具体


命名时需要使其更加具体详尽,可以具体到所在的模块,或者能表达出其逻辑/功能。


/* bad */
.title {}
/* good */
.head-title {}

// bad
const info;
// good
const userInfo;

3. 遵循传统


无论是CSS、JavaScript、还是文件的命名,都有一些约定俗成的惯例和规范,我们只需遵循即可。


4. 约定规范


命名的规则有很多种,没有高低之分,只有相对合适,没有绝对完美的规则。通常为了维持项目的风格统一,通常在一个项目中,相同种类的规则只选取一种。毕竟规范也只是一种工具,运用规范的根本目的是为了更好的开发和维护,太过复杂的规范反而会阻碍正常开发。因之,在项目启动前,在技术栈选取后就应当进行规范的约定,这个过程是团队意见的整合,毕竟规范是要靠团队成员的相互配合。


二、CSS 中的命名


1. 划分原则


CSS中的类名根据其职责可以分为公共类名和自定义类名。其中公共类名又可以分为常见类名(一般是约定俗成)和工具类名。


2. 常见类名


下面整理了一些常见的 css类名 供大家参考:

1949a61dbf477d9a526ae559b5f0262c.png

8201609e67ee5304b00ba6b1ecf2b351.png


e0fe32dd95d5da77a74ab3b0f6f1025b.png


8e9e52d77ef793b81083abe20b51e457.png



0 个评论

要回复文章请先登录注册