CSS-in-CSS / CSS-in-JS

Gorae·2022년 3월 16일

CSS

(TIL) HTML/CSS

목록 보기

3/3

공부 중이라 잘못된 정보가 있을 수 있습니다. 정정해주시면 감사드리겠습니다 🙏

Styled-Components 장단점을 정리하다가, CSS의 문제점부터 한번 다시 정리해보는 게 좋을 것 같아서 글을 쓴다 🌷

🤯 CSS의 문제점

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

이러한 문제점을 해결하려고 CSS-in-CSS, CSS-in-JS 방식이 등장

😃 CSS-in-CSS

CSS의 문제점을 해결하기 위해 등장한 CSS-in-CSS는 대표적으로 SASS(SCSS), CSS Modules 가 있다.

잠깐❗️ SASS 와 SCSS의 차이

대표적인 차이는, SASS는 들여쓰기 문법을 쓰고 SCSS는 중괄호 문법을 쓴다. 공식 페이지에서도 SCSS 문법을 기준으로 설명하고 있고, 개발자에게 더 친근한 문법이 SCSS 이므로 SCSS가 더 선호되는 것 같다. 때문에 아래에서는 SCSS로만 정리했다.

👍 SCSS 의 장점

동일한 네임 스페이스를 공유하는 속성들을 관리하기 용이해짐

.section {
  background-color: pink;
  .div {
  	.name {
      font-size: 20px;
    }
  }
}

변수 사용으로 중복 코드 관리가 용이해짐

$bg-color: blue;
$bg-img: "/assets/images/";

.box {
  background: $bg-color url($bg-img + "bg.jpg");
}

mixin 을 통해 스타일 재사용성을 높임

@mixin replace-text($image, $x: 50%, $y: 50%) {
  text-indent: -99999em;
  overflow: hidden;
  text-align: left;

  background: {
    image: $image;
    repeat: no-repeat;
    position: $x $y;
  }
}

.mail-icon {
  @include replace-text(url("/images/mail.svg"), 0);
}

& 키워드를 통해 상위 선택자 참조가 가능해짐

.list {
  li {
    &:last-child {
      margin-right: 0;
    }
  }
}

하지만 SCSS도 여전히 클래스 중복의 문제점을 해결해주진 못했고, 이를 해결할 수 있는 방법으로 CSS Modules 가 등장한다.

👍 CSS Modules 의 장점

중복 클래스명을 더 이상 신경쓰지 않아도 됨( 모든 CSS 선택자에 고유한 해시값을 부여함으로써 속성 중첩을 방지함 )
css, scss, sass 파일에 모두 사용 가능함

// App.jsx
// 아래와 같이 import 해서 사용
import styles from "./styles.module.css";

function App() {
	return (
		<div id={styles.container}>
			<button className={styles.button}>버튼</button>
		</div>
	);
}

export default App;

그러나 CSS Modules 도 다음과 같은 단점이 있다.

💩 CSS Modules 의 단점

중복 클래스를 써도 상관 없으니 클래스명을 성의없이 작성해도 동작한다
각 컴포넌트별로 css 파일을 생성하다 보니 프로젝트 규모가 커졌을 때 너무 많은 CSS 파일을 관리해야 한다

이로써 더 발전한 CSS-in-JS 방식이 등장한다. 대표적인 CSS-in-JS 라이브러리인 Styled-Components 의 장점은 다음과 같다.

😃 CSS-in-JS

👍 Styled-Components 의 장점

CSS를 컴포넌트 레벨로 추상화한다
js 환경을 최대한으로 활용 가능하다( JS와 CSS에서 상수, 함수를 공유한다 )

const Button = styled.a`
  background: transparent;
  color: white;

  ${props =>
    props.primary &&
    css`
      background: black;
      color: palevioletred;
    `}
`;

CSS 코드 경량화( BEM 등으로 클래스 명이 길어지더라도 자동으로 짧은 길이의 유니크한 클래스를 생성한다 )

Styled-Components 의 단점은 다음과 같다.

💩 Styled-Components 의 단점

러닝 커브(Learning curve)가 느리다
컴포넌트가 렌더링 될 때 CSS가 적용되기 때문에, FOUC 가 발생할 수 있다
( FOUC( Flash of unstyled content ) : 스타일 시트가 적용되기 전 마크업 된 그대로의 모습이 잠깐 보이는 현상 )
별도의 라이브러리 설치에 따라 번들 크기 증가, CSS-in-CSS에 비해 느린 속도