네이밍 규칙
Atomic CSS의 핵심 규칙은 단순합니다: CSS 속성과 값의 앞글자를 조합합니다.
기본 규칙
CSS 속성: 값 → 앞글자 조합 = 클래스명| CSS | 클래스 | 분해 |
|---|---|---|
| display: flex | df | d(isplay) + f(lex) |
| display: grid | dg | d(isplay) + g(rid) |
| display: none | dn | d(isplay) + n(one) |
| justify-content: center | jcc | j(ustify)-c(ontent) + c(enter) |
| align-items: flex-start | aifs | a(lign)-i(tems) + f(lex)-s(tart) |
| flex-direction: column | fdc | f(lex)-d(irection) + c(olumn) |
| position: absolute | pa | p(osition) + a(bsolute) |
| position: sticky | ps | p(osition) + s(ticky) |
| overflow: hidden | oh | o(verflow) + h(idden) |
| white-space: nowrap | wsn | w(hite)-s(pace) + n(owrap) |
| text-overflow: ellipsis | toe | t(ext)-o(verflow) + e(llipsis) |
| cursor: pointer | cp | c(ursor) + p(ointer) |
| object-fit: cover | ofc | o(bject)-f(it) + c(over) |
문서에 없는 속성도 같은 규칙으로 추론 가능합니다. 예: table-layout: fixed → tlf, backface-visibility: hidden → bfvh
숫자 값
속성 약어 뒤에 숫자와 단위를 바로 붙입니다:
{속성 약어}{숫자}{단위}| CSS | 클래스 |
|---|---|
| padding: 16px | p16px |
| margin-top: 2.4rem | mt2-4rem |
| gap: 8px | gap8px |
| font-size: 1.4rem | fs1-4rem |
| width: 50% | w50p |
| height: 100vh | h100vh |
| border-radius: 8px | br8px |
| max-width: 80rem | maxw80rem |
| line-height: 1.7 | lh1-7 |
| letter-spacing: 0.05em | ls0-05em |
하이픈(-) 사용
하이픈은 4가지 용도로 사용됩니다:
| 용도 | 예시 | 결과 |
|---|---|---|
| 소수점 | gap1-5rem | gap: 1.5rem |
| 소수점 | fs1-4rem | font-size: 1.4rem |
| 값 구분 (Grid) | gtc1fr-2fr-1fr | grid-template-columns: 1fr 2fr 1fr |
| 미디어 쿼리 | sm-dn | @media (max-width: 768px) { display: none } |
| 의사 클래스 | hover-bg333333 | :hover { background-color: #333333 } |
특수 접미사 / 접두사
i 접미사 — !important
클래스 끝에 i를 붙이면 !important가 추가됩니다:
| 클래스 | CSS |
|---|---|
w100pxi | width: 100px !important |
dni | display: none !important |
mt0i | margin-top: 0 !important |
neg- 접두사 — 음수 값
neg-를 앞에 붙이면 음수 값이 됩니다:
| 클래스 | CSS |
|---|---|
neg-mt10px | margin-top: -10px |
neg-l5px | left: -5px |
neg-zi5 | z-index: -5 |
neg-order1 | order: -1 |
중복 구분
같은 약어가 여러 속성에 해당할 경우, 단위 유무로 구분합니다:
| 클래스 | CSS | 이유 |
|---|---|---|
fs0 | flex-shrink: 0 | 단위 없음 → flex-shrink |
fs16px | font-size: 16px | 단위 있음 → font-size |
pr | position: relative | 단위 없음 → position |
pr16px | padding-right: 16px | 단위 있음 → padding-right |