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

Although these suggestions can be applied to any programming language, examples lean on JavaScript and Vue to illustrate them in practice.

Naming convention

Pick one naming convention and follow it. It may be camelCase, snake_case, etc. What matters is consistency.

/* Bad */
const pages_count = 5
const shouldUpdate = true

/* Good */
const pagesCount = 5
const shouldUpdate = true

/* Also good if consistent */
const pages_count = 5
const should_update = true

S-I-D

A name must be Short, Intuitive, and Descriptive:

• Short: not painful to type and remember
• Intuitive: reads like normal speech
• Descriptive: reflects what it does/possesses efficiently

/* Bad */
const a = 5 // "a" could mean anything
const isPaginatable = postsCount > 10 // unnatural
const shouldPaginatize = postsCount > 10 // made-up verbs

/* Good */
const postsCount = 5
const hasPagination = postsCount > 10
const shouldDisplayPagination = postsCount > 10 // alternatively

Avoid contractions

Do not use contractions. They reduce readability.

/* Bad */
function onItmClk() {}

/* Good */
function onItemClick() {}

Avoid context duplication

A name should not duplicate the context in which it is defined. Remove the context if it doesn't decrease clarity.

class MenuItem {
  /* Bad: duplicates context ("MenuItem") */
  handleMenuItemClick = (event) => { /* ... */ }

  /* Good: reads as MenuItem.handleClick() */
  handleClick = (event) => { /* ... */ }
}

Reflect the expected result

Prefer names that match how they're used at the call site.

/* Bad */
const isEnabled = itemsCount > 3
return <Button disabled={!isEnabled} />

/* Good */
const isDisabled = itemsCount <= 3
return <Button disabled={isDisabled} />

Naming functions

A/HC/LC Pattern

A useful pattern for naming functions:

prefix? + action (A) + high context (HC) + low context? (LC)

Note: The order of context affects meaning. shouldUpdateComponent implies you are about to update a component, while shouldComponentUpdate implies the component will update itself and you're controlling the condition.

Actions (function verbs)

The verb part of your function name—describes what the function does.

get

Accesses data immediately (synchronous; usually internal).

function getFruitsCount() {
  return this.fruits.length
}

set

Sets a value declaratively (A → B).

let fruits = 0

function setFruits(nextFruits) {
  fruits = nextFruits
}

setFruits(5)

reset

Returns a value to an initial state.

const initialFruits = 5
let fruits = initialFruits

function resetFruits() {
  fruits = initialFruits
}

fetch

Requests data that takes indeterminate time (async).

async function fetchPosts() {
  const res = await fetch('/api/posts')
  return res.json()
}

remove vs delete

• removeX: remove from a collection/context (may still exist elsewhere)
• deleteX: destroy/erase from the system (irreversible in concept)

function removeFilter(filterName, filters) {
  return filters.filter((name) => name !== filterName)
}

async function deletePost(id) {
  return database.posts.delete({ id })
}

compose

Creates new data from existing data.

function composePageUrl(pageName, pageId) {
  return `${pageName.toLowerCase()}-${pageId}`
}

handle

Handles an event/callback.

function handleLinkClick() {
  console.log('Clicked a link!')
}

link.addEventListener('click', handleLinkClick)

Context

The domain a function operates on. Prefer names that make the domain obvious.

/* General utility */
function filter(predicate, list) {
  return list.filter(predicate)
}

/* Domain-specific */
function getRecentPosts(posts) {
  return posts.filter((p) => p.date >= Date.now() - 7 * 24 * 60 * 60 * 1000)
}

Prefixes (common boolean/value helpers)

is

Characteristic/state (boolean).

const isBlue = color === 'blue'
const isPresent = true

has

Possession (boolean).

/* Bad */
const isProductsExist = productsCount > 0

/* Good */
const hasProducts = productsCount > 0

should

Positive conditional statement for an action (boolean).

function shouldUpdateUrl(url, expectedUrl) {
  return url !== expectedUrl
}

min / max

Boundaries/limits.

function renderPosts(posts, minPosts, maxPosts) {
  return posts.slice(0, randomBetween(minPosts, maxPosts))
}

prev / next

State transitions.

const prevPosts = state.posts
const nextPosts = prevPosts.concat(fetchedPosts)

Singular and plural

Use singular for a single value; plural for multiple.

/* Bad */
const friends = 'Bob'
const friend = ['Bob', 'Tony']

/* Good */
const friend = 'Bob'
const friends = ['Bob', 'Tony']

Vue-specific: Component naming rules (cheat sheet)

These rules apply to Vue SFCs (.vue) and component modules.

Component names are “things” (nouns), not actions (verbs)

Components represent UI objects. Actions belong in methods/props/events.

• ✅ UserList, SearchPanel, DropdownButton
• ❌ FetchUsers, AddButton, ButtonWithDropdown

Prefer established UI terms over implementation descriptions (see below).

Use multi-word names (avoid HTML conflicts)

• ✅ AppButton, SiteHeader
• ❌ Button, Header

Prefer PascalCase for component files

• ✅ UserCard.vue, TableColumnPicker.vue

In templates, either is fine:

<UserCard />
<user-card />

Avoid “WithX” names—use the UI term

“WithX” describes composition/implementation, not identity.

• ✅ DropdownButton (or MenuButton)
• ✅ SplitButton (main action + caret)
• ❌ ButtonWithDropdown

Use a stable prefix taxonomy

Pick one style and stick to it.

Base / Primitive (design system)

Reusable, styling-focused primitives:

• BaseButton, BaseInput, BaseModal, BaseTable

App shell (layout scaffolding)

• AppHeader, AppSidebar, AppFooter

Feature / Domain (business meaning)

• UserProfileCard, InvoiceSummaryPanel, ReportTable

Table composition (recommended vocabulary)

• TableToolbar (actions/search/filter area above table)
• TableHeaderRow / TableColumnHeaders (header UI)
• TableBodyRow / TableRow
• TableEmptyState
• TableColumnPicker (UI for selecting visible columns)

Name length rule of thumb

Use: [Domain/Scope]? + [Thing] + [Qualifier]?

• ✅ UserTableActionsRow
• ✅ TableSearchRow
• ❌ TableAddSearchRowWithIconsAndTags

If the name implies multiple responsibilities (Add + Search + Filter + Export), split into a container with smaller parts:

• ✅ TableToolbar containing AddButton, SearchInput, FilterMenu, ExportButton

Quick review checklist (for humans and LLMs)

1. Is it a thing (noun) rather than an action (verb)?
2. Is it consistent casing (camelCase variables; PascalCase components)?
3. Does it avoid contractions?
4. Does it avoid duplicating context?
5. Is it unambiguous in isolation?
6. For Vue components: is it multi-word and not “WithX” unless unavoidable?
7. If it’s config/data, is it not named like a component?

END