Naming class

Introduction

Most of developers may well feel difficult with making class name, especially when they are styling.

I was using SASS for styling. I occasionally mixed up with inline style using style (opens in a new tab) property, selector of className or id, or just tag selector for styling. I frequently used className and id whenever I used <div> tag for container (or wrapper) to wrap up elements as below.

style.scss

.wrapper {
  display: flex;
  // ...
}

src/app/page.tsx

import "./style.scss";
export default function Home() {
  return <div className="wrapper"></div>;
}

Background

But then I was tackled by another front-end developer with the point of using unorganized class names.

Front-end developer: Do you have any conventions of making class name?

Me: No.

Front-end developer: Then how have you been making class name so far?

Me: Just used arbitrary class name if I felt necessary.

Front-end developer: ...(😑)

He seemed to be unsatisfied...

Problem

Then what are some problems if we arbitrarily make class names without any conventions?

Maintaining will be difficult due to irregularity of class names.
There could be styling errors deriving from duplicated class names.

Solution

Then what are some solutions for this?

1. BEM Method

BEM method (opens in a new tab)¹ indicates method of making class name based on Block, Element and Modifier.

Block

Block is a reusable component that carries out its feature independently. HTML tags that are usually used for semantic tagging such as <header>, <nav>, <section>, <aside> are good examples.

For menu wrappers consisting of multiple menu links, for instance, we could make class name mathcing up with its purpose as below:

App.tsx

<nav className="navigation">
  <!-- ... -->
</nav>

Element

Element is a unit consisting of block. Element can only have one parent block and cannot be used outside box of block independently. For example, let's say there are three elements: logo wrapper which redirects users to go to home page, menu links wrapper, and menus for authentication.

Whenever you give class name for elements, you use two underscores(__), followed by element's name.

App.tsx

<nav className="navigation">
  <div className="navigation__logo">
    <img src="/logo.png" alt="logo" />
  </div>
  <ul className="navigation__menu">
    <li className="navigation__menu-item">
      <!-- ... -->
    </li>
    <li className="navigation__menu-item">
      <!-- ... -->
    </li>
    <li className="navigation__menu-item">
      <!-- ... -->
    </li>
  </ul>
  <div className="navigation__auth">
    <!-- ... -->
  </div>
</nav>

Modifier

Modifier means modifier word that is used for indicating different state or style. Modifier should be linked to at least either block or element and can be represented by two hyphens(--).

If you take a look at below example, you can make the first menu link's font color which is selected(selected) as different color.

App.tsx

<nav className="navigation">
  <div className="navigation__logo">
    <img src="/logo.png" alt="logo" />
  </div>
  <ul className="navigation__menu">
    <li className="navigation__menu-item--selected">
      <!-- ... -->
    </li>
    <li className="navigation__menu-item">
      <!-- ... -->
    </li>
    <li className="navigation__menu-item">
      <!-- ... -->
    </li>
  </ul>
  <div className="navigation__auth">
    <!-- ... -->
  </div>
</nav>

style.css

.navigation__menu-item--selected {
  color: red;
}

👉 Implementing BEM method

Below is my actual code of <Footer /> component.

src/components/Footer.tsx

export default function Footer(): JSX.Element {
  return (
    <footer>
      <div className="upper">
        <div className="qna">
          <span>문의하기</span>
          <span>{/* Deleted for sensitive info */}</span>
        </div>
        <Link href="https://www.instagram.com/boochoo.camp/" target="blank">
          <Image src={instagram} alt="instagram" />
        </Link>
      </div>
      <div className="mid">
        <p>{/* Deleted for sensitive info */}</p>
        <p>
          정보 사용의 목적으로 이야기를 나누고 싶으신 분은 '문의하기' 버튼을
          눌러주세요.
        </p>
      </div>
      <div className="lower">
        <span>&copy; 2023 Boochoo Camp. All rights reserved.</span>
        <span>{/* Deleted for sensitive info */}</span>
      </div>
    </footer>
  );
}

Revising with BEM method will look as below:

src/components/Footer.tsx

export default function Footer(): JSX.Element {
  return (
    <footer className="footer">
      <div className="footer__upper">
        <div className="footer__qna">
          <span className="footer__section-title">문의하기</span>
          <span className="footer__section-text">
            {/* Deleted for sensitive info */}
          </span>
        </div>
        <Link href="https://www.instagram.com/boochoo.camp/" target="blank">
          <Image src={instagram} alt="instagram" />
        </Link>
      </div>
      <div className="footer__mid">
        <p className="footer__section-title">
          {/* Deleted for sensitive info */}
        </p>
        <p classNAme="footer__section-text">
          정보 사용의 목적으로 이야기를 나누고 싶으신 분은 '문의하기' 버튼을
          눌러주세요.
        </p>
      </div>
      <div className="footer__lower">
        <span className="footer__section-title--bolded">
          &copy; 2023 Boochoo Camp. All rights reserved.
        </span>
        <span className="footer__section-text">
          {/* Deleted for sensitive info */}
        </span>
      </div>
    </footer>
  );
}

2. Module

Module literally means making styling file as module so that we can use it as a JavaScript file by importing it.

The best thing about this is that if you inspect those elements on browser, you can see it gives the random id value at the end of class name. Therefore, you don't need to consider block, elment and modifier by yourself as you did in BEM method. However, you must designate class names for every single blocks and elements.

👉 Implementing Module

src/components/Footer.tsx

import style from "./Footer.module.scss"; // or './Footer.module.css';
export default function Footer(): JSX.Element {
  return (
    <footer className={style.footer}>
      <div className={style.footer__upper}>
        <div className={style.footer__qna}>
          <span className={style.footer__section_title}>문의하기</span>
          <span className={style.footer__section_text}>
            {/* Deleted for sensitive info */}
          </span>
        </div>
        <Link href="https://www.instagram.com/boochoo.camp/" target="blank">
          <Image src={instagram} alt="instagram" />
        </Link>
      </div>
      <div className={style.footer__mid}>
        <p className={style.footer__section_title}>
          {/* Deleted for sensitive info */}
        </p>
        <p classNAme={style.footer__section_text}>
          정보 사용의 목적으로 이야기를 나누고 싶으신 분은 '문의하기' 버튼을
          눌러주세요.
        </p>
      </div>
      <div className={style.footer__lower}>
        <span className={style.footer__section_title_bolded}>
          &copy; 2023 Boochoo Camp. All rights reserved.
        </span>
        <span className={style.footer__section_text}>
          {/* Deleted for sensitive info */}
        </span>
      </div>
    </footer>
  );
}

Understanding CSS BEM (opens in a new tab) ↩

Introduction

Naming class

Introduction

Background

Problem

Solution

1. BEM Method

Block

Element

Modifier

👉 Implementing BEM method

2. Module

👉 Implementing Module

Footnotes