CSS Nesting 지원으로 Sass를 버리다!
Sass를 사용해오던 개발자가 CSS Nesting 지원을 통해 Sass 의존성을 제거하고, 유지보수성을 높인 경험을 공유함
CSS Variables, Calculations, Nesting 등 CSS 자체 기능의 발전으로 Sass의 필요성이 줄어들었으며, esbuild를 활용한 빌드 과정을 소개함
커뮤니티에서는 의존성 관리의 중요성과 함께, 장기적인 관점에서 유지보수성을 고려하는 개발자의 결정에 공감하는 분위기임
CSS Nesting 도입 배경
저자는 2013년부터 Sass를 사용하여 CSS를 관리해왔지만, CSS 자체의 발전으로 Sass의 필요성이 줄어들었다고 설명한다. 구체적으로 CSS Variables와 Calculations를 먼저 CSS로 전환하고, CSS Nesting 지원을 통해 Sass를 완전히 제거했다. 따라서, 최신 브라우저 기능을 적극적으로 활용하려는 개발자들에게 좋은 사례가 될 수 있다.
Sass에서 esbuild로의 전환
Sass를 제거하면서 esbuild를 사용하여 CSS 파일을 minify하는 방식으로 변경했다. 저자는 gzip 압축과 minify의 효과는 별개라고 강조하며, esbuild를 통해 파일 크기를 줄이는 것이 중요하다고 설명한다. 반면, esbuild에 대한 의존성은 여전히 존재하지만, Sass에 비해 유지보수 측면에서 더 유리하다고 판단했다.
의존성 관리와 장기적인 유지보수
저자는 30년 이상 웹사이트를 운영해온 경험을 바탕으로, 의존성 관리의 중요성을 강조한다. Sassc와 같은 도구가 사라질 경우, 수동으로 CSS를 변환해야 하는 어려움이 발생할 수 있다. 따라서, esbuild와 같이 필수적인 기능이 아닌 도구는 유지보수 부담을 줄이는 방향으로 선택하는 것이 장기적으로 유리하다는 결론을 내렸다.
