Styles

CSS-IN-CSS (Module, SASS)

Pure CSS 외 다른 스타일링 방법에 대하여

2023-02-02

본문에 들어가기에 앞서, Pure CSS의 근본적인 문제점 몇가지를 제시한다.

Global Namespace: 모든 스타일이 global에 선언되어 중복되지 않는 class 이름을 적용해야 하는 문제
Dependencies: css 간의 의존관계를 관리하기 힘든 문제
Dead Code Elimination: 기능 추가, 변경, 삭제 과정에서 불필요한 CSS를 제거하기 어려운 문제
Minification: 클래스 이름의 최소화 문제
Sharing Constants: JS 코드와 상태 값을 공유할 수 없는 문제
Non-deterministic Resolution: CSS 로드 순서에 따라 스타일 우선 순위가 달라지는 문제
Isolation: CSS와 JS가 분리된 탓에 상속에 따른 격리가 어려운 문제

위와 같은 근본적인 CSS 문제점에 해당하는 사항들이 몇가지 존재한다. 이는 최초의 CSS 경우 Web Site를 기반을 둔 시점에서 설계를 바탕으로 만들어진 코드들이지만, 현재 시대에 이르러서는 기존에 Web Site 뿐만이 아닌, WebApp Application 을 추새로 설계하기 때문에 근본적인 이유에서 비틀어지는 것이다.

그리고 CSS가 출시된 시점이 (1996년 12월) 현재와 아주 많은 시간이 지났기 때문에 그 당시에 만들어진 방향성과 흐름이 달라진 것은 너무 당연하고, 아주 많은 회사의 CSS 코드들이 래거시하게 대량으로 존재하기 떄문에 관리차원이 무척이나 어려움이 존재한다.

이것들의 이유를 바탕으로 최근 동향으로는 CSS-IN-CSS 혹은 CSS -IN-JS, SASS(SCSS) 등 과 같은 기술방법들이 추새를 이루고 있다. 여기서 서술할 내용들은, CSS-IN-CSS 와 SASS(SCSS)의 내용이다.

CSS-IN-CSS 란?

CSS-IN-CSS 란, 쉽게 말해 근본적인 CSS에 몇가지 방법을 더해 사용하는 방식을 말한다. 크게 3가지 방법으로 분류가 된다.

Pre-/Post-processors (CSS 전처리기)
CSS Frameworks
CSS Modules

첫 번째, Pre-/Post-processors 의 특징으로 CSS와는 다른 Syntax를 가지고 CSS를 다루는 기법이다. 변수, 함수, 상속 등 Javascript의 프로그래밍과 비슷한 방식으로 이 개념을 활용하여 좀 더 자유도 높은 CSS를 사용할 수 있게 한다. 해당 기법을 가장 많이 쓰이고 있는 것이, Less 또는 Stylus, SASS(SCSS) 이다.

두 번째, CSS Frameworks 의 특징으로 말 그대로 미리 정의된 규칙과 클래스 네이밍으로만 코드를 설계하며 규칙에대한 Learning Curve 가 존재하지만, 규칙과 공식문서 Docs 를 이용하여 원하는 방향의 코드를 설계할 수 있다. 대표적으로 Tailwind CSS, Bootstrap 등이 있다.

세 번째, CSS Modules 의 특징으로 가장 흔히 사용되는 기법으로 Pure CSS를 기존과 코드 설계를 하면서, 리소스가 자동적으로 고유한 클래스 네임을 생성하여 scope를 지역적으로 제한 한다. 사용방법은 파일명과 확장자 사이에 module를 명시해주면 된다. 예) 파일명 : style.module.css 또한 web pack과 모듈 번들러를 사용한다면 설정 CSS 스타일 로더(loader)를 이용하여 Modules의 기능으로 활용할 수 있다.

실제 업무에 활용된 예시

해당 이슈들은 근본적으로 Code State 관리를 얼마나 더 효율적으로 할 것인지, Legacy Code들에 대한 Code Refactoring 또는 중복성 제거 등에 대한 “체계적 관리” 에 해당한다고 볼 수 있다.

그래서 이런 이슈들을 바탕으로 CSS-IN-CSS는 아니지만, CSS :root라는 가상선택자를 활용하여 실제 업무 코드내에서 중복성을 최소화 하기 위해, 스마트케어 내부에 있는 전체 CSS에 파일들 중 흩어져 있던 색상코드들을 모두 통일하는 작업을 진행했다.

