CSS HOT Trend

CSS-in-JS

• 스타일 정의를 CSS 파일이 아닌 JavaScript로 작성된 컴포넌트에 바로 삽입하는 스타일 기법
• 웹 애플리케이션을 여러 개의 재활용이 가능한 빌딩 블록으로 분리하여 개발하는 컴포넌트 기반 개발 방법이 주류가 됨
• Usage, Awareness : styled-components
• Satisfaction, Interest : CSS-Modules

CSS-Frameworks

• 사용자 친화적인 UI를 그대로 가져다가 쓸 수 있음. 개발속도 향상 및 간결한 css 코드 작성 가능
• Tailwind CSS, React Bootstrap, Ant Design, Semantic UI 등

styled-components

설치하기

npm i styled-components

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Button = styled.button`
  background: ${props => props.primary ? "palevioletred" : "white"};
  color: ${props => props.primary ? "white" : "palevioletred"};

  font-size: 1em;
  margin: 1em;
  padding: 0.25em 1em;
  border: 2px solid palevioletred;
  border-radius: 3px;
`;

render(
  <div>
    <Button>Normal</Button>
    <Button primary>Primary</Button>
  </div>
);