TABLE OF CONTENTS

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

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
Chris Lojniewski

CEO at Pagepro - React & React Native software house specialising in building tailor-made web applications for clients around the world. Chris is currently spearheading a mission close to his heart: making development frictionless. His philosophy transcends the conventional, recognising that while modern tech, especially React & React Native, is a game-changer, the real revolution lies in combining cutting-edge technology with effective processes, creative exploration, and strategic foresight.

Article link copied

Close button

comments

  • Nigel

    Posted on

    A quality post. I literally have headaches trying to come up with names

  • Chris Lojniewski

    Posted on

    Thanks @Nigel!

  • Nima

    Posted on

    Always had problem with naming. What a grate article. THANK YOU ^_^

Comments are closed.