CSS, CSS-in-JS 그리고 CSS Pre-processor의 비교

emotion, styled-components 그리고 Sass, CSS의 비교

2021.10.12수정

featured image thumbnail for post CSS, CSS-in-JS 그리고 CSS Pre-processor의 비교

Prologue

마크업(Mark-up; HTML)을 Styling하는 가장 고전적이고 흔히 사용하는 방법이 CSS 입니다.

CSS는 3가지 방법으로 작성할 수 있습니다.

style 태그를 사용하는 방법, 태그(Element) 안에 style 속성(Property)을 사용하는 방법, 마지막으로 .css 확장자를 사용하는 파일을 사용해 작성하는 방법.

CSS의 단점은 Class 이름이 중복되게 네이밍을 지을 위험성이 있고 JavaScript와 연동이 어렵다는 점입니다.

CSS-in-JS는 JavaScript 언어로 CSS를 코딩하는 것을 말합니다.

“CSS-in-JS”는 외부의 파일에 CSS를 정의하는 대신에 JavaScript와 결합하는 패턴을 의미합니다.

( 출처: reactjs.org )

CSS Pre-processor 즉, CSS 전처리기 종류에는 Scss(SCSS/SASS), Stylus 등이 있는데 가장 많이 사용되고 있는 것은 SCSS 이며 그 뒤를 SASS, Stylus가 따라가고 있습니다. (한국 기준이며, 해외에서는 Stylus가 많이 쓰임)

CSS-in-JS를 사용하거나 CSS 전처리기 및 CSS의 Module형으로 사용시 CSS의 단점들을 보완할 수 있습니다.

따라와~ 왜 안와~

CSS-in-JS

const Name = styled.cite({
  fontSize: '1rem',
  fontWeight: '500',
  fontStyle: 'normal',
});

function App() {
  return <Name>홍길동</Name>;
}

export default App;

위 예제는 emotion의 styled로 작성한 코드입니다. 기존 CSS로 style을 작성하는 것과 많이 다르죠.

emotion의 styled는 react의 inline style과 비슷합니다. property는 camelCase, value는 따옴표로 감싸서 사용합니다. 마지막은 ','(콤마)를 사용합니다. (value에 숫자만 존재한다면 따옴표 생략이 가능하지만 font weight의 value는 실제로는 numberic이 아니기 때문에 font weight에서 만큼은 따옴표를 생략하면 안됨)

CSS-in-JS는 emotion 말고도 styled-components가 있는데 styled-components는 형식이 CSS 작성법과 매우 유사합니다.

const Name = styled.cite`
  font-size: 1rem;
  font-weight: 500;
  font-style: normal;
`;

function App() {
  return <Name>홍길동</Name>;
}

export default App;

emotion은 애초에 JavaScript 문법을 따르기 때문에 style의 property, value에 문법 오류가 발생하면 자동으로 체크합니다.

CSS Pre-processor

SCSS는 문법이 기존 CSS와 매우 유사합니다. SASS는 끝의 ';'(세미콜론) 그리고 '{', '}'(중괄호)로 감싸는 것이 생략된 버전이고 Stylus는 여기서 property와 value 사이의 ':'(콜론) 까지 생략된 버전입니다. 셀렉터와 셀렉터 사이의 ','(콤마) 까지도 생략 가능하죠. (단, 줄바꿈 시에만)

cite.name
  font-size: 1rem
  font-weight: 500
  font-style: normal

SASS 예제입니다. '{', '}'(중괄호), ';'(세미콜론)이 생략된 것을 볼 수 있습니다. 그런데 '생략 가능'이 아니라 강제 사항입니다. 오히려 기존 방식으로 작성하면 구문 오류입니다. 들여쓰기는 2 spaces 입니다.

cite.name
  font-size 1rem
  font-weight 500
  font-style normal

위는 Stylus 예제입니다. '{', '}'(중괄호), ';'(세미콜론) 생략에 이어 ':'(콜론)도 생략되었습니다. (':' 생략은 선택 사항입니다)

cite
i
  font-style normal

위의 Stylus 코드를 CSS로 컴파일하면

cite,
i {
  font-style: normal;
}

이와 같이 컴파일됩니다.

Sass는 ','(콤마) 생략이 안되기 때문에,

cite
i
  font-style: normal

위와 같이 작성하면

cite {
}
i {
  font-style: normal;
}

이렇게 컴파일 됩니다.

너무 길어서 근손실 올 기세

Epilogue

간략하게 셋을 비교해봤는데 어떠신가요? 이해하기 어렵지 않았을거라고 생각해요.

여기까지는 찍먹 수준이었으니까요.

다음편에서는 CSS와 CSS module(*.module.css)를 비교할 예정입니다. 다음 편 관많부 관많부! : )

FIN!