CSS IN CSS

개발 친화적이진 않지만 필자가 가장 추천하는 방식은 CSSinCSS방식으로 스타일을 구성하는 것입니다. 가장 큰 장점은 CSSinJS와 달리 JS코드를 CSS로 변환하는 과정이 없기 때문에 속도에서 아주 유리합니다. 때문에 사용자 친화적이고 다양한 인터렉티브 스타일이 있을 경우 고려 해볼만 합니다. 본 포스팅은 CSS를 기본적으로 알고 있다는 가정하에 진행됩니다.

🔥 CSSInCSS에는 CSS와 CSS전처리기가 존재합니다.

CSS Module

import React from "react";
import styles from "../styles/global.module.css";
import homeStyle from "../styles/Home.module.css";

export default function Home() {
  return (
    <div className={styles.container}>
      <div className={homeStyle.button}></div>
    </div>
  );
}

CSS를 모듈화 하여 사용하는 방식입니다. CSS문법을 그대로 사용해서 러닝커브가 없으며, CSS 클래스를 만들면 고유한 CSS 클레스 네임을 만들어 SCOPE를 지역적으로 관리 할 수 있는 장점이 있습니다. 다만 모든 CSS코드를 한 파일에 작성하면 이러한 장점이 희석됌으로 여러 파일을 만들어 관리해야 한다는 불편함이 있습니다.

CSS 전처리기

SASS는 CSS 전처리기 중 하나입니다. CSS 그 자체의 문법에서 항상 문제로 제기 되었던 점은 코드의 중복사용 입니다. 다음과 같은 상황이죠

.sc_themecast .main_category .tab.id_show[aria-selected=true] {background-color: #adac0f; color: #fff}
.sc_themecast.id_culture .theme_category, .sc_themecast.id_culture .theme_hl {color: #42be6f}
.sc_themecast.id_culture .topstory_view .topstory_writer, .sc_themecast.id_culture .topstory_view.type_ad .topstory_info, .sc_themecast.id_culture .topstory_view.type_star .topstory_info { background-color: #edfaf2 }
.sc_themecast.id_culture .theme_badge {background-color: #42be6f}
.sc_themecast .theme_link .link_culture {float: left;color: #42be6f;padding: 5px 0 4px;margin-right: 16px}
.sc_themecast .main_category .tab.id_culture:hover {color: #42be6f}
.sc_themecast .main_category .tab.id_culture[aria-selected=true] {background-color: #42be6f;color: #fff}
.sc_themecast.id_school .theme_category, .sc_themecast .theme_category {overflow: hidden;text-overflow: ellipsis;white-space: nowrap;display: block;font-weight: 700}
.sc_themecast .theme_runtime {position: absolute;right: 8px;bottom: 6px;padding: 2px 4px;-webkit-border-radius: 2px;border-radius: 2px;font-size: 11px;line-height: 14px;color: #fff}
.sc_themecast .theme_runtime .runtime_bg {position: absolute;top: 0;left: 0;right: 0;bottom: 0;opacity: .7;filter: alpha(opacity=70);background-color: #000;-webkit-border-radius: 2px;border-radius: 2px;color: transparent}

CSS 전처리기를 사용하면 우리가 일반적으로 사용하는 C, JS문법으로 연산이 가능해집니다.
연산이 가능하다는 이야기는 코드의 중복을 줄일 수 있다는 말과 같지요.

자주 쓰는 CSS 전처리기는 위와 같습니다. 상황에 맞는 CSS전처리기를 선택하여 사용하면 됩니다.
대신 CSS모듈이나 바닐라CSS와 달리 전처리과정이 필요하기 때문에 성능면에선 상대적으로 떨어집니다.

CSS IN JS

CSSInJS는 문구가 뜻하는 그대로, JS안에 CSS를 작성하는 것을 의미합니다.
가장 큰 장점은 개발에서의 유지보수, 가독성이 있겠습니다. 스타일이 필요한 컴포넌트가 존재하는 파일에 해당 스타일을 정의할 때가 많고 그렇지 않다고 해도 찾아가기가 쉬우니깐요.

참고로 Inline방식으로 style을 넣거나 jsx styled을 사용하는 것도 CSSInJS기법입니다.

function HiThere() {
  
  return (
    <>
      //inline
    <p style={{ color: 'red' }}>hi there</p>
      
      //styled-jsx
      <style jsx>{`
        p {
          color: blue;
        }
        div {
          background: red;
        }
        @media (max-width: 600px) {
          div {
            background: blue;
          }
        }
      `}</style>
      <style global jsx>{`
        body {
          background: black;
        }
      `}</style>
     </>)
}

export default HiThere

외부 라이브러리

CSSInJS라이브러리로 가장 많이 쓰이는 두가지 입니다.
필자는 Styled-Components를 씁니다.

🔥 global적으로 쓰이는 스타일 (버튼형태, 박스형태)는 CSSInCSS,
🔥개별적 커스텀이 필요한 요소는 CSSInJS를 사용한다면
속도와 편의성 그 중간을 잡을 수 있을겁니다.