[끄적끄적] CSS 스타일링 고민

스타일링 일관성에 대한 고민

중간에 프로젝트에 투입되고 보니, 현재 css, scss, stlyed-component, tailwind css가 혼합되어 사용되고 있다..

SE 각자 입맞에 맞게 쓴 것 같은데 다양한 선택지가 제공되는 만큼 유연성을 가져갈 수 있지만,

이는 여러가지 스타일링 방법이 혼합됨에 따라 복잡성을 증가시키고, 코드의 일관성을 유지하기가 어렵다.

 

스타일링 가이드를 어떻게 가져가면 좋을지 고민하다가 내린 결론은 scss를 기본으로 필요에 따라 styled-component를 활용하면 될 것 같다고 생각했다.

현재 퍼블리싱 코드를 보면 페이지별로 html 파일로 주고 있고, html 파일을 보면 외부에 정의한 css 파일의 클래스를 가져다가 쓰고 있다.

이러한 구조라면 이를 다시 tailwind CSS 방식으로 가져가기에는 쓸데 없는 공수가 들거라고 예상할 수 있다.

따라서 현재 퍼블코드를 받고 있는 그대로 css를 활용하되, 변수, 믹스인, 중첩 등 css보다 더욱 편리한 기능을 제공하는 scss를 사용하면 코드를 모듈화하고 재사용성을 높일 수 있을것이라 생각되었다.

그리고 필요에 따라, 컴포넌트 기반의 스타일링이 필요한 경우 styled-component를 일부 허용하면 유연하면서도 전체적으로는 일관된 스타일링 코드를 가져갈 수 있을 것 같다.