Tip of the week #016: Go-to class names

Here are some of the names I use for different parts of a website.

PS: I use BEM as a naming convention, so bear in mind that these names are also used as elements, not only as blocks.

Global components

• header
• footer
• site-header
• site-footer
• breadcrumbs
• site
• app

Navigation

• main-nav
• nav
• navigation
• menu
• menu-toggle
• main-menu
• mobile-menu
• dropdown-menu
• some-menu (social media)
• site-nav
• tool-menu

As long as the navigation component is some kind of menu I like to suffix it with menu

Links and buttons

I like to differentiate between buttons (clickable element that performs an action) and links that looks like buttons (anchors styled as a box).

• [type]-link (e.g. inline-text-link, more-link, navigation-link)
• [type]-button (e.g. save-button, cancel-button, menu-button)
• link-button
• button
• btn (I will try not to use this anymore, I'm not a fan of shortening already short words)
• toggle (for buttons that turn something on/off, opens/closes etc.)
• [type]-toggle (e.g. menu-toggle)

Components

For hidden elements with open/close mechanisms:

• accordion
• panel
• dialog
• modal
• iceberg (e.g. accordions that show some of the content with a "show more"-button. You know, like the "tip of an iceberg")

For collections, e.g. containing posts, products, projects etc.:

• [item-type]-list
• [item-type]-cards
• [item-type]-grid (I'm a bit careful with using the word "grid", as it may be weird to use on a component that may not look like a grid on all screens, for instance a collection of products that looks like a grid on large screens, but like a vertical list on smaller screens)
• projects
• posts
• articles

For items in a list or collection, e.g. posts, products, projects etc.:

• [item-type]-teaser
• [item-type]-preview
• [item-type]-card

Other components:

• badge
• tag
• avatar
• logo
• tabs
• tab
• table

Forms and inputs

• field
• radios
• checkboxes
• dropdown
• select
• [type-of-form]-form (e.g. contact-form, checkout-form)

Text and content

These are usually just part of components and rarely blocks themselves.

• header
• subtitle
• title
• eyebrow (a small line of text that is placed above a title or heading. It looks like an eyebrow, doesn't it?)
• tagline
• label
• body
• content
• intro
• leading
• footer

Layout

Most layouts or templates contain one-offs; sections and parts that are not used much elsewhere. In those cases I tend to prefix the class with both l- and the name of the template, like so:

• l-frontpage
• l-subpage
• l-landingpage
• l-archive

I use these as blocks and apply parts as elements, e.g.:

• l-frontpage__hero-section
• l-subpage__breadcrumbs (a wrapper for breadcrumbs on the layout used for subpages)
• l-subpage__main
• l-landingpage__banner

And so on.

Utilities

I usually create some utility classes that I can use as supplements to other components, that I prefix with u-. I've written more about it here. These vary from project to project, but one I always use is this:

• u-visually-hidden (as class that hides something from view, but keeps it in the DOM for screen readers and search engines to access)