회사에서 사용하는 class 네이밍 방식이 궁금하다.

다니는 회사에서 사용하는 클래스 네이밍 방식이 있는데_

업계에서는 이런 방식을 뭐라고 하는지 궁금하여 찾아봤다.

 

보통 아래와 같이 마크업 하고 있다. (data 말고도 post, board, bullet 등등 사용)

<div class="data-display module-a style-a">
    <div class="data-list">
        <div class="data-item">
            <div class="data-wrap">
                <div class="data-head">
                    <p class="data-subject"><span class="data-name">타이틀영역</span></p>
                </div>
                <div class="data-body">
                    <p class="para">&nbsp;</p>
                </div>
            </div>
        </div>
        <div class="data-item">
            <div class="data-wrap">
                <div class="data-head">
                    <p class="data-subject"><span class="data-name">타이틀영역</span></p>
                </div>
                <div class="data-body">
                    <div class="order-list module-b style-a type-a small-1x normal-02">
                        <div class="order-item">
                            <p>서브 타이틀</p>
                            <div class="data-list module-a type-c normal-02 small-1x">
                                <div class="data-item">설명글</div>
                                <div class="data-item">설명글</div>
                            </div>
                        </div>
                        <div class="order-item">
                            <p>서브 타이틀</p>
                            <div class="data-list module-a type-c normal-02 small-1x">
                                <div class="data-item">설명글</div>
                                <div class="data-item">설명글</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="data-item">
            <div class="data-wrap">
                <div class="data-head">
                    <p class="data-subject"><span class="data-name">타이틀영역&nbsp;</span></p>
                </div>
                <div class="data-body">
                    <div class="order-list module-b style-a type-a small-1x normal-02">
                        <div class="data-list module-a type-c normal-02 small-1x">
                            <div class="data-item">리스트아이템글</div>
                            <div class="data-item">리스트아이템글</div>
                            <div class="data-item">리스트아이템글</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

 

마크업을 보면 알겠지만 일단 Base가 되는 클래스가 있다. 이 클래스를 중심으로 디자인 케이스별 modifier 클래스를 조합해서 사용하는 중이다.

 

module-a, module-1, normal-01, normal-02처럼 알파벳이나 숫자를 늘려 붙여가면서 케이스를 구분한다.

 

(주로 module, design, style, case, type 등의 클래스를 사용하여 조합)

 

data-display ← Base (Block)
data-list ← Base (Block)
data-item ← Base (Element)
module-a ← Modifier (또는 별도의 기능명을 사용)
style-a ← Modifier (스타일 변형)
type-a ← Modifier (스타일 변형)
small-1x normal-02 ← Size/Variant 유틸리티 (Utility)

 

즉,

Base가 되는 data-display, data-list, data-item 은 주제별 기본 단위가 되고,

module-a, style-a, type-a는 같은 블록의 스타일 변형 버전이고,

small-1x, normal-02 같은 클래스로 색상이나 크기 등 세부적인 속성을 조정한다.

 

이렇게 클래스 네이밍하는 방식을 업계에서는 뭐라고 하는지 궁금하여, gpt에게 물어봤다.

---

 

gpt 왈왈,,

 

위와 같은 네이밍 방식은,

 

▶ BEM 확장형”, “Utility-BEM”, 또는 “Atomic + BEM” 스타일”이라고 분류된다고 한다.

(이 마크업이 BEM 식이라고?)

 

근데 BEM에서 사용하는 __, -- (Block → Block__Element → Block--Modifier)을 사용하지 않고 

Block + modifier 조합하는 방식을 사용하는 것이라고 한다.

 

Bootstrap, Tailwind 같은 유틸리티 네이밍과 비슷 (쪼개서 사용하는 게 비슷하다고 하는 건가. 회사에서 mt10, pl10 이런 거 안 쓰는데..)

 

 

▶ 업계에서 실제로, module-*, style-*, type-* 이나 size-* 를 조합하는 구조를

모듈/케이스/타입으로 변형 관리하는 컴포넌트 단위 모듈 디자인,
BEM-like + Utility-first라고 부른다고 한다. 
(‘Component + Modifier + Utility’ 패턴이라 부르기도 함.)

---

캡쳐 이미지 출처: tailwind

테일윈드 마크업 클래스와 비슷한 것 같기도.

 

 

캡쳐 이미지 출처: 크롬 검색 ai가 만들어준 코드

 

BEM방식에서 __, -- 제외하고 보면 비슷한 것 같기도...

 

어차피 'BEM 확장형'스타일일 바에야 BEM방식으로(주류니까) 가면 좋겠는데..