Layout Component naming dilemma – Name examples

Before I list the pros and cons of the naming conventions, I wanted to show examples of how they work in practice.

Let’s take the card component as an example.

A card component is a surface that has content and actions about a single subject.

The technical naming convention uses the technical name of the component.

For example, the card component always has the name “card”. Without taking the contents into account.

The content naming convention tries to name things depending on what they do.

Using the example above, we could use cards for different things.

It can be a “user card” for user profiles, “product card” for a product listing, or a “post card” for a social media post.

Now we’re set up to go through what each of the naming conventions entails.

In the coming days, I will guide you on what criteria you should choose the conventions that work for you.

– Samy