또한 실제 스마트케어 내부에 WebPack에는 설정 > Loader 부분에 CSS-IN-CSS를 활용하는 설정부분이 되어있으며 기존부터 실제로 사용을 하고 있다.

아래는:root에 관련된 이야기를 서술하며, 다음으로 Loader 세팅과 실제 사용된 예시를 작성 한다.

1. CSS :ROOT 적용

기존 작업방식은, 아래와 같이 중복되는 색상 코드들에 대한 특정 수정이 필요로 할때 필요한 부분들에 대해서 하나 하나씩 직접 수정하였다. 이러한 작업에 단점으로는 굉장히 비효율적이며 담당자가 직접 코드를 수공업의 형태로 수정하기 때문에 정확성도 떨어질 염려가 있다. 이런 작업방식을 개선하고자 CSS에 ROOT라는 전역변수를 적용시켜서, 하나의 코드만 수정하면 전체 영역이 모두 동일하게 수정이 되는 방식을 구축하였다.

해당 프로세스의 구축방법은 다음과 같다. 첫 번째로, App.jsx 최상위에 접근파일에 내가 만든 root.css 파일을 import 해준 뒤 root.css 안에 CSS:ROOT 표기방법으로 해당 색상의 대한 변수 네이밍을 지어주고 해당 코드들에 맞게 작성한다. 그리고 모든 CSS에 작성된 색상코드들을 내가 만든 변수 네이밍으로 알맞게 교체해주면 끝이다. 그래서, 현재는 스마트케어 내부 CSS 리소스 전체를 root.css의 변수네이밍으로 모두 바꾼 상태이다.

2. Web Pack CSS-Loader 적용

현재 스마트케어 내부의 리소스 중, webpack 번들러를 사용 중이다. 실제로 webpack.config 와 webpack.prod.config 두가지 파일을 나누어서 가용 중인데, prod는 운영 외 하나는 개발서버를 번들러로 이용중이다. 리소스를 확인하다보면 하단의 이미지처럼, include 와 exclude 에 node_modules 내용이 작성되어있는걸 확인 할 수 있다. 이것들이 일반 Pure CSS를 CSS-IN-CSS 로 번들링해주는 설정인데, 이미지에 적힌 첫 번째와 두 번째 글들은 해석하면 다음과 같다.

첫 번째 .css로 끝나는 파일에 규칙을 적용한다. node_modules 폴더와 .custom.css 으로 끝나는 파일 포함하며, css module 설정을 하지 않는다.
두 번째 .css로 끝나는 파일에 규칙을 적용한다. node_modules 폴더와 .custom.css 으로 끝나는 파일 제외하며, css module 설정을 한다.

쉽게 말해, 위와 아래는 if문의 true, false (참, 거짓) 과 같은 형태로 입력 되어있다. 이렇게 webpack 설정만으로도 일반 css를 작성하게 되면 번들러가 CSS-IN-CSS로 자동 설정 해 주기 때문에 굉장히 편하게 사용할 수 있다.

학습하며 느꼈던 점과 회고

🌟 작년까지만 해도 Pure CSS에 대한 작업방식을 고수해 왔다. 하지만 styled-components, SCSS, CSS-IN-JS 등 여러가지 추새에 따른 학습은 꾸준히 해왔었다. 실제로 이렇게 작업한 경우는 이번이 처음이며 알고보니 쉽고 오히려 Pure CSS 보다 더 효율적이고 변수나 함수, 상속 등 과 같은 프로그래밍에 대한 개념들이 CSS에도 적용된다는 것에 놀라웠다. 현재 프론트앤드 개발자분들과 협업과정에서 CSS-IN-JS를 서서히 변경하자는 코드리뷰를 진행하는 중이다. 기존에 있던 래거시하던 코드들은, 그대로 두고 새로 시작하는 개발 건에 대하여 흐름을 타고, 안정화가 되었을 때 기존 래거시 코드들도 변경할 계획이다. 이러한 기법들은 Javascript를 기본적으로 알고있는 퍼블리셔라면 이런 유효한 CSS 기법들이 더 도움이 된다고 생각되었다. 올해부터 더 효율적인 코드 관리를 위해 CSS-IN-CSS 에서 SCSS 또는 더 나아가 CSS-IN-JS 형태로 서서히 바꿔나갈 계획이다.

참고했던 사이트 및 URL