네이밍 시스템

네이밍 시스템은 클래스 이름을 단순한 시각 표현이 아닌, 구조와 역할을 전달하는 설계 기준으로 정의합니다.
네이밍은 개인의 취향이 아니라, 팀 전체가 공유하는 규칙이며, 코드 수준에서 구조를 드러내는 방법론입니다.

네이밍 시스템의 목적

네이밍 시스템은 다음과 같은 목적을 가집니다.

클래스 이름은 구조와 역할이 드러나도록 설계하는 것을 원칙으로 합니다.
CSS 충돌과 예측 불가능한 스타일 확산을 방지합니다.
구조 중심 UI 설계를 코드 수준에서 명확히 드러냅니다.
협업 환경에서도 동일한 해석이 가능하도록 합니다.
중첩 구조에서도 소속 범위가 명확히 구분되도록 합니다.

기본 원칙

네이밍은 다음 원칙을 따릅니다.

클래스 이름은 어떻게 보이는지가 아니라 무엇인지를 표현합니다.
직접적인 색상·수치 기반 표현은 지양합니다.
구조와 관계가 이름에 드러나야 합니다.
모든 네이밍은 일관된 규칙과 명확한 범위를 가집니다.

✅ 좋은 예 (구조 중심 네이밍)

<div class="card">
    <div class="i_header"></div>
    <div class="i_body"></div>
</div>

❌ 나쁜 예 (스타일 중심 네이밍)

<div class="blue_box big_text rounded shadow">
  ...
</div>

접두사 기반 네이밍

클래스의 역할과 소속 범위를 명확히 하기 위해 접두사(prefix) 기반 네이밍 체계를 사용합니다.

접두사는 단순 분류가 아니라, 구조적 스코프(scope)를 드러내는 장치입니다.

블록 (Block)

블록은 UI의 기준이 되는 독립적인 구조 단위입니다.

레이아웃, 페이지, 컴포넌트 기준 단위입니다.
단독으로 의미를 가집니다.
다른 블록에 종속되지 않는 독립 구조입니다.

블록 네이밍 규칙

블록은 유형에 따라 다음과 같이 정의합니다.

레이아웃 블록 → layout_ 접두사 사용
- 예: layout_header, layout_footer
페이지 블록 → page_ 접두사 사용
- 예: page_home, page_about
컴포넌트 블록 → 접두사 사용하지 않음
- 예: card, modal, button

레이아웃과 페이지는 범위(scope)를 명확히 하기 위해 접두사를 사용하며, 컴포넌트는 재사용성을 고려해 의미 중심의 단일 이름으로 정의합니다.

내부 요소 접두사 체계

내부 요소는 상위 블록에 종속된 구조 요소입니다.

기존에는 모든 내부 요소를 i_로 통일했으나, 레이아웃·페이지·컴포넌트가 서로 중첩되는 구조에서 접두사가 동일할 경우 소속 범위 해석이 모호해지는 문제가 발생할 수 있습니다.

이를 방지하기 위해 블록 유형별로 내부 요소 접두사를 구분합니다.

`l_` : 레이아웃 전용 내부 요소

레이아웃 블록에 종속됩니다.
공통 영역 구조를 설명합니다.

`p_` : 페이지 전용 내부 요소

특정 페이지 블록에 종속됩니다.
다른 페이지나 컴포넌트에서 재사용하지 않습니다.

`i_` : 컴포넌트 내부 요소

컴포넌트 블록에 종속됩니다.
재사용 가능한 구조의 하위 요소입니다.

내부 요소 사용 원칙

내부 요소(l_, p_, i_)는 단독 사용을 허용하지 않습니다.
반드시 상위 블록과 함께 사용합니다.
접두사는 요소의 성격이 아니라 소속 범위를 기준으로 결정합니다.

중첩 구조 예시

<div class="layout_header">
    <div class="l_inner">

        <div class="card">
            <div class="i_header"></div>
            <div class="i_body"></div>
        </div>

    </div>
</div>

위 구조에서 레이아웃 블록과 컴포넌트 블록이 함께 사용되었습니다. 접두사를 구분함으로써 중첩 구조에서도 각 요소의 소속 범위를 즉시 해석할 수 있습니다.

수정자 (`m_`)

m_ 접두사는 블록 또는 내부 요소의 상태나 변형을 표현합니다.

활성/비활성
상태 변화
조건부 표현
시스템화된 크기 스케일 등

수정자는 구조를 변경하지 않으며, 항상 기존 구조에 조건을 추가하는 용도로만 사용합니다.

사용 원칙

단독 사용을 허용하지 않습니다.
반드시 블록 또는 내부 요소와 함께 사용합니다.

시각적 표현 네이밍에 대한 기준

시각적 표현을 직접 드러내는 네이밍을 기본적으로 지양합니다.

❌ .red_button
❌ .big_title

다만, 규칙화된 의미나 상태로 치환되는 경우에 한해 허용합니다.

✅ .m_error
✅ .m_size_large

즉, 시각 속성은 직접 표현하지 않고 의미·상태·규칙 체계 안에서 정의된 경우에만 허용합니다.

네이밍과 구조의 관계

네이밍이 곧 구조를 의미합니다.

이름이 모호하면 구조 설계가 불완전하다고 판단합니다.
클래스 이름만 보고 구조를 예측할 수 있어야 합니다.
문서 없이도 코드 자체로 구조를 설명할 수 있어야 합니다.

SLUR CSS 네이밍 시스템은 UI 구조 설계를 코드 수준에서 명확히 드러내기 위한 핵심 규칙입니다.

네이밍 시스템