개인 프로젝트 스택을 고민하면서 CSS 전처리기의 개념을 파악하고, Sass와 style-components에 대해 알아보고 싶었기에 두 가지를 중심으로 궁금했던 점을 알아보는 글
CSS 전처리기(Css preprocessor)
A CSS preprocessor is a program that lets you generate CSS from the preprocessor's own unique syntax.
CSS 전처리기는 전처리기 고유의 문법을 통해 CSS를 생성하게 해주는 프로그램이다.
대부분의 전처리기는 순수 CSS에 없는 기능을 갖고 있으며, 이 기능들 덕분에 CSS 구조가 더 읽기 쉬워지고, 유지보수도 더 용이해진다.
가장 널리 쓰이는 CSS 전처리기에는 Sass, LESS, Stylus, PostCSS 등이 있다.
styled-components는 전처리기인가?
공식 문서에서 styled-components를 하나의 단어로 정의하고 있지는 않으며, 다른 자료를 보면 이정도로 설명하고 있다.
Styled-components is a CSS-in-JS styling framework...
styled-components는 CSS-in-JS 스타일링 프레임워크이다.
(또다른 CSS-in-JS 라이브러리/프레임워크 중에는 emotion이 있다.)
Styled Components uses the CSS preprocessor stylis, supporting SCSS-like syntax for automatically nesting styles.
Styled Components는 stylis라는 CSS 전처리기를 사용한다. stylis는 자동 중첩 스타일에 필요한 SCSS 유사 문법을 지원한다.
그러므로 styled-components 자체로 CSS 전처리기라고 정의할 수는 없어보인다.
🔗 Benefits of using styled-components in React
🔗 Styled Components, Styled Systems and How They Work
Sass? Scss?
Sass와 SCSS는 Sass가 제공하는 두가지 문법이다.
두 문법은 기능은 거의 같지만 생김새가 다르며, SCSS가 더 최신이고 더 좋은 문법으로 여겨진다.
-
Sass는 Haml이라는 다른 전처리기에서 파생된 것으로 Ruby 유사 문법을 사용한다. CSS 문법보다 더 짧고 타이핑이 쉽다. -
SCSS는 Sass와 CSS 문법 간의 갭을 줄이기 위해 CSS와 훨씬 더 비슷한 문법을 사용한다. 그리고 CSS와 완전히 호환되어 .css 파일을 .scss로 바꿔도 똑같이 작동한다. CSS 문법을 따르므로 익히기 쉽다.
Sass와 styled-component의 특징
Sass
- 장점
- variables, nesting, mixins 등의 강력한 기능을 갖고 있다.
- 추후 번들링하면 파일 별로 나누어 작성할 수 있으므로 깔끔하고 유지보수가 쉽다.
- 자유도가 높다.
- 단점
- 자유도가 높은 만큼 복잡한 코드가 작성될 수 있어서 주니어 개발자나 백엔드가 개발자가 협업 시 건드리기 어려워질 수 있다.
- 관심사의 분리라고는 하나 마크업과 스타일링 파일을 오가며 작성하는 것이 불편함은 확실하다.
- 네이밍에 대한 고민에서 벗어날 수 없다.
styled-components(CSS-in-JS)
- 장점
- 네이밍과 화면 전환 문제를 해결한다.
- 한 화면에 작성되므로 스타일링의 스코프가 특정 컴포넌트로 제한되며, 유지보수도 쉽다. 이는 작은 단위의 재사용 가능한 컴포넌트 작성 시 이상적인 형태이기도 하다.
- CSS 코드가 JS 코드 내에 있으므로 자바스크립트 기능을 스타일링에 적용할 수 있다. 이는 CSS-in-JS의 가장 큰 장점일 것이다.
- 단점
- 이전에는 퍼포먼스 이슈가 늘 회자되었다. 그러나 v5 릴리즈와 동시에 퍼포먼스와 번들 사이즈가 크게 향상되었다고 알려진다.
🔗 Sass vs Tailwind CSS vs Styled-components: A CSS methodology comparison
결론
각각의 장단점이 있는데다가 직접 사용한 경험이 없는 상태에서 최적의 선택을 하는 것은 불가능 하다고 판단되므로, 개인 프로젝트라면 고민에 너무 많은 시간을 들이지 말고 우선 하나라도 먼저 사용해보는 것이 좋겠다는 생각이 든다. 이후 내가 직접 느낀 장단점을 다시 정리해보는 것이 좋겠다.
