본문 바로가기
css

Vanilla Extract란

by 왜안돼요 2024. 5. 7.
728x90

 

vailla-extract는 제로 런타임 타입스크립트 스타일 시트임.

 

✅ Runtime CSS in Js의 문제

CSS in JS 장점

  • css에서 js문법을 사용할 수 있어서 생산성이 높아짐.
  • 컴포넌트 파일에 관련된 코드들을 함께 둘 수 있다
    • 기존에는 Js와 css를 따로 분리해야했음
  • className에서 사용되는 스타일들은 런타임에 서로 다른 클래스 이름으로 자동 난독화를 함.
    그래서 다른 스타일 시트에서 작성한 클래스 이름과 충돌하지 않음.
    단점은 className에 넣는 값들이 string 타입이라 컴파일 타임에서 오타에의한 에러를 잡아내기 힘들고 파일과 스타일 코드가 많아지면 개발 효율이 급격히 낮아짐.

CSS in JS 단점

CSS in JS는 CSS에도 자바스크립트 문법을 사용할 수 있다. 하지만!!!

런타임 CSS in Js는 성능을 저하 시킬수 있음. 런타임 CSS in JS는 런타임에 Js파일이 실행되면서 style을 생성한다. style 생성의 규모가 크고 빈번할 수록 성능이 저하될 수 있음.

 

Vanilla-extract 

RunTime CSS in JS의 문제점을 해결하기 위해 zero-runtime CSS in JS가 등장함! 그중에 하나가 vanilla-extract임.

Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.

 

Zero-runtime

zero-runtime은 vanilla-exract에서 강조하는 주요 특징임!

타입스크립트 방식의 vailla-exract로 쓴 코드는 자바스크립트 번들 사이즈에 영향을 주지 않는다.
브라우저에서 번들 결과를 남기는 것이 아니라 편집하는 동안 코드를 실행하는것임.

 

특징

  • 빌드타임에 ts파일을 css 파일로 만든다.
  • type-safe하게 theme를 다룰 수 있다.
  • 프론트엔드 프레임워크에 구애받지 않는다.
  • Tailwind처럼 Atomic Css를 구성할 수 있다.
  • Sttiches 처럼 variant 기반 스타일링을 구성할 수 있다.

 

스타일 만들기

제일 기본적인 스타일

css

import { style } from "@vanilla-extract/css";

export const container = style({
  backgroundImage: 'url("/images/background.png")',
  backgroundSize: "cover",
  width: "100%",
  height: "100vh",
  display: "flex",
  justifyContent: "center",
  alignItems: "center",
});

 

 

 <div className={container}>

 

container는 빌드타임에  Login_container__gfbmxl0이라는 className으로 변경되어 사용된다.

 

더 상세한 설명은

 

Vanilla Extract란 무엇인가

기존의 Runtime CSS in JS는 어떤 문제가 있었고 Vanilla Extract가 어떻게 해결했는지, 어떻게 사용하는지에 대해서 알아봅니다.

velog.io

이분이 정리를 잘해주셧다.

 

급하게 쓰다보니 공통되는 스타일도 많고 이름도 많이 겹쳤지만

이름이 겹쳐도 빌드타임에서 알아서 위와 같은 식으로 변경되어 사용되기 떄문에

스타일이 겹칠일은 없어서 좋았고

커맨드 누르고 클래스 네임 누르면 바로 스타일을 찾을 수 있어서 수정할때 편했다.

 

 

'css' 카테고리의 다른 글

css 기본 (3-4회차)  (2) 2023.12.11

최근댓글

최근글

skin by © 2024 ttuttak