CSS Ecosystem

Vanilla CSS

장점

• 도구가 필요하지 않아 덜 복잡하고, 런타임 성능비용이 없음

단점

• 범위가 지정되지 않는 단점이 있다. 한 곳에 작성한 CSS는 모든 곳에 진행되기 때문에 BEM과 같은 명명법을 통해서 해결해 나갈 수 있으나, 이는.. 엄청난 노력이 필요함
• 최적의 브라우저 지원을 위해 많은 CSS에 대해서 브라우저의 접두서를 추가해야함
• JS와의 공유가 어려움

---

Sass  /  Less

Scss는 바닐라 CSS로 컴파일 되는 전처리기 입니다. 중첩, 변수 및 iteration의 기능으로 바닐라 CSS를 커버합니다.

작동방식은 타입스크립트와 비슷합니다.

Less 도 Sass와 방식이 아주 유사한데, 차이점이라고 하면 변수에 지정을 다르게 한다

 

잠점

• for-loop, mixin nesting 같은 강력한 도구가 포함
• 바닐라 CSS에 비해 좋음

단점

• 빌드 단계로 인해 속도가 지연 됨
• CSS로 검파일 되기 때문에 본질적으로는 전역적으로 유지된다. 
• 빌드시간으로 인해 실시간으로 반영이 안됨 이러한 이유때문에 Sass변수는 CSS변수 만큼 강력하지 않음

---

Aphrodite 

이름이 이쁜데... 처음들어본다 최초의 CSS-in-JS중 하나라고 합니다. Styled-component와 유사하게 보임

 

import { StyleSheet, css } from 'aphrodite';
function App() {
  return (
    <div className={css(styles.wrapper)}>
      Hello World!
    </div>
  );
}
const styles = StyleSheet.create({
  wrapper: {
    backgroundColor: 'gray',
    minHeight: 200,
    '@media (min-width: 1025px)': {
      fontSize: '1.25rem',
    },
  },
});

장점

• CSS 내에서 JS를 사용할 수 있습니다. 
• 자동으로 prefix를 추가해주기 때문에 걱정할 필요가 없다.

단점

• 빌드단계가 필요
• 2020년에 새로운 릴리즈가 없고 활발한 프로젝트가아니다.

---

CSS 모듈

css모듈은 바닐라 css로 작성하고 JS로 가져올 수 있는 도구입니다.

/* App.module.css */
.wrapper {
  background-color: gray;
  min-height: 200px;
}
@media (min-width: 1025px) {
  .wrapper {
    font-size: 1.25rem;
  }

// App.js
import styles from './App.module.css';
function App() {
  return (
    <div className={styles.wrapper}>
      Hello World!
    </div>
  );
}

장점

• 스코프에 대한 단점을 해결할 수 있다.

단점

• css와 js간에 데이터 공유가 어렵습니다.

---

Single-file components

컴포넌트가 지정된 파일에서 CSS룰 생성하는 방법

큰 이점은 스타일과 마크업이 동일한파일에 작성되어 파일간의 이동이 줄어든다는 점이다.

// Hello.vue
<template>
  <p>Hello World</p>
</template>
<style scoped>
  p {
    background-color: gray;
    min-height: 200px;
  }
  @media (min-width: 1025px) {
    p {
      font-size: 1.25rem;
    }
  }
</style>

---

styled-components

스타일 컴포넌트도 css-in-JS솔루션이다. 

import styled from 'styled-components';
function App() {
  return (
    <Wrapper>
      Hello World!
    </Wrapper>
  );
}
const Wrapper = styled.div`
  background-color: gray;
  min-height: 200px;
  @media (min-width: 1025px) {
    font-size: 1.25rem;
  }
`;

장점

• 범위지정을 잘 해결하고, 컴포넌트 중심의 아키텍쳐에 잘 맞는다
• CSS를 작성하는 것처럼 느껴져서 사용하기 쉽다.
• 애니메이션 및 전역스타일을 위한 도구를 제공한다.
• 개발자의 만족도가 높아진다.
• SSR을 지원하고 성능이 매우 향상되고 있다.
• 커뮤니티가 가장 풀부하며 개발이 빨리 이루어진다.

단점

• 빌드시스템이 빌표하다
• 주로 리액트 도구기 때문에 다른 프레임워크의 커뮤니티가 적다

---

이 말고도, Emotion, Tailwind같은  도구들이 많이 생기고 있어 우리가 사용할 수 있는 CSS 도구들은 너무~ 많다.

어떤 도구를 사용하는지는 중요하지 않다! 왜냐면 앞으로도 계속해서 바꿀꺼기 때문에

고집만 하지말자!