CSS-in-React 풍경

반응형

목록을 살펴보기 전에 몇 가지 주의할 점이 있습니다.

• 전 이 도서관들에 대해 깊이 알지 못합니다. 그 중 몇 개는 실제 프로젝트에 사용했는데, 특히 CSS 모듈이 가장 많았습니다. 나는 각각의 뉘앙스를 잘 표현하지 못한다. 아래 데모는 기본 스티넌택스의 기본 데모입니다.
• 제가 잘못 알고 있거나 더 자세한 내용을 추가하고 싶으시면 댓글이나 연락처로 보내주시면 개선해드리겠습니다.
• 이것의 요점은, 부분적으로, 쉬운 참조를 위해 각각의 작업 코드 예제를 갖는 것이다.

스타일리쉬한 재료.

• 매우 인기가 많음 - 아마도 가장 많이 사용되는 옵션입니다.
• 역동적인 스타일링의 가능성과 변형에 소품을 사용하는 마법을 대중화했습니다.
• 템플릿 리터럴 구문은 CSS와 같은 느낌을 준다. 이러한 방식으로 사용하는 것이 권장되지만, 오브젝트 구문을 사용할 수도 있습니다.
• SSR를 지원하지만 "제로 런타임" 라이브러리("static CSS로 컴파일"하는 것)와는 다릅니다.

 

 

CSS 모듈

• 아주 간단합니다. 스코프 스타일과 스타일과 구성요소의 코로케이션을 장려하는 것이 전부입니다.
• 기본적으로 기존 클래스를 기반으로 믹스인 방식으로 구성되는 것이 화려한 특징이다.
• 런타임 작업이 전혀 아닙니다. 빌드 프로세스가 필요합니다. 하지만 HMR 등에서는 여전히 작동합니다. JavaScript에서 스타일과 함께 전달하거나 정적 CSS 파일로 추출할 수 있습니다. 동적 기능을 하지 않으므로 CSS를 추출하면 실행 시간이 거의 없습니다.
• Sass와 결합할 수 있습니다.
• Next.js에 기본 제공

감정

 

이모션은 자바스크립트로 css 스타일을 작성하기 위해 설계된 라이브러리이다. 소스 맵, 레이블 및 테스트 유틸리티와 같은 기능을 통해 뛰어난 개발자 환경뿐만 아니라 강력하고 예측 가능한 스타일 구성을 제공합니다. 문자열과 객체 스타일이 모두 지원됩니다.

• 그것은 스타일 구성 요소인 TBQH와 크게 다르지 않아 보이지만, 이 팟캐스트는 몇 가지 성능 차이점에 대해 알아봅니다.
• SSR를 지원하지만 실행 시간이 제로인 것은 아닙니다.
• 글래머러스함은 감성적인 것에 대해 완전히 비난 받고 있다.

 

꿰매다

 

• Variants API는 매우 유용하고 훌륭합니다.
• TypeScript 편집기 경험.
• 설계 토큰 접근 방식을 사용하고 설계 토큰을 사용할 것을 권장합니다.
• 유틸리티를 사용하면 스타일링을 위한 고유한 사용자 정의 속기를 작성할 수 있습니다.
• SSR를 지원하며 전체는 아니지만 실행 시간이 거의 없습니다. 또한 실제로 CSS 파일을 생성하는 것 같지도 않고, CSS를 뱉어내는 기능을 갖추고 있어 <style> 태그를 통해 SSR를 사용할 수 있습니다(캐싱에 이상적이라고는 생각되지 않음).
• 여기 솔직한 리뷰가 담긴 트위터 글이 있습니다. 여기에 대한 반응도 보세요.

 

바닐라 향의

 

• 저는 바닐라 추출이 SSR를 지원한다고 말할 수 있지만 동적 추출과 같은 특정 "런타임" 기능을 선택하지 않는 한 SSR이 사용되는 유일한 방법이기 때문입니다. 이것이 바로 "런타임이 제로"라는 의미이다: 정적 CSS 파일로만 컴파일한다.
• TypeScript 편집자 경험 » (최근 기사 참조)
• 위의 Stiches 프레임워크와 같은 Recipes API를 포함한 Variants API.
• 스프링클을 통한 테마 및 유틸리티급 접근 방식 지원
• 아프로디테를 이 리스트에 올리려고 했는데 창작자들이 바닐라 추출물로 옮기고 있어서 요즘은 좋은 선택이 아닌 것 같아요 다른 도서관들과 거의 비슷한 기능을 하는 것 같지만요

JSS

• 리액트별 통합 기능
• 확장 구문을 가집니다.
• 플러그인 아키텍처

 

 

리나리아

• "Zero Runtime" CSS-in-JS 라이브러리의 OG입니다.
• 실제 CSS 파일로 컴파일하지만 동적 작업을 수행할 경우 여전히 실행 시간이 있습니다(적어도 그렇게 생각함).
• API 방식으로 스타일링된 구성요소와 비슷한 느낌입니다.
• 중요 CSS를 지원합니다.

스타일링된 JSX

 

• 바벨 플러그인은 확실히 제작 과정이죠
• 범위 지정을 원하는 네스팅 수준의 구성 요소에서 바로 <style jsx> 태그를 사용하는 것이 현명한 API입니다.
• 중첩이 부족한 것은 좋지 않습니다. 선택기 이름을 많이 반복해야 합니다.

구버

• 구버는 멋진 이름을 가지고 있고 다른 어떤 것보다도 작은 숫자인 1.25KB에 불과하기 때문에 눈에 띈다.
• 스타일링된 구성 요소와 감성의 특징들이 거의 비슷합니다.

 

 

흥미로운 자료:

• Shopify가 어떤 도서관으로 바꾸길 원했는지 알아봅니다.
• 페이스북은 요리하는 것을 가지고 있지만 오픈 소스는 없다. 이것은 분명히 "스타일X"라고 불리고, 거의 0에 가까운 런타임, 원자적인 CSS 출력, 타입스크립트 경험을 포함하여 기능들을 일치시키려고 시도하는 "스타일9"이라는 라이브러리가 이미 있다.
• 만약 여러분이 원자적인 스타일로 글을 쓰는 것에 관심이 있다면, 많은 사람들은 테일윈드를 사용하는 것이 (아마도 적시 모드를 사용하는) 방법이라고 생각합니다.
• 아마도 테일윈드의 더 리액트-Y 버전은 스타일링된 시스템일 것이다.
• Twin은 React-y 방식으로 원자적인 스타일을 가진 저작 계열을 따르고 있다.
• 컴파일러를 대신 사용할 수 없습니다. 저 혼자였을 거라고 확신하지만, 저는 포기했어요. 내가 보기에 그것은 Atomic CSS 클래스라는 것을 제외하면 스타일링된 컴포넌트 API와 똑같이 보입니다.
• JS Playground의 CSS 사이트는 펠라, 라듐과 같은 여기에 언급되지 않은 몇 개의 라이브러리를 포함한 많은 예를 보여줍니다. 세상에, 이런 게 많아요?