Pure 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 Module
CSS 모듈은 CSS를 모듈화 하여 사용하는 방식이다. CSS 클래스를 만들면 자동으로 고유한 클래스네임을 만들어서 scope를 지역적으로 제한한다. 모듈화된 CSS를 번들러로 불러오면 사용자가 정의했던 클래스네임과 고유한 클래스네임으로 이뤄진 객체가 반환된다.
👨💻 예시
Example.module.css
.Example {
display: flex;
color: red;
}Example.jsx
import styles from './Example.module.css';
function Example() {
return <div className={styles.Example}>Css 모듈 예제</div>;
}
export default Example;👍 동일 프로젝트 소스 안에 CSS 클래스 이름이 중복되어도 새로운 이름이 입혀져 Global namespace문제를 해결하고 중복 및 관리의 위험성이 적고 CSS 네이밍 규칙이 간소화 된다.
👎 한 곳에서 모든 것을 작성하지 않기 때문에 별도로 많은 CSS 파일을 만들어 관리해야 한다.
CSS 전처리기
자신만의 특별한 구문(Syntax)을 가지고 CSS를 생성하는 프로그램이다. CSS의 문제점을 프로그래밍 방식, 즉 변수·함수·상속 등 일반적인 프로그래밍 개념을 사용하여 보완한다. CSS 전처리기에는 다양한 모듈이 존재하는데 그 중에서도 Sass·Less·Stylus가 가장 많이 사용된다.
👨💻 Sass 예시
$dark-gray: #333;
.button {
&__top,
&__middle,
&__bottom {
background: $dark-gray;
position: absolute;
left: 0;
width: 100%;
}
}👍 공통 요소 또는 반복적인 항목을 변수 또는 함수로 대체할 수 있는 재사용성, 임의 함수 및 내장 함수로 인해 개발 시간과 비용 절약, 중첩·상속과 같은 요소로 인해 구조화된 코드 유지 및 관리에 용이하다.
👎 전처리기를 위한 도구가 필요하고 다시 컴파일하는데 시간이 소요된다.
CSS-in-JS
CSS-in-JS는 단어 그대로 자바스크립트 코드에서 CSS를 작성하는 방식을 말합니다. 2014년 페이스북 개발자인 Christopher Chedeau aka Vjeux가 처음 소개하였습니다.
👨💻 styled-components 예시
import styled from 'styled-components';
const Title = styled.h1`
font-size: 20px;
color: white;
`;
<Title>Styled-Components Example</Title>👨💻 Emotion 예시
import { css } from '@emotion/react';
import styled from '@emotion/styled';
const buttonStyle = (type) => {
return css`
background: ${colors[type]};
color: #fff;
border: 0 none;
padding: 8px;
margin: 5px;
border-radius: 3px;
`
}
function App() {
return (
<div className="App">
<button css={buttonStyle('default')}>DEFAULT</button>
<button css={buttonStyle('warning')}>DEFAULT</button>
<button css={buttonStyle('danger')}>DEFAULT</button>
</div>
);
}👍 CSS-in-JS는 JavaScript 환경을 최대한 활용하여 Javascript와 CSS 사이의 상수와 함수를 공유할 수 있고 현재 사용 중인 스타일만 DOM에 포함한다. 짧은 길이의 유니크 한 클래스를 자동으로 생성하므로 코드 경량화가 가능하다.
👎 러닝 커브, 새로운 의존성 발생, 별도의 라이브러리 설치에 따른 번들 크기 증대 및 CSS-in-CSS에 비해 느린 속도
Emotion
🤩 styled-components 와의 차이점
- css props 기능
- 인라인 스타일을 작성해도 클래스로 변환이 된다.
<div css={{color: 'red'}}/> // emotion의 css
<div style={{color: 'red'}}/> // 기존의 HTML 인라인 스타일👍 기존의 HTML 인라인 스타일은 스타일 우선순위를 다루기 어렵고 재활용도 힘들다. 하지만 emotion jsx에서 제공해주는 css 속성을 활용하면 이를 클래스로 변환해준다. 또한 기존 인라인으로 사용할 수 없었던 media query, pseudo selector, nested selector등을 사용할 수 있다.
- SSR
styled-components같은 경우 ServerStyleSheet를 설정 해야 하는 반면 emotion은 별도의 설정 없이 동작이 된다.
참고자료
https://dev.to/alexsergey/css-modules-vs-css-in-js-who-wins-3n25
