CSS-in-js vs CSS-in-CSS

CSS-in-js -> Styled Components

Styled Components는 CSS-in-JS 스타일링을 위한 프레임워크입니다. 자바스크립트의 태그가 지정된 템플릿 리터럴과 CSS의 기능을 사용하여 구성 요소에 반응하는 스타일을 제공합니다.

장점은 다음과 같습니다.

• CSS 모델을 문서 레벨이 아닌 컴포넌트 레벨로 추상화하는 모듈성
• CSS-in-JS는 JavaScript 환경을 최대한 활용
• 자바스크립트와 CSS 사이의 상수와 함수를 공유
• 현재 사용 중인 스타일만 DOM에 포함
• 짧은 길이의 유니크 한 클래스를 자동으로 생성하는 코드 경량화
  단점으로는
• 러닝 커브(Learning Curve),
• 새로운 의존성 발생,
• 별도의 라이브러리 설치에 따른 번들 크기 증대 및 CSS-in-CSS에 비해 느린 속도 등을 들 수 있습니다.
• Styled Components는 스타일링을 위한 코드 사용량이 줄어들고 CSS 문법에 친화적입니다.

css파일을 따로 만들필요가 없고, Jsv파일에서 스타일디자인이 가능하다. 클래스명 고민할 필요없다.
리엑트네이티브앱으로 바로 공유 가능하다.

CSS-in-CSS -> Sass

자신만의 특별한 구문(Syntax)을 가지고 CSS를 생성하는 프로그램입니다. CSS의 문제점을 프로그래밍 방식, 즉 변수·함수·상속 등 일반적인 프로그래밍 개념을 사용하여 보완합니다. CSS 전처리기에는 다양한 모듈이 존재하는데 그 중에서도 Sass·Less·Stylus가 가장 많이 사용됩니다.

CSS 전처리기는 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체할 수 있는 재사용성, 임의 함수 및 내장 함수로 인해 개발 시간과 비용 절약, 중첩·상속과 같은 요소로 인해 구조화된 코드 유지 및 관리 용이 등의 장점이 있습니다. 반면 전처리기를 위한 도구가 필요하고 다시 컴파일하는데 시간이 소요된다는 단점도 존재합니다.

요즘은 워낙에 CSS-in-JS가 유행하다

하지만, CSS-in-CSS와 CSS-in-JS 중 어떤 방식이 더 낫다고 쉽게 말할 수는 없습니다.

용도에 맞게 선택하는 것이 중요했는데, css-in-css는 인터랙션이나 속도가 중요한 웹사이트에 사용하는 것이 적절하다고 알고있습니다. 우리 사이트 단순한 정보 전달의 목적이 아닌 많은 유저가 소통하는 공간이기에 인터렉션이나 속도가 중요한 웹사이트라고 생각했습니다.

또한 스타일트 컴퍼넌트는 first 프로젝트에서 사용을 해봤기때문에 파이널에서는 scss를 사용해봤습니다.

한 가지 방식만 사용하지 말고, 추후 회사에서 사용하는, 또는 자신의 코딩 습관에 따라 적절히 조화를 이루며 코딩을 해야된다 생각하기 때문에 다양한 디자인 모듈을 사용해 보는 것이 중요