naming-convention.md

Naming Conventions

The naming of folders and files is a small detail that can make all the difference when maintaining a website.

Here are a few recommendations for naming components, folders and files, including HTML, image, scss, twig and hbs files

1. Use natural language to name folders and files. Natural language is everyday, conversational, and usually descriptive language. If a folder or file name can easily be read and understood, both by your co-workers and your parents, then it’s probably natural language.
2. Short, but meaningful. If it is a composite name try to abbreviate the second, third name. ie: single-msg.scss
3. Typeset all file and folder names in lowercase.
4. Don't use ‘special characters’ in folder and file names.

How to name content types?

Follow recommendation (2.) Good examples are:

• article
• landing_page

Don't use plurals for content type naming.

Content type fields

field_contenttype_field

Examples:

• field_partner_title
• field_partner_image
• field_partner_bg_image

How to name components?

Follow recommendation (2.) and check Components dictionary

Component fields

field_component_field, e.g.

• single-msg
• single-msg-title

How to name twig templates?

Use devel suggestion, for example

ds-reset--paragraph-cr-cards.html.twig

How to name sass files?

Use the name of the component, i.e.

single-message.scss

How to name hbs files?

Use the name of the component, i.e.

single-message.hbs

How to name sass files?

Use the name of the component, i.e.

single-message.scss