디자인 토큰 형식 CSS 스타일링

[SnowSuno]

제안 내용 *

emotion의 CSS prop 기능을 이용해서 디자인 토큰, CSS mixin의 형태로 작성

Tasks

• CSS Prop 설정 및 예시 코드 작성 #328
• 코드 리팩토링
  • 사라질 atom 컴포넌트 CSS deprecated tagging #329
  • Agenda scope CSS 토큰 리팩토링 #336
  • Modal scope CSS 토큰 리팩토링 #386
  • 무슨무슨 컴포넌트 리팩토링
  • (계속 추가하세요)

---

기존의 문제점

• 재사용성이 떨어짐 (BorderedBox 등)
• 컴포넌트가 받는 prop이 너무 많아짐 (Box 등)
• 컴포넌트의 확장성이 떨어짐
• 등등

기존과의 차이점

CSS mixin 형식으로 스타일 작성하게 됨 (여러 디자인 토큰을 조합하는 형식)

Before:

const Card = styled.div`
    border-radius: ${round}px;
    background-color: ${primary ? theme.colors.blue100 : theme.colors.white};

    ...
`;

After

const Card: React.FC = ({ primary }) => 
  <div css={[
    border.md,
    primary ? bg.blue100 : bg.white,
    // ...
  ]} />
`;

React FC 말고 기존에 쓰던 styled API도 css props와 함께 사용할 수 있지만 둘을 동시에 사용하는 것은 good practice가 아니라고 합니다.

// bad example
const Card = styled.div`
  ${border.md}
  ${bg.white}
`

도입 시 이점

1. 재사용성 증가

text style, spacing, layout, border, sizing 등을 토큰으로 분리하고, 각각의 토큰을 조합(?)해서 사용하는 방식이기 때문에 재사용성을 높일 수 있음 (기존의 BorderedBox 같은거로 따로 뺄 필요 없음)

2. 스타일 확장을 위해 prop을 추가하거나 새로운 컴포넌트를 만들 필요가 없음

Before:
Card를 확장해서 점선 테두리 카드를 만들고 싶다!

• Card에 dashed prop 추가 => Card 컴포넌트가 비대해짐
  or
• DashedCard라는 새로운 컴포넌트 만들기 => 재사용성 감소

After:

const dashed = css`
  border: 1px dashed ${colors.gray300};
`;


<Card css={dashed} />

3. Inheritance 보다 Composition 선호

React의 컴포넌트 작성 방식이 inheritance 보다는 composition에 더 친화적이기 때문에 더 적합

Before:

const DashedCard = styled(Card)`
  border: 1px dashed ...
`;

<DashedCard />

After:

<div css={[cardStyle, dashedBorder]} />

4. 기존의 컴포넌트 기반 조합 방식보다 DOM tree가 얕아짐

ex) Flex layout 가지고 테두리 있는 스크롤 컨테이너
Before:

<BorderedBox ... >
  <Scroll>
    <Box dir="column" ... >
       // content
    </Box>
  </Scroll>
</BorderedBox>

After:

<div css={[border.gray300, column, scroll]} >
  // content
</div>

5. 모듈화에 의존할 필요 없이 raw CSS로도 확장 가능 - 점진적 코드 정리 및 리팩토링 가능

ex) Header를 구현하려 하는데 border bottom 토큰이나 컴포넌트가 없는 경우

const headerStyle = css([
  column,  // 기존 토큰
  text.heading1, 
  css`border-bottom: 1px solid ${colors.gray600};` // raw css
]);

6. 현 상황에서 제일 쉽게 적용할 수 있음

기존에 사용하고 있던 emotion의 기능을 사용하는 것이기 때문에

• 패키지 추가 필요 없음
• 현 상황에서 점진적인 도입 가능

7. 기타 등등 공식 문서 에도 참고할거 많을듯

스크린샷

[JeukHwang]

논리적인 자세한 설명과 여러 자료를 첨부한 폭넓은 분석 공유해주셔서 감사합니다 :)