Skip to main content

Naming Conventions

Defined here is some best practice around naming conventions that we all try to follow. Ensure you're consistent so the codebase remains readable, easy to understand, and maintainable for yourself and other developers on the team.

Cases explained​

There are certain naming conventions available across all programming languages, also known as:

  • snake case
  • kebab case
  • camel case
  • pascal case

Snake Case​

  • Separates each word with an underscore character (_)
  • When using snake case, all letters need to be lowercase e.g
number_of_donuts = 34

fave_phrase = "Hello World"

Kebab Case​

  • Very similar to snake case
  • The difference between snake case and kebab case is that kebab case separates each word with a dash character, -, instead of an underscore
  • So, all words are lowercase, and each word gets separated by a dash
  • Another one of the most human-readable ways of combining multiple words into a single word
number_of_donuts = 34

fave_phrase = "Hello World"

Camel Case​

  • When the first word is lowercase, then each word that follows is capitalized
  • A capital letter appears at the start of the second word and each new subsequent word that follows
numberOfDonuts = 34

favePhrase = "Hello World"

Pascal Case​

  • Similar to camel case
  • The only difference between the two is that pascal case requires the first letter of the first word to also be capitalized
  • Every word starts with an uppercase letter (in contrast to camel case, where the first word is in lowercase)
NumberOfDonuts = 34

FavePhrase = "Hello World"

How We Work​

Directories​

Directories for organization and not components should be kebab case.

React Components​

Directories for components and component files (.jsx or .tsx) should be pascal case.

React UseHooks​

Custom hooks should be camel case and named use{NAME} where NAME can be:

  • a component name if the hook contains all logic specific to a components use e.g useTextCard
  • a description of the specific action that the hook is used for e.g. useFetch

Variables, Functions​

JS variables and functions should be camel case.

ACF Field Variables​

All fields coming in from ACF will be snake case e.g. text_card.options.heading_font_color.

AGREE STANDARDS