This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

Elegant and timeless.

preface

Good code is often the most accessible code because it is easy to maintain. In the development process, good naming of variables/methods often helps to understand the purpose of the variable/method, and serves the function of naming as a comment. And bad naming can be confusing. To improve the maintainability of our code, we need more elegant naming.

I. General rules

1. Make sense

This is something that most developers can do, which is to say that the variable name has a meaningful meaning, and I won’t go over it here.

2. Be specific

Make it more specific, either to the module in which it is named or to express its logic/function.

/* bad */
.title {}
/* good */
.head-title {}
Copy the code

// bad
const info;
// good
const userInfo;
Copy the code

3. Follow tradition

Whether it’s CSS, JavaScript, or file naming, there are conventions and conventions that we just have to follow.

4. Convention specifications

There are many naming rules, there is no high or low, only relatively appropriate, no absolutely perfect rules. It is common to select only one rule of the same kind within a project in order to maintain a uniform style. After all, a specification is just a tool. The fundamental purpose of using a specification is to better develop and maintain it. Too complicated a specification will hinder normal development. Therefore, the specification should be agreed upon before the project is launched and after the technology stack is selected. This process is the integration of team opinions. After all, the specification depends on the cooperation of team members.

2. Naming in the CSS

1. Division principle

Class names in the CSS can be classified into public class names and custom class names according to their responsibilities. The common class name can be divided into common class name (generally accepted) and tool class name.

2. Common class names

Here are some common CSS class names for your reference:

3. Customize the class name

Custom class names are usually separated between words by either a dash “-” or an underscore “_”, and are not humped to distinguish them from variables. SCSS and LESS are commonly used for style writing in projects, which greatly reduces style problems caused by duplicate class names. So we only need to focus on the outer container class name of a module. The module name-modifier name is usually used.

Naming in JavaScript

1. Naming rules

1.1 Lower Camel Case

The first word begins with a lowercase letter and the second word begins with a capital letter. For example, firstName and lastName. General variables and functions are named in small camel shape.

1.2 Upper Camel Case

Each word begins with a capital letter, for example, FirstName, LastName, also known as Pascal nomenclature. General classes are named in large camel shape.

1.3 All uppercase naming

Constants are usually named in all uppercase, with words separated by underscores (_).

1.4 The name begins with an underscore

In general, local or private variables start with an underscore followed by a camel name.

2. Name word selection

In general, variables/functions are named with a verb prefix and a noun modifier.

conclusion

Any code specification is easy to develop and maintain, and its purpose is to make our code more readable/collaborative. For many different norms, there is no absolute sense of who is good or bad, only suitable and not suitable. The code specification itself is to facilitate (collaborative) development, to avoid putting the cart before the horse, or to put more energy into the core business logic of the project rather than the constraints of the code specification, because any standard code can not be used overnight, it needs to be persistent to be able to see through the paper. Step by step in the long road to optimize the code up and down the search!