styled-components를 지양하게 된 이유

현재 노트: KR-010.10 d
상위 분류: KR-010.10 HTML,CSS,JavaScript

#CSS #styled_comonents #stylelint

![info]
No Silver Bullet—Essence and Accident in Software Engineering

• Fred BrooksDelete

글을 쓰게 된 이유

최근에 styled-components 라이브러리를 지양해야할만한 경험을 하여 이를 글로 작성해봅니다.

styled-components 사용 이유는 다음의 글에 작성해두었습니다. -> KR-010.10 a
간단하게 말하면 CSS-In-JS로 JS파일안에 CSS까지 통합하여 사용하고자하는 목적이 큽니다.
이외에도 장점으로는 클래스이름을 고유하게 작성해준다던가, css분기처리를 쉽게 해주는 등의 장점들도 있습니다.
하지만 단점들도 있는데 중앙화하기 어렵다는점이 고민거리였습니다. 그럼에도 불구하고 적당히 쓸만한 것 같은데? 라고 생각하던 와중 결국 일단은 지양하는게 좋은 것 같기도... 라는 생각이 들게 만든 경험이 있었습니다.

그것은 바로 Lint문제였습니다.

stylelint와 styled-coponents

Style에도 Lint를 적용하기위해 stylelint를 설치하였습니다. 추가적으로 요즘 쓰고있는 tailwind도 적용하기 위해서였죠. css파일에 lint를 적용해야겠다고 생각한 이유는 같은 css파일 내에서 class1과 class2를 작성하는데 display:flexbox와 같은 주요 속성이 다른 위치에 작성되다보니 헤맨 경험이 있었습니다. 그래서 정해진 위치에 보이겠끔 style에도 lint가 필요하겠구나 느껴서 사용을 시도하였습니다.

문제는 styled-components에 있었습니다. stylelint의 경우 CSS에 맞춰 사용되다보니 styled-components의 사용이 어려웠습니다. 물론 stylelint-config-styled-components를 통해 지원하기는 하지만 문제는 tailwind까지 포함해야했기 때문입니다.

이를 통해 느낀 것은 styled-components의 경우 js에 기반하다보니 일반적인 .css에 해당하는 라이브러리들이 처리해주기 위해선 복잡한 문제가 생기는 경우가 많다는 것이었습니다.

생각해볼 점

그래서 이전부터 styled-components의 경우 global한 속성은 어떻게 정해야하지?
만약 global 지원 속성을 사용한다면 컴포넌트 내부에 모든것을 처리하려고하는 의도에 맞는 목적일까? 등 고민이 많았었는데,
향후 다른 CSS 라이브러리와의 충돌이나 연동등의 트러블슈팅까지 고려한다면 일단은 지양하는게 맞는것 같다고 고민을 내렸습니다.

결론

1. stylelnt와 tailwind를 사용하는 상황에서 styled-components까지 사용하려하니 문제가 발생
2. styled-components의 경우 js기반이다 보니 css가 기반인 다른 라이브러리들과 호환성이 나중에도 발생할 것 같다고 판단
3. 가능하면 사용하지 않기로 결정