✍️ 스타일 작성

객체 구문을 사용하는 것은 Panda에서 스타일을 작성하는 기본적인 방법입니다.

이 방식은 안정된 타입의 스타일 작성 환경을 제공하고, 가독성을 향상시켜주며, 통일된 스타일 오버라이딩 경험을 제공해줍니다.

🐼 아토믹(Atomic) 스타일

Panda에서 스타일을 작성할 때, @layer utilities 캐스케이드 레이어로 범위가 자동으로 지정되는 모던 아토믹 stylesheet가 생성됩니다.

아토믹한 stylesheet는 향상된 코드 유지 보수와 재사용성, 그리고 CSS가 전반적으로 차지하는 메모리 공간을 축소시켜주는 이점이 있습니다.

Panda는 스타일을 작성하기 위해 사용할 수 있는 css 함수를 제공합니다.

이 함수는 스타일 객체를 받고, classname string을 반환합니다.

import { css } from '../styled-system/css'
 
const styles = css({
  backgroundColor: 'gainsboro',
  borderRadius: '9999px',
  fontSize: '13px',
  padding: '10px 15px'
})
 
// 생성된 className:
// --> bg_gainsboro rounded_9999px fs_13px p_10px_15px
 
<div className={styles}>
  <p>Hello World</p>
</div>

빌드 시 생성되는 스타일은 아래와 같이 표기됩니다:

@layer utilities {
  .bg_gainsboro {
    background-color: gainsboro;
  }
 
  .rounded_9999px {
    border-radius: 9999px;
  }
 
  .fs_13px {
    font-size: 13px;
  }
 
  .p_10px_15px {
    padding: 10px 15px;
  }
}

축약(Shorthand) 속성

Panda는 개발 속도를 개선하고, 스타일 선언의 시각적인 밀도를 줄이기 위해 일반적인 CSS 속성들의 약어를 제공합니다.

borderRadius, backgroundColor, padding과 같은 속성은 rounded, bg, 그리고 p와 같은 약어로 대체할 수 있습니다.

// BEFORE - Good
const styles = css({
  backgroundColor: 'gainsboro',
  borderRadius: '9999px',
  fontSize: '13px',
  padding: '10px 15px'
})
 
// AFTER - Better
const styles = css({
  bg: 'gainsboro',
  rounded: '9999px',
  fontSize: '13px',
  p: '10px 15px'
})