CSS
Cascading style Sheet: 웹의 디자인을 담당함
js파일에 css파일을 import해서 사용한다.
특징: 직접 class,ID네이밍하며 작성한다. 사용법이 간단하다. 하지만 요소들이 많이질수록 관리가 힘들어지고 직관성이 떨어진다.
SCSS
SASS: Syntactically Awesome StyleSheets:문법적으로 어썸한 스타일시트!'
CSS를 컴파일해주는 스타일시트 언어이다. SASS는 변수를 사용할 수 있게 해주고 중첩규칙,mixins,함수 등 이런 모든 것들을 CSS와 같이 사용할 수 있게 해준다.
SASS 버전3에서 나온 SCSS문법은 SASS 문법과는 달리 기존 CSS문법과의 호환성을 지키면서 sass기능까지 활용할 수 있다.
특징: 변수나 함수, 조건문 반복문같은 프로그래밍적인 요소로 css를 컨트롤할 수 있어서 css요소들을 관리하기 쉽고 가독성이 좋다.
🌼 추가: SCSS를 CSS pre-processor(전 처리기)라고도 한다. SCSS 자체로 브라우저에 적용하는 것이 아니라 CSS를 확장해서 쉽고 편리하게 쓰기 위해 쓰는 스크립팅 언어이기 때문이다. 즉, SCSS로 작성한 코드는 컴파일을 해서 일반 CSS의 문법으로 바꾼 뒤 적용한다는 뜻이다.
Styled-Components
스타일 요소들의 컴포넌트화!
특징: 스타일을 컴포넌트화(props사용가능)해서 관리하기에 js,css따로 관리하지 않고 더욱 더 직관적으로 관리 가능. 문법이 scss와 유사하다.
🙋♀️ SCSS와 Styled-component 차이 비교
1. 클래스명
SCSS의 경우 구조에 있어 디버깅이 용이해졌지만 여전히 클래스명에 대한 고민이 존재한다. 반면 styled-component는 클래스명에 대해 고민하는 문제를 덜어준다.
2.js파일과 분리?
Scss는 js파일과는 분리되어있는 구조이다. 그렇기에 어떤 컴포넌트의 상태값이 변하더라도 이에 반응하기 어렵다.반면 styled-component는 css in js 방식이기에 컴포넌트가 렌더링될때에만 해당 스타일의 정보를 읽는다. 이 부분이 장점처럼 보일 수 있지만 그 컴포넌트가 렌더링될때마다 스타일정보를 가져와야한다.
인터랙션이나 속도가 중요한 웹사이트라면 CSS in JS보다는 CSS in CSS방식이 바람직하다. 반대로 정적인 사이트라면 CSS in JS를 사용하는 것이 더 낫다. 사용자가 많지 않고 속도가 그렇게 중요한 요소가 아니기에 개발 효율성이 더 초점을 맞출 수 있다.
