Naming rules

Naming things is hard. This sheet attempts to make it easier.

Although these suggestions can be applied to any programming language, I will use JavaScript to illustrate them in practice.

External link to community maintained cheatsheet:
Naming cheatsheet

Naming Components

HC/LC/b/p/s Pattern

There is a useful pattern to follow when naming functions:

high context (HC)? + low context (LC)? + base + part? + suffix?

Take a look at how this pattern may be applied in the table below.

React note: Avoid names that includes two base names, e.g. ButtonLink where Button is used as a LC and Link as a base. It's considered incorrect because it encapsulate two concerns, appearance (how ti looks) and behavioral (how it reacts to user input). You can avoid this by using polymorphic as prop, e.g. <Button as="a" />.