네이밍 규칙

Atomic CSS에는 규칙이 단 하나뿐입니다. CSS 속성과 값에서 각 단어의 첫 글자를 뽑아 조합하면 그것이 바로 클래스명입니다. 이 원리만 이해하면 거의 모든 클래스를 유추할 수 있습니다.

기본 규칙

숫자가 없는 키워드 값을 가진 속성은 첫 글자만 조합하면 됩니다.

단위가 있는 속성

CSS 값에 숫자와 단위가 포함될 때는 속성 약어 바로 뒤에 붙입니다.

지원하는 단위

하이픈(-) 사용법

하이픈 문자(-)는 맥락에 따라 4가지 서로 다른 역할을 합니다. 이 차이를 이해하는 것이 핵심입니다.

1. 소수점

CSS 클래스명에는 점(.)을 쓸 수 없으므로 하이픈이 소수점을 대신합니다.

2. 값 구분자 (Grid)

grid 클래스에서 하이픈은 여러 값을 구분하며, CSS에서는 공백으로 바뀝니다.

3. 미디어 쿼리 접두사

브레이크포인트 접두사 뒤에 하이픈을 붙이면 해당 화면 크기에서만 클래스가 활성화됩니다.

4. 가상 클래스 접두사

가상 클래스명 뒤에 하이픈을 붙이면 특정 상태에서 스타일이 적용됩니다.

특수 접미사 & 접두사

i 접미사 = !important

아무 클래스 끝에 i를 붙이면 !important가 추가됩니다.

neg- 접두사 = 음수 값

neg-를 앞에 붙이면 음수 값이 됩니다.

p = 퍼센트(%)

p를 단위 접미사로 써서 %를 표현합니다.

중의성 해소

일부 약어는 여러 CSS 속성에 대응됩니다. 핵심 규칙은 단위의 유무가 어떤 속성을 가리키는지 결정한다는 것입니다.

모든 CSS 속성 유추하기

네이밍 규칙은 보편적입니다. 문서화되지 않은 클래스라도 규칙으로 유추할 수 있습니다. 다양한 CSS 속성에 걸친 예시를 살펴보세요.

색상 네이밍

색상은 속성 접두사 뒤에 색상 값(HEX 또는 RGBA)을 붙입니다.

HEX 색상 (6자리)

RGBA 색상

형식: {접두사}{R}-{G}-{B}-{투명도}, 투명도는 0-100 범위입니다(0.0-1.0에 매핑).

불투명도

빠른 참조

금방 외우게 될, 가장 자주 쓰는 클래스들입니다.

<!-- Flexbox center -->
<div class="df jcc aic">centered content</div>

<!-- Flex column with gap -->
<div class="df fdc gap16px">stacked items</div>

<!-- Header: logo left, nav right -->
<header class="df jcsb aic px2rem py16px">
  <div>Logo</div>
  <nav class="df gap2rem">links</nav>
</header>

<!-- Grid 3 columns -->
<div class="dg gtcr3-1fr gap2rem">cards</div>

<!-- Responsive: 3col → 1col -->
<div class="dg gtcr3-1fr sm-gtc1fr gap2rem">cards</div>

<!-- Responsive show/hide -->
<div class="db sm-dn">desktop only</div>
<div class="dn sm-db">mobile only</div>

<!-- Hover button -->
<button class="bg6366F1 hover-bg4F46E5 cFFFFFF py12px px2rem br8px bn cp tall200msease">
  Click me
</button>

<!-- Absolute positioned overlay -->
<div class="pr">
  <div class="pa t0 l0 w100p h100p bg0-0-0-50 df jcc aic">overlay</div>
</div>

<!-- Text ellipsis (single line) -->
<p class="wsn oh toe">very long text that will be truncated...</p>

팁

관련 문서