Naming conventions are an issue that every team must face, and having a fixed specification can improve the efficiency of development and reduce the cost of investment in the transition and maintenance of projects. While implementing the specification, we should avoid the following naming phenomena:

  • Use meaningless numbers
  • Use abbreviations
  • Use pinyin
  • Using multiple naming conventions in the same project

Coding habits will undoubtedly makes the code above difficulties to maintain, when for files, identifier name should consider the semantic, as far as possible make the next developers can quickly understand their meaning (stress that many people think that name is too long it harder to read, but compared with the easy to read but unable to understand abbreviations, Developers are more comfortable with long, meaningful names).

Directories/Files

Normal folder/file names are all lowercase, with underscores between words: home, activity_list Component folder/file names are big camel (noun) : Coupon, CouponList Tip: React and Vue also refer to page files as page-level components, so use the big hump name.

The picture

The file name is composed of two parts: the property name. When a part needs to use compound words, only ** – ** is used to connect the compound words

  • Icon Type:images/icon/icon_tips images/icon/icon_checked
  • Common type:images/common/banner_news
  • Type of activity:images/activity/banner_news

JavaScript

Constants are named in all uppercase and words are joined by underscore _ : MAX_VALUE Identifiers (variables, functions) are named in small camel case: CAR, carSeries, getUserInfo Private variables are named in small camel case and words start with ** underscore _ ** : The _time class name uses the big hump form: Person

Css

Style of naming we use the industry praised BEM rules, what is BEM?

  • B: A Block stands for a Block. We can understand it as a visual whole or a functional independent part.
  • E: Element stands for Element, an Element wrapped in a functionally independent block.
  • M: Modifier stands for Modifier, which is used to attach attributes to the same elements.

Rule: We use the double underscore __ to connect B and E, use the double bar — to connect E and M, and use the bar – to connect words if a part is a compound word.

.nav.nav__item. Nav__item --hover # composite word.sub-nav.sub-nav__item. Sub-nav__item --hover #Copy the code

Regular modifiers

Activation of active Before a previous
The selected selected After a next
The default default The current current
Reversal of toggle According to show
disabled disabled hidden hide
dangerous danger The open open
The warning warning Shut down the close
The wrong error big lg
The success of success small sm
information info Very small xs

A common mistake

1, BEM naming rules pay attention to flat, rather than according to the DOM hierarchy has been string street naming, so please do not appear B__E__E__E, each independent naming is always composed of B__E- M three levels.



2. Allow other blocks (B) to exist inside a block. Do not consider all DOM elements (E) because of inclusion relationships. This example may not be particularly accurate, but it is intended to make you understand that wrapping relationships do not necessarily require enforcing the B__E rule. If wrapping means B__E, it is very difficult when a part needs to be moved one day.