CSS 방법론 그리고 Utility First CSS

프로젝트를 진행하면서 Material 디자인 시스템을 기반으로 한 Vuetify, Mui 또는 Antd와 같은 UI 라이브러리를 사용해서 전체적인 디자인 흐름을 잡고 Sass, CSS in JS(Emotion, Styled Component)를 통해 CSS를 Customize를 했었다.

이전에 어떤 CSS 라이브러리를 사용할지 고민하다 같은 디자인을 만들었을 때 위의 블로그 말대로 Tailwind CSS의 퍼포먼스가 좋다 하더라도 CSS in JS에서 주장하는 내용을 보면 참 가성비 좋게(DX 측면, Styled Component를 약간의 최적화하면 또 비슷한 성능이 나올 수도 있다고 한다는 주장이 있기 때문에, 영향력 있는 라이브러리들이 Linaria와 같이 Zero Runtime을 업그레이드할 수도 있다고 생각되었고, React도 Performance만 보면 가장 좋은 라이브러리는 아닌 것도 아니기에) 만들기 좋다고 생각해서 최근에도 Mui+Emotion을 사용했다.

이전 CSS in JS를 선택한 포스팅

CSS in JS

styled component와 tailwind CSS 퍼포먼스 비교

Why I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS?

 

그럼에도 Utility First CSS, Functional CSS, Atmoic CSS와 같은 방법론과 함께 tailwind가 계속해서 인기 있을만한 이유 그리고 CSS의 역사를 아래 블로그에서 이해하기 쉽게 설명해 주었다.

CSS 역사 그리고 Utility First CSS

내가 하면 더 잘 만들 것 같아서 만들어 본 세상 귀여운 on-demand Atomic CSS Library. -Part.1

 

역사 TL;DR

HTML이 등장하고 서식을 꾸미고 싶어 inline-style(1990)이 나왔지만 코드가 비대해지면서 가독성이 떨어지고 유지보수가 어려워 CSS(1996)가 등장하고, 자연스럽게 콘텐츠와 서식이 분리가 되었다. 이후에 CSS Selector가 복잡해지며 SASS(2006)가 등장했고 작성한 코드들이 모든 프로젝트에 영향을 주고 일부를 방지하기 위해 important!와 같은 방법으로 덮어쓰고 서식의 우선순위 등 Specificity를 고려하는 문제가 생기자 SMACSS, OOCSS, BEM(2013)과 같은 방법론이 등장하여 .card, .card__image, .card__title과 같은 방법으로 Specificity를 하나로 통일하는 컨벤션을 만들었지만 이전에 문제를 본질적으로 해결하진 못했습니다. global scope 문제의 해결책으로 CSS Modules(2015)가 등장하며 compoment 단위에서 사용하는 CSS에 hash를 추가는 방법이 만들어졌습니다. 이후 React가 대세가 되며 JSX 내에서 사용하기 좋은 styled-component(2016)이 등장하며 인기를 지금까지 끌어왔습니다.

 

Tailwind(2017) TL;DR

시멘틱 하다고 생각했던 이름들이 .inner-main .wrap_cont .cp_more_wrap .inner_item .wrap_title 더 이상 시멘틱하지 않아 지고 어떻게 이름을 만들어야 할지 고민하는데 어려움을 겪고 재활용하기 힘든 클래스들이 만들어지며 기존에 .bold .flex 와 같이 편하게 사용했던 Class name과 같이 전부 만들어두면 어떨까에서 출발했다고 한다.

과거 inline-style이 복잡하다고 느껴졌고 시멘틱한 태그를 사용해야만 했던것과 달리 웹 프레임워크가 발전하며 컴포넌트가 시멘틱한 역할을 해주고 중복 방지역할까지 해주고 있다보니 클래스 이름을 발명할 필요 없고, 다른 항목에 영향을 주지 않는 보다 안전한 변경이 가능하고, 재사용 가능하게 만들어 CSS 파일을 작게 유지할 수 있고, CSS를 따로 생성하지 않아도 되서 디자인이 곧 아이덴티티인 시대에 훨씬 많은 유연성과 제어기능을 제공하기 때문에 많은 인기를 누리는거 같다.

초기 유틸리티 클래스 이름에 익숙해지기 위한 학습 곡선을 제외하곤 VSCode Extension에서 TailwindCSS IntelliSense, Tailwind Fold와 같이 유용한 Extension과 함께라면 금방 사용해볼만한 도전일거 같다.

 

https://blog.hubspot.com/website/what-is-tailwind-css

Tailwind CSS: What It Is, Why Use It & Examples