안녕하세요. O612 입니다.

CSS & CSS-JS & CSS Pre-processor(CSS 전처리기)를 비교할 내용이 많은 관계로 시리즈로 기획하게 되었습니다. 이번 편은 소개입니다.

CSS-in-JS

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

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

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

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

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 }

이렇게 컴파일 됩니다.

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

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

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

(O씨, 지구, 06월 12일생) 세상에서 글 쓰는 게 제일 어려웠어요...

O612님의 창작활동을 응원하고 싶으세요?