About
Atomic CSS는 Utility-First CSS, Functional CSS로도 알려져있습니다.
Atomic CSS라는 용어는 2013년 10월 Thierry Koblenz가 "Challenging CSS Best Practices"라는 아티클에서 처음으로 사용했습니다. Atomic CSS는 이 기사를 기반으로 시작된 오픈 소스 프로젝트의 이름이였지만, 특정 라이브러리나 프레임워크가 아니라 아키텍처 철학이며, 정적 접근(ex. Tailwind CSS), 프로그래밍식 접근(ex. Styled Components) 방식을 모두 포함하는 개념입니다.
GitHub, Netflix, Heroku, Kickstarter, Twitch, Segment 등과 같은 대기업은 이 접근 방식을 이미 성공적으로 사용하고 있습니다.
Variations of Atomic CSS
Static
정적 접근 방식의 대표적인 예로 Tailwind가 있습니다.
디자인을 위한 CSS 커스터마이징이 필요한 기존 접근 방식에서 벗어나 이미 선언되어 있는 클래스를 HTML에 직접 적용하여 요소의 스타일을 지정하는 개념으로, 작은 단위의 기본 유틸리티 세트를 조합해서 복잡한 구성 요소를 빌드할 수 있습니다.
- 클래스 이름을 생각해내는 에너지를 아낄 수 있습니다.
- 모든 것을 재사용할 수 있기 때문에 새 CSS 작성할 필요가 거의 없어 CSS 사이즈를 관리할 수 있습니다.
- CSS는 전역적이기 때문에 변경할 때마다 어디가 깨지는 지 알 수 없습니다. HTML 클래스는 로컬이기 때문에 다른 문제에 대해 걱정하지 않고 안전하게 변경할 수 있습니다.
<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-lg flex items-center space-x-4">
<div class="shrink-0">
<img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
</div>
<div>
<div class="text-xl font-medium text-black">ChitChat</div>
<p class="text-slate-500">You have a new message!</p>
</div>
</div>✅ 위의 예시에서 사용한 클래스 리스트
- 전체 카드 레이아웃을 제어하는 Tailwind의 flexbox(
flex,shrink-0), padding 유틸리티(p-6) - 카드 너비를 제한하고 수평 중앙에 배치하는 최대 너비, margin 유틸리티(
max-w-sm,mx-auto) - 카드 스타일을 지정하기 위한 background color, border radius, box shadow 유틸리티(
bg-white,rounded-xl,shadow-lg) - 로고 이미지의 크기를 조정하기 위한 너비/높이 유틸리티 (
w-12,h-12) - 로고와 텍스트 사이의 간격을 처리하는 space-between 유틸리티 (
space-x-4) - 카드 텍스트의 스타일을 지정하는 font size, text color, 및 font-weight 유틸리티(
text-xl,text-black,font-medium등)
Programmatic
프로그래밍식 접근 방식의 대표적인 예로 Styled Components가 있습니다.
HTML에 구현되어 있는 것을 기반으로 스타일을 자동생성하기 위해 빌드 도구를 포함합니다.
예를 들어 아래와 같이 구현하면,
<!-- Programmatic Atomic CSS Example -->
<div class="Bgc(#0280ae) C(#fff) P(20px)">Lorem ipsum</div>아래와 같은 CSS가 생성됩니다.
.Bgc\(#0280ae\) { background-color: #0280ae; }
.C\(#fff\) { color: #fff; }
.P\(20px\) { padding: 20px; }Longhand / Shorthand
Longhand 스타일은 좀 더 읽기 쉬운 클래스 이름을 선호(ex. Expressive CSS, Solid)
/* Longhand Atomic CSS 예시 */
.bgr-blue { background-color: #357edd; }
.background-blue { background-color: #357edd; }
.backgroundcolor-blue { background-color: #357edd; }
.text-h1 { font-size: 3rem; }
.text-3rem { font-size: 3rem; }
.text-huge { font-size: 3rem; }
.fontsize-1 { font-size: 3rem; }
.marg-0 { margin: 0; }
.margin-0 { margin: 0; }
/* Programmatic Longhand */
bgrBlue(#357edd) { background-color: #357edd; }
backgroundBlue(#357edd) { background-color: #357edd; }
backgroundColorBlue(#357edd) { background-color: #357edd; }Shorthand 스타일은 짧고 간결한 클래스 이름을 선호(ex. Tachyons, Basscss)
/* Shorthand Atomic CSS 예시 */
.bg-blue { background-color: #357edd; }
.f1 { font-size: 3rem; }
.ma0 { margin: 0; }
/* Programmatic Shorthand */
Bgc(#357edd) { background-color: #357edd; }
🔗 참고 링크
- 객체 지향 CSS의 시작 - Nicole Sullivan: https://github.com/stubbornella/oocss/wiki
- Tailwind Docs의 Utility-First 문서: https://tailwindcss.com/docs/utility-first
- https://johnpolacek.github.io/the-case-for-atomic-css/
- https://css-tricks.com/lets-define-exactly-atomic-css/
- https://fullstackradio.com/75
