What’s in a name?

December 2018

When designing and creating a design system or pattern library, it is always difficult to Christen a shiny newborn pattern. I have two children and it took me and my wife weeks of brainstorming, vetoing and voting to find suitable names for each of our lovely children.

As a parent you have a big responsiblity when naming your child. If you get the name wrong you know your child could resent it, get it right and they could excel. A lot of what makes you who you are is your name. It's at the heart of your identity, you give to others as a common way to communicate with you and how you are known for your whole life.

When we are designing interfaces, we need to be careful when we give a name to a particular component or pattern.

In CSS, the BEM (block, element, modifier) convention helps us define some names to adhere to as well as an elegant way of constructing components.

The do’s and the don’ts

  • Do: keep the name meaningful, it doesnt matter if it is too long
  • Do: use BEM convention to apply, modified versions of the same thing
  • Do: use a thesaurus to find synonyms
  • Do: listen to your teams suggestions of names to establish a common language
  • Don’t: make the name too ambiguious so as to confuse those who will be using it
  • Don’t: use names that describe what the content of the component will be
  • Don’t: use names that describe the position of the element on the page
  • Don’t: use a mix of singular and plural names

Take a look at my list of regularly used names. I hope it helps you when you proudly name your own patterns and components.

Congratulations! 👶🏼