⚠️ Panda CSS shorthand vs longhand 우선순위 주의

[al-bur]

Panda CSS에서는 shorthand 속성이 longhand 속성보다 항상 우선합니다. 코드 작성 순서와 관계없이요.

When you combine shorthand and longhand properties, the shorthand property will take precedence over the longhand property.

// ❌ paddingTop이 무시됨
css({
  paddingTop: '20px',
  padding: '10px',
})

// ❌ borderColor가 무시됨
css({
  borderRight: '[1px solid]',
  borderColor: 'gray.200',
})

shorthand와 longhand를 섞어 쓰지 않도록 주의해야해요!! 저도 이거 몰라서,,,, 프로덕트 css가 이상하게 나갔었어용

[wo-o29]

코드 작성 순서에 상관없이 shorthand 속성이 우선되는 규칙이 좋은 것 같으면서도 한편으로는 기존 css 동작이랑 다르기 때문에 Panda CSS의 규칙을 모르면 예측할 수 없는 동작이 발생할 수 있겠네요..

al-bur님은 shorthand 우선 방식 vs 기존 css 방식 중 어떤 방식이 더 좋다고 생각하시나요??

[al-bur]

저는 기존 css 방식을 따를 수 있으면, 더 좋다고 생각하긴했어요! 사실상, 기존에 사용하는 익숙한 방식을 따르는게 인지비용이 줄어들거라서용

[yoonminsang]

오.. pando CSS를 사용해보지 않은 제 입장에서는 굉장히 당황스럽네요 ㅋㅋㅋ

[al-bur]

저도 당황해서 디버깅했습니다...ㅋㅋㅋ