How To Name Your CSS Components?

Sometimes beginners are wasting much time thinking about a good class name for specific HTML element (component).

So as an experienced frontend agency, we’ve prepared a list to help with getting some fresh ideas.

Wrappers

Elements for wrapping general layout.

• .wrapper
• .container
• .inner
• .outer
• .row

Main Sections

Root sections of the page.

• .header
• .footer
• .section
• .section-***

Page Sections

Main sections on the website, usualy content containers.

• .content
• .sidebar
• .aside
• .hero
• .block
• .box
• .panel
• .article
• .post
• .popup
• .modal
• .product
• .video-box
• .gallery
• .info-box

Navigations

Navigation lists, sets of links or buttons.

• .nav
• .nav-secondary (.nav-sec)
• .nav-access
• .nav-tools
• .nav-utilities
• .site-nav
• .user-nav
• .main-nav

Listings

Lists of elements, sets of components.

• .list-products
• .list-links
• .list-icons
• .feed
• .testimonials-list

Components

Separate parts of the website. Used for building bigger components or page sections.

• .avatar
• .breadcrumbs
• .pagination
• .tabs
• .accordion
• .teaser (.product-teaser, .category-teaser, .recipe-teaser)
• .cta
• .cta-link
• .decor (HTML elements for design decorations)
• .social
• .label
• .media
• .pic
• .burger
• .button
• .btn
• .testimonial
• .newsletter
• .logo
• .link
• .message
• .icon
• .ico
• .sitemap
• .tooltip
• .copyrights
• .quick-contact
• .locations
• .tag
• .misc
• .ribbon
• .badge
• .thumb
• .thumbnail
• .user

Forms & Form Controls

Class names to be used in forms.

• .control
• .field
• .field––text
• .field––radio
• .field––qty (number of products)
• .form-***
• .contact-form
• .newsletter-form

Text styles

Class names to formatting text, usually headings & paragraphs.

• .title
• .subtitle
• .desc
• .copy
• .content-text
• .head
• .head-sec

Modificators

Class name suffixes for preparing alternative versions of any HTML elements.

• &–– alt (alternative)
• &––main
• &––comp (complimentary)
• &––tools
• &––base

Nesting

Class name suffixes for childs of HTML elements.

• &__head
• &__header
• &__content
• &__foot
• &__actions
• &__desc
• &__details
• &__media
• &__cta
• &__name (.product__name)
• &__title
• &__subtitle
• &__link
• &__item
• &__row
• &__inner

JavaScript & State Classes

Classes not used for styling, but for JavaScript binds.

• .js-*** (.js-trigger, .js-search)
• .is-active
• .is-open
• .is-sticky
• .is-disabled
• .is-expanded