8/31 - CSS Module로 전환

CSS Module 사용으로 전환

vanilla extract이 렌더링 시 적용되지 않는 문제 · Issue #7 · 1004ljy980/CharFlyer (github.com)

vanilla extract이 렌더링 시 적용되지 않는 문제 · Issue #7 · 1004ljy980/CharFlyer

CSS 스타일을 어떤 방식으로 할지 고민이 참 많았다.

저번 프로젝트때 CSS Module 방식을 사용했었는데, 변수 사용이 깔끔하지는 않아서 CSS-in-JS로 스크립트 파일 내에 변수를 정리하고 사용해보고 싶었다.

 

그런데 아무래도 Next.js의 SSR 환경 특성상 CSS-in-JS는 그닥 알맞은 환경은 아니었다.

https://nextjs.org/docs/app/building-your-application/styling/css-in-js

Styling: CSS-in-JS | Next.js

Next.js 13의 App Routing에 따른 공식문서에 따르면,

CSS-in-JS는 현재는 Client Component에만 제공 될 수 있다고 적혀있다.

 

여러가지를 찾아보고 생각한 결과,

Server Component는 서버 쪽에서 계산되고 결과로만 보내지는 컴포넌트라 생각한다.

그렇기 때문에 백엔드와 연결되는 부분에서 이점을 볼 수 있다고 생각하는데,

또 이런 특성 때문에 클라이언트 단의 런타임에 스타일이 조정되는 CSS-in-JS의 작동방식에는 알맞지 않았던 것 같다.

개인적인 생각으로는 zero Runtime CSS-in-JS 방식인 vanilla extract는 CSS stylesheet를 빌드하며 만들기 때문에,

CSS stylesheet를 직접 만드는 것과 다르지 않을 것이라고 생각했는데 그렇지만도 않은가보다.

 

결론적으로, 공식문서에서는 Server Component를 스타일하고 싶다면,

CSS Module 방식이나, Next.js 13에서 적극 권장하는 tailwind CSS 프레임워크를 사용하기를 추천하고 있다.

 

그래서 나는 변수 사용을 포함한 SCSS를 사용하도록하고,

공식 문서에서 권장하는 CSS Module 방식을 사용하도록 결정했다.

(tailwind CSS는 사용해본적이 있는데, 사용성은 좋았지만 이번에는 직접 스타일을 작성해보고 싶었다.)

SCSS 작성 방식 복습

SCSS & CSS Module (velog.io)

SCSS & CSS Module

윗 글에 정리가 잘 되어 있어서 참고하여 작성하였다.

 

기존에 작성해두었던 vanilla-extract의 theme에 해당되는 부분은 SCSS의 변수 작성 방식으로 수정했다.

import { createTheme } from '@vanilla-extract/css';

export const [mainThemeClass, mainTheme] = createTheme({
  color: {
    mainColor: '#F5CD6D',
    subColor: '#F7E590',
  },
  typography: {
    fontFmaily: 'Pretendard',
    fontSize: '1rem',
    titleFontSize: '3rem',
    subTitleSize: '2rem',
  },
  spacing: {
    tiny: '0.75rem',
    little: '1rem',
    small: '2rem',
    medium: '4rem',
    large: '8rem',
  },
  containerSize: {
    header: '3rem',
  },
});

해당 코드를 SCSS 방식으로 수정했다.

// color
$mainColor: #f5cd6d;
$subColor: #f7e590;

// typography
$fontFamily: 'Pretendard';
$titleFontSize: 3rem;
$subTitleSize: 2rem;

// spacing
$tinySpacing: 0.75rem;
$littleSpacing: 1rem;
$smallSpacing: 2rem;
$mediumSpacing: 4rem;
$largeSpacing: 8rem;

// containerSize
$headerSize: 3rem;

아쉬운 점은 클래스의 객체 값으로 접근하는 방법이 더 직관적일 것 같다는 점이었다. 클래스명, 객체명, 속성명이 전부 명시되기 때문이다.

그래도 SCSS방식에서도 @use를 사용하여 import as 처럼 별명을 붙일 수 있다는 점으로 극복할 수 있지 않을까 싶다.

flex 요소

[CSS] flex:1의 의미 (velog.io)

[CSS] flex:1의 의미

CSS 코드를 오랜만에 작성해보니 flex에 대한 자세한 내용이 생각나지 않아 찾아보았다.

결론적으로 flex: 1은 아래를 의미한다.

flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%

 

flex-grow가 1이므로 기본 크기보다 늘어날 수 있고

flex-shrink가 1이므로 기본 크기보다 줄어들 수 있다.

또한, flex-basis가 0%이므로 기본 크기가 0이고, 이는 개발자가 지정한 크기를 따를 것임을 명시하는 것 같다.

 

나는 max-width 속성을 쓰고 싶어서 flex 속성을 찾아보았는데,

기본 크기보다 늘어나고 줄어들 수 있고, 기본 크기를 0으로 설정해주는 flex 속성은 max-width 속성에 딱 맞는 속성같다.

sticky가 안되는 문제

position : sticky는 어디에 고정되어야 하는지 지정되어야 한다.

예시에서 일반적으로 sticky만 주었을때 부모요소 내에 스크롤될 때는 따라오길래 감안하지를 못했다..

헤더 같은 경우는 최상단에 고정되어야 하므로 top : 0 속성을 주면 제대로 최상단에 붙여놀 수 있다.