처음에 썼던 건 scss. css를 프로그래밍 하듯이 쓸 수 있어 신기해하며 썼다. 쓰다보면 결국 기본 css 스타일로만 쓰게 되지만. 그러나 scss의 가장 큰 어려움은 시맨틱하게 클래스명을 짓는 것이다. 매번 css 클래스명 만들 때마다 고통이다. 페이지가 많아질 수록 어려움도 정비례해서 커진다. 수정하려고 css 찾아다니는 것도 쉽지 않고.
그러다 호기심에 css in js 중 가장 인기있는 style-components를 써 봤다. 너무 너무 편한 것. 컴포넌트 안에서 선언해서 쓰기만 하면 되니 클래스명 중복 걱정없고 이름 만드느라 고민 안해도 되고 css 수정하러 이리저리 찾아 다니지 않아도 되고.
편한건 맞는데 쓰다보니 고민도 생겼다. 컴포넌트 안에 css 내용들이 잔뜩 들어있으니 보기가 안 좋다. 로직과 스타일은 최대한 분리하고 싶은데. 카카오 기술 블로그에서 보니 성능도 떨어진다고 한다. next.js 에서는 미리 렌더링 되어 버려 css 가 먹지 않는 현상도 있어 한때 고생을 했다. 문제는 간단히 해결되지만 next.js와 궁합이 안 좋다는 인상이 생겼고 작은 css 수정에도 다소 커보이는 스타일을 선언해야 하는게 부담이기도 하다.
//이런 것도 많아지면 부담const HeaderTitle = styled.div`
cursor: pointer;
color: rgb(255, 255, 255);
`;
결국 마음이 다시 scss로 돌아가려고 하는데 styled-components의 네이밍의 편리함이 계속 머리에 남았다.
css와 전혀 달라보이는 tailwind는 아예 고려조차 안 하고 있었는데 이를 추천하는 블로그 글을 보니 한 번 써보고 싶었다. 구글 트렌드를 찾아보니 인기 있는게 맞나?
그런데 github을 보니 star 개수가 장난이 아니다. sass가 16k, styled-components가 37k, tailwind가 61k. 밑에 두 개를 합쳐도 tailwind를 못 따라온다. 왜이리 인기가 많은겨?
시험삼아 써보기로 했다. 일단 판단 기준에 괴상한 tailwind 문법을 익히는건 빼기로 했다. 낯설지만 css와 단어가 비슷한 면도 있어 눈에 익으면 나중에는 잘 쓸 수 있을 것 같았다. 테스트 하다 보니 inline으로 css 하드코딩 되는게 무척 거슬린다. 이런 스타일 혐오하는데. 가독성을 많이 떨어뜨린다. 그런데 이것도 변수로 선언이 가능하다. 그렇다면 매우 좋다. 반복되는 스타일, 가독성 떨어뜨리는 스타일은 변수로 선언해 쓰고 필요하다면 inline으로 직접 넣어도 되고 styled-components의 무겁게 느껴지게 하는 단점도 해소되며 그 보다 더 나은 기능으로 활용할 수 있다.
//변수로 선언해 활용
export default function Tailwind() { const contentsBorder = 'w-[300px] h-[192px] border-[1px] rounded border-[#eaeaea] p-6 m-4';return (
<>
<div className={contentsBorder}>
<div>Test</div>
</>
</>
)
}
이래서 인기가 두 배가 넘는구나. 타이핑 할 때마다 가이드 문서 열어놓고 선언 방법을 일일이 찾아봐야 하는게 큰 단점이지만 그것만 익숙해지면 편한 솔루션이라 하겠다.
