Atomic CSS

Atomic CSS ?

• 단일 목적을 가지는 CSS 클래스 모음
• 단일 목적을 가지는 CSS 아키텍쳐

.margin-a-1 {
	margin: 2px;
}

.margin-a-2 {
	margin: 4px;
}

.margin-a-4 {
	margin: 6px;
}

.text-red {
	color: red;
}

.text-bold {
	font-weight: bold;
}

기존에는 Sementic CSS 가 유행을 하였다.(대표적으로 BEM)
아래의 CSS 코드가 메뉴를 스타일링하고, 메뉴의 아이템을 스타일링한다는것을 의미적으로 잘 보여준다.

.menu {
	padding: 10px;
}

.menu__item {
	border: 1px solid grey;
    color: blue;
}

Sementic CSS 같은 경우 단점이 있었는데, 여러 CSS 클래스에서 반복되는 속성이 문제였습니다.
이를 동일하게 반복되는 속성을 각각의 CSS 클래스로 빼고 이러한 CSS 클래스를 조합해 스타일링을 하는 Atomic CSS 가 대세가 되기 시작하였습니다.

이러한 Atomic CSS 의 대표적인 CSS 가 Tailwind CSS 입니다.
Tailwind CSS는 Utility-First 컨셉을 가진 CSS 프레임워크 입니다.
유틸리티 CSS 클래스는 1가지 작업만을 수행하는 CSS 클래스를 의미합니다.

아래처럼, 여러 CSS 클래스가 있지만 전부 1가지 스타일링만 책임을 가집니다.

<section class="w-full shadow p-20 mb-5 text-center text-color-primary">
    <h1 class="text-xl font-bold">This is a heading<h1>
</section>

Atomic CSS 를 사용하면, DRY 원칙을 보장하는데 매우 도움이 됩니다.

Tailwind CSS 는 또 다른 장점이 있습니다.

이전에는 SCSS(SASS)와 같은 CSS-preprocessor 를 가지고 아래와 같이 utility css 를 작성했습니다.

// scss

@for $i from 1 through 10 {
  .pa-#{$i} {
    padding: $i / 4 rem;
  }
}

.pa-1 { padding: 0.25 rem; }
.pa-2 { padding: 0.5 rem; }
/* ... */

그런데, 만약 pa-10 css class 는 쓰이지 않는다면? 이러한 유틸리티 css class 들이 늘어난다면
해당 CSS 크기는 엄청 커질겁니다.(사용되지 않는 CSS class 로 인해..)

이 문제를 해결하기 위해서 Tatilwind CSS 는 Purge 를 사용하여 사용되지 않는 CSS class 를 프로덕션 빌드에 포함시키지 않습니다. 이를 통해서 우리는 사이즈가 최적화된 CSS 파일을 불러와 사용을 하면 됩니다.