패스트캠퍼스 챌린지 2일차 (스타일링 라이브러리)

2021.1.25 (화) +2day

CSS의 문제점

Global Namespace / Dependencies / Dead Code Elimination

Minification / Sharing Constants

Non-deterministic Resolution / Isolation

1. Global Namespace: 글로벌 변수를 지양해야하는 JS와 대치
2. Dependencies: css 간의 의존 관리
3. Dead Code Elimination: 안쓰는 css인지 어려움
4. Minification: 클래스 이름 최소화
5. Sharing Constants: JS의 코드와 값을 공유하고 싶음
6. Non-deterministic Resolution: css 파일 로드 타이밍 이슈
7. Isolation: 격리

이 문제들을 해결하기 위해 나온 것이 CSS in JS

스타일드 컴포넌트(styled-componenets)

https://styled-components.com/

styled-components

const Button = styled.a`
  /* This renders the buttons above... Edit me! */
  display: inline-block;
  border-radius: 3px;
  padding: 0.5rem 0;
  margin: 0.5rem 1rem;
  width: 11rem;
  background: transparent;
  color: white;
  border: 2px solid white;

  /* The GitHub button is a primary button
   * edit this to target it specifically! */
  ${props => props.primary && css`
    background: white;
    color: black;
  `}
`

https://styled-components.com/docs/basics

styled-components: Basics

• Automatic critical CSS: styled-components keeps track of which components are rendered on a page and injects their styles and nothing else, fully automatically. Combined with code splitting, this means your users load the least amount of code necessary.
• No class name bugs: styled-components generates unique class names for your styles. You never have to worry about duplication, overlap or misspellings.
• Easier deletion of CSS: it can be hard to know whether a class name is used somewhere in your codebase. styled-components makes it obvious, as every bit of styling is tied to a specific component. If the component is unused (which tooling can detect) and gets deleted, all its styles get deleted with it.
• Simple dynamic styling: adapting the styling of a component based on its props or a global theme is simple and intuitive without having to manually manage dozens of classes.
• Painless maintenance: you never have to hunt across different files to find the styling affecting your component, so maintenance is a piece of cake no matter how big your codebase is.
• Automatic vendor prefixing: write your CSS to the current standard and let styled-components handle the rest.

Installation

# with npm
npm install --save styled-components

# with yarn
yarn add styled-components

 

실행예제

(코드 생략)

 

스타일드 컴포넌트(styled-components)

Automatic critical CSS: 자동 style injects & 코드 스플릿

No class name bugs: unique / overlap x / misspllings

Easier deletion of CSS: tied to a spcific component

Simple dynamic styling: props / global theme

Painless maintenance: styling affecting your component

Automatic vendor prefixing: current standard only

 

 

 

 

 

 

 

 

https://bit.ly/37BpXiC

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성되었습니다