A naming convention for UI components

The CEV pattern

CEV stands for Context, Element, and Variant. We call each of these a token of the component's name.

An example of component name with CEV naming convention (Article Card Large, respectively Context, Element and Variant).
An example of a component name with the CEV naming convention.

Context

Element

Variant (optional)

Examples

Here is a list of examples using this pattern:

  • ArticleCardSmall
  • ArticlesList
  • ProductDetails
  • MembersCarousel
  • QuestionsAccordion
  • TextBlocksStacked
  • NavigationMenu
  • FlexibleContent
  • PageHeroAdvanced
  • HomeHero

Order

This order was defined to keep files organized from the greater to smaller scope, being the context the greater, and variation the smaller, so ArticleCardSmall and ArticleCardFeatured will be close to each other.

Exceptions and Restrictions

Context omitted

In most cases, you will need the Context and Element name, while the Variant is always optional, but for some specific cases, the Element name may be enough to easily identify the component, so the Context can be omitted.

Singular and Plural

Use plural for the Context whenever the Element deals with multiple instances of the same Context, for example, ArticlesList, ProductsCarousel, QuestionsAccordion, etc. Otherwise, use singular, like ArticleCard, ProductDetail, QuestionBlock, and so on.

Multi-word tokens

There are cases where you might need to be more specific, and use more words on a token, maybe to keep things more organized in your project.

Conclusion

There are also many other naming patterns and conventions out there, and you should choose what works best for you, your team, and the projects you work with.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store