[CSS] (SASS | Styeld-Components) 차이와 장단점

 

 

CSS

 

CSS is the language we use to style an HTML document.

w3 school에서 발췌한 내용에 따르면, CSS는 HTML 문서에 스타일을 줄 수 있다고 한다. HTML로 작성된 문서가 실제로 웹사이트에 표현되는 방법을 정해주는 스타일시트 언어이다. 

CSS의 장점은 작성이 쉽다는 것이다. HTML태그에 class를 부여하고 CSS파일에서 class를 집어 스타일코드를 작성하면 된다. 그러나 요소가 많아지고 코드가 늘어나게 되면 유지보수에 어려움이 생긴다. 코드를 해석하는 데에 많은 시간을 들뿐 아니라, 상속에 개념 또한 복잡해진다.

 

 

SASS(SCSS)

 

 

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.

문법적으로 어썸한 스타일시트 Syntactically Awesome Style Sheets Sass이다. CSS의 단점을 보완하기 위해 만든 CSS 전처리기이다. Sass의 특징은 CSS코드를 네 스팅 할 수 있다는 것이다. 계층적으로 상속되는 CSS를 유지보수하기 쉽도록 상위 그룹으로 묶을 수 있다.

Sass와 SCSS는 비슷한듯 조금 다르다. 작성하는 문법에 차이가 존재한다.

Sass는 CSS보다 유지보수면에 용이한 편이지만, class를 지정하는 것에서 className으로 지정하는 것으로 바뀌는 것뿐이기에 여전히 class명을 지어내는 것에 약간의 스트레스가 존재한다. 스타일링 파일이 따로 필요하고 이를 CSS-in-CSS라고 한다. 이러한 방식은 속도가 빠른 대신에 별도의 파일을 만들어 관리해야 하기 때문에 재사용성이 떨어진다는 단점이 있다.

 

 

Styled-Components

 

 

styled-components is the result of wondering how we could enhance CSS for styling React component systems.

styled-components는 Javascript 파일 내에 작성할 수 있다는 장점이 있다. Sass처럼 className을 부여할 필요가 없고 이를 CSS-in-JS라고 한다. styled-components의 가장 큰 장점은 기존의 작성되는 컴포넌트에 따라서 재사용성을 활용할 수 있다는 점이다. 

그러나 styled-components에서 스타일정보가 많아지면 JS파일이 방대해져 성능저하가 일어날 수 있다. 동적인 이벤트나 인터렉티브한 작업이 많아질수록 그만큼 속도가 느려지게 된다.

 

 

결론

 

 

웹 어플리케이션의 성능에 초점을 맞춘다면 CSS-in-CSS를 고려해야 한다. 개발생산성에 초점을 맞춘다면 CSS-in-JS를 사용하는 것이 보편적으로 좋다. 본인이 사용하는 목적에 따라서 선택하면 된다.

웹 어플리케이션이 가볍거나 인터렉티브한 이벤트가 많이 없다면 어떤 방식을 선택해도 큰 무리가 없다. 그러나 서비스의 규모가 커지거나 인터렉티브한 동작이 많아질 것으로 예상되면 CSS Modules와 같은 CSS-in-CSS 방식으로 접근해 볼 수 있다.