CSS in JS

저번 프로젝트에선 MUI로 만들고(+emotion) 추후 다음 아이템을 고려해보자고 했다.

우리 글로벌 디자인 시스템이 Material UI 기반이라 너무 쉽게 디자인 할 수 있기에.

 

https://daily.dev/blog/why-i-moved-from-styled-components-to-tailwind-css-and-whats-the-future-of-css-in-js

Why I moved from styled-components to Tailwind CSS and what's the future of CSS-in-JS?

const Button = styled.button`
  color: grey;
  background-color: white;
`;

<div class="p-6 max-w-sm mx-auto bg-white rounded-xl shadow-md flex items-center space-x-4">
  <div class="flex-shrink-0">
    <img class="h-12 w-12" src="/img/logo.svg" alt="ChitChat Logo">
  </div>
  <div>
    <div class="text-xl font-medium text-black">ChitChat</div>
    <p class="text-gray-500">You have a new message!</p>
  </div>
</div>

위 블로그에서 보고 가져왔는데, tailwindcss는 참 지저분하다

DX만 보면 styled component, emotion이 참 좋은거 같은데 

 

성능은 확실히 차이가 난다.

앞으로 css in js의 빌드타임이 훨씬 개선 되길 바라지만 이 분은 아직 tailwindcss를 사랑하시는거 같다.

 

https://emotion.sh/docs/@emotion/server

Emotion – @emotion/server

@emotion/server provides three APIs for doing server-side rendering with emotion to extract critical css, inline critical css in html to a string and inline critical css in html to a stream.

@emotion/server's APIs are documented here.

npm install --save @emotion/css @emotion/server

 

https://styled-components.com/docs/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.

You get all of these benefits while still writing the CSS you know and love, just bound to individual components.

 

그럼에도 CSS in JS 라이브러리에서 주장하는걸 보면 너무 혹한다.