CSS
CSS(Cascading Style Sheets)에 대해서는 다들 어느 정도 알거라 생각된다.
CSS-in-CSS 와 CSS-in-JS에 알아보기 전에 왜 CSS를 사용하다가 CSS-in-CSS와 CSS-in-JS가 등장했는지에 대해 알아보자.
CSS는 지금까지 사용하면서 명확한 단점이 존재했었다.
- 모듈화가 어렵다.
- 클래스 이름의 최소화 문제 (방법론을 사용하면 어느 정도 해소는 되겠으나 완전한 해결은 아닌 듯하다.)
- CSS의 우선순위를 파악하기 어렵다.
뭐 그 외에도 여러 단점들이 존재하겠지만 당장 생각나는 건 이 정도이다.
그래도 요즘 CSS 같은 경우 매우 많은 업데이트를 해왔기 때문에 변수 사용, 중첩(nesting) 사용 등 많이 편리해지거나 편리해질 예정이라는 점에는 부정할 수 없다.
아마 새롭게 추가되거나 변경된 부분이 매우 많을 것으로 보이는데, 나중에 시간 내서 한번 찾아보는 것을 추천한다.
(나 역시 잘 모르기 때문에 나중에 패치노트 같은 거라도 있나 찾아볼까 한다.)
CSS-in-CSS
CSS-in-CSS 가 도대체 무엇을 의미하는가에 대한 정확한 정의를 찾을 수가 없었다.
많은 글들이 CSS-in-CSS vs CSS-in-JS라고 적어 놨기 때문에 그냥 그러한 내용들을 보고 그렇구나 하고 넘어갈 뿐이다.
영어로 된 글들을 살펴보면 CSS vs CSS-in-JS라는 식의 글이 많기 때문에,
추측을 해보자면 일반적인 CSS 방법보다는 CSS를 하는데 도움을 주는 것들과 CSS-in-JS가 아닌 것들의 합인 것 같다.
물론 개인적인 의견일 뿐이지만 CSS-in-CSS를 이렇게 나눌 수 있다고 생각된다.
- Pre-/Post-processors (CSS 전처리기)
- CSS Frameworks
- CSS Modules
Pre-/Post-processors
흔히들 알고 있는 CSS 전처리기를 의미한다. (몰랐는데 후처리기도 있나 보다.)
자신만의 특별한 구문(Syntax)을 가지고 CSS를 생성하는 프로그램이라고 생각하면 된다.
CSS가 변수와 중첩을 제공하기 이전부터, 이 전처리기를 통해 변수, 함수, 상속 등 일반적인 프로그래밍 개념을 사용하여 CSS를 사용함에 있어 좀 더 자유도를 제공하였다.
CSS 전처리기는 이러한 특징들을 가지고 있기 때문에 재사용성, 개발 시간과 비용 절약, 구조화된 코드 유지 및 관리 용이 등의 장점을 가지고 있으나 전처리기를 위한 도구가 필요하다는 단점이 있다.
위 그림은 그 유명한 CSS 비교 사이트에서 가져온 것인데, 여전히 Sass/SCSS, Less, PostCSS, Stylus를 많이 사용하는 것 같다.
CSS Frameworks
CSS Frameworks는 Bootstrap이나 Tailwind CSS에 대해 한번쯤은 들어봤으리라 생각되는데,
그런 것들을 포함한 게 CSS Frameworks다.
이 같은 CSS 프레임워크의 경우 보통 미리 정의된 클래스로 클래스 네이밍에 고민할 필요가 없다.
그 외에도 다른 CSS 방식들과 비슷한 이유로 사용하고는 한다.
하지만 역시 CSS 프레임워크의 종류가 다양하다 보니 각각의 장단점이 있을 테니 사용할 때 한번 고민할 필요는 있다.
CSS Module
styled-components와 더불어 가장 많이 언급되는 게 아닌가 싶은 CSS Module이다.
CSS Moudle은 말 그대로 CSS를 모듈화 하여 사용하는 방식이다.
CSS 모듈 안에서 클래스를 만들면 자동으로 고유한 클래스 네임을 만들어서 scope를 지역적으로 제한한다.
사용법은 매우 간단하다.
Cat.module.css 방식으로 파일명과 확장자 사이에 module을 명시해 주기만 하면 된다.
CSS 모듈의 장점은 당연하게도 클래스 네임이 고유하기 때문에 크게 고민할 필요가 없다는 점이고, 이 장점으로 인해 Global namespace 문제 등 다양한 문제가 해결된다.
그러나 역시 각각의 고유 CSS Module 파일을 만들어서 사용해야 하기 때문에 파일이 굉장히 많아지는 단점이 존재한다.
CSS-in-JS
CSS-in-JS는 아무래도 요즘 React를 많이 사용하다 보니 가장 핫한 주제가 아닐까 싶다.
CSS-in-JS를 말하면 보통 Styled Components를 의미한다고 생각하면 된다.
이는 말 그대로 자바스크립트를 통해 CSS를 제어하는 것인데,
장점으로는 아무래도 자바스크립트이다 보니 가질 수 있는 다양한 장점들이 존재한다.
- 독립적이다.
- JS와 상태를 공유할 수 있다.
- CSS 우선순위 이슈 해결
- 클래스 이름 최소화
- 미사용 코드 검출 용이
그리고 가장 큰 단점은 아무래도 성능이다. CSS가 아니라 JS를 통해 불러오기 때문에 성능상 CSS보다 매우 떨어지기 마련이다. 그리고 번들의 크기 역시 성능에 영향을 준다.
아무래도 이러한 단점을 가지고 있어도 장점이 많기 때문에 사용하는 게 아닌가 싶다.
CSS vs CSS-in-JS 정리
결국 결론이 무엇이냐?
둘을 비교하기 위해서 이 게시글을 정리한 것인데, 각각의 특징들을 정리하다 보니 내용이 길어졌다.
각각의 특징들에 대해서는 위 글을 통해 대략적으로 알 수 있었는데,
사실 둘 중에 뭐가 더 좋다!라고 말하기는 애매하고, 여기서는 개인적인 선호도 측면에서 선택은 할 수 있다.
일단 개발 효율성 위주의 프로젝트라면 CSS-in-JS를 고려하는 것이 좋으나, 사용자 편의에 방점을 둔 인터렉티브 한 웹 프로젝트라면 CSS-in-CSS를 사용하는 것이 좋다고 생각된다. (정적과 동적을 고려하는 것도 좋은 방법일 듯)
CSS-in-JS는 알다시피 자바스크립트 해석과정을 통해 생성되기 때문에 CSS보다 성능 역시 떨어지고 원형의 모습이 잠깐 노출되는 단점이 있는데, 사실 요즘같이 인터렉티브 한 웹 페이지를 구성하는 경우가 많을 때 이러한 단점은 매우 큰 단점이라 생각된다.
그래서 개인적으로는 CSS-in-CSS를 선호한다.
뭐 js에서 css를 관리한다는 것도 마음에 안 드는 것도 사실이지만 요즘 CSS-in-JS가 핫하긴 하니까 (React 때문에...) 알아둬서 나쁠 건 없다고 생각된다 자기가 좋아하는 것만 할 순 없으니
참고: https://velog.io/@deli-ght/CSS-in-JS-CSS-in-CSS
CSS-in-JS & CSS-in-CSS
CSS 속성을 주기위해 어떤 걸 사용해야 효과적일까?
velog.io
에스코어
에스코어는 디지털 혁신을 위한 고급 프로페셔널 서비스를 제공합니다. 매니지먼트 컨설팅과 소프트웨어 테크놀로지 서비스 오퍼링을 살펴보세요.
s-core.co.kr
댓글