CSS는 어디다 쓰시나요?

[bamsurla]

안녕하세요!

✳️ 저희 팀에서는 지금 “간단한 스타일도 styles.ts로 분리할지”,
“컴포넌트 내부에서 선언해서 응집력 있게 유지할지”로 계속 의견이 엇갈리고 있는데요…

여러분은 어떤 방식을 선호하시나요?

---

A. 사용되는 컴포넌트 내부에서 작성해서 사용

// 사용되는 컴포넌트 내부
const Wrapper = styled.div` padding: 1rem; `;

<Wrapped/>

B. 따로 정의해서 컴포넌트에서 import해서 사용

import Wrapped from '어디선가'

<Wrapped/>

[oungo]

컴포넌트 내부에서만 사용하면 내부에 선언하고, 두 개 이상의 컴포넌트에서 사용되면 분리하는걸 선호합니다.
컴포넌트 내부에서만 사용되는 스타일을 외부에 정의해서 사용할 경우 나중에 해당 스타일을 사용하지 않게되면 사용하는 곳에서만 제거되고, 정의된 쪽에는 그대로 남아있는 경우가 많아서요.
일단 내부에 선언하고 재활용이 필요할 경우에만 별도로 분리하는 편입니다.

[bamsurla]

동의합니다! FF 문서에 있는 시점 이동이랑동 연관 지을 수 있겠어요