CSS-in-react 환경

많은 CSS-in-JS 라이브러리는 이론적으로 프레임 워크에 비해 결론적이지만 React 프로젝트 내에서 1 차 사용을 찾습니다. 이는 Vue, Svelte 또는 Angular와 달리 React의 내장 스타일링 솔루션이 부족하기 때문입니다. 이 "Bring-Your-Own"접근 방식은 유연성을 제공하지만 스타일링 전략 선택이 필요합니다. 일반 CSS는 실행 가능한 옵션으로 유지되지만 CSS-in-JS 라이브러리는 다음과 같은 이점을 제공합니다.

• 구성 요소와 스타일의 공동 위치
• 구성 요소 스코핑 스타일
• 소품 중심 스타일 변형
• CSS 내에서 JavaScript 통합
• 테마 기능

각 라이브러리는 고유 한 기능, 종종 위의 변형 또는 확장을 제공합니다. 중요한 것은 스타일 작성자 에 JavaScript를 사용한다고해서 항상 JavaScript 기반 스타일 배송을 의미하는 것은 아닙니다. "제로 런타임"라이브러리는 빌드 프로세스 중에 스타일을 CSS에 컴파일하여 성능을 향상시킵니다.

이 개요는 CSS- 트릭의 공식 학습 파트너 인 Frontend Masters가 지원합니다.

프론트 엔드 개발 교육

Frontend Masters는 Advanced React Training을 포함한 주요 프론트 엔드 기술에 대한 포괄적 인 과정을 제공합니다.

중간 반응 코스를 고려하십시오

라이브러리를 탐색하기 전에 참고 :

• 각 라이브러리에 대한 나의 경험은 다양합니다. CSS 모듈이 가장 광범위합니다. 데모는 기본입니다.
• 수정 및 추가는 의견 또는 연락 양식을 통해 환영합니다.
• 목표는 쉽게 참조 할 수 있도록 기능 코드 예제를 제공하는 것입니다.

프레임 워크 포함

• 스타일의 구성 요소
• CSS 모듈
• 감정
• 스티치
• 바닐라 추출
• JSS
• 리나 리아
• 스타일 JSX
• 구버

도서관 요약

스타일의 경쟁자 : 역동적 인 스타일 및 소품 기반 변형으로 유명한 매우 인기가 있습니다. 객체 구문도 지원되지만 CSS와 유사한 템플릿 문자 구문을 사용합니다. SSR을 제공하지만 "제로 런타임"은 아닙니다.

CSS 모듈 : 간단한 범위 스타일과 공동 위치를 장려합니다. 주요 기능은 구성 (Mixin-like 클래스 조합)입니다. CSS가 추출 될 때 진정한 "제로 런타임"기능을 제공하는 빌드 프로세스 전용 솔루션입니다. HMR과 함께 작동하며 Sass와 호환됩니다. Next.js.에 통합

감정 : JavaScript를 사용하여 CSS 스타일링을 가능하게하여 스타일 구성, 소스 맵, 레이블 및 테스트 유틸리티를 제공합니다. 문자열과 객체 스타일을 모두 지원합니다. 스타일의 구성 요소와 유사하지만 잠재적 성능 차이가 있습니다. SSR을 지원하지만 제로 런타임은 아닙니다. 화려 함, 매력 및 매력은 감정에 찬성하여 더 이상 사용되지 않습니다.

스티치 : 강력한 변형 API, 우수한 타입 편집기 통합, 테마 지원 및 유틸리티 생성을 특징으로합니다. SSR을 제공하고 제로 런타임에 접근하지만 CSS 파일을 직접 생성하지는 않습니다.

바닐라 추출 : 주로 SSR 솔루션; 특정 런타임 기능이 활성화되지 않는 한 "제로 런타임". 우수한 TypeScript 편집기 통합, 변형 API 및 레시피 API (스티치와 유사)를 제공합니다. 스프링클을 통한 테마 및 유틸리티 클래스를 지원합니다. 현재 탑승 한 아프로디테에 대한 강력한 대안.

JSS : REACT 통합, 확장 구문 및 플러그인 아키텍처가 포함됩니다.

Linaria : "Zero Runtime"CSS-in-JS의 선구자 인 CSS 파일로 컴파일하지만 동적 요소에 대한 런타임을 유지합니다. API의 스타일링 컴포넌트와 유사합니다. 중요한 CSS를 지원합니다.

Styled JSX : 빌드 프로세스가 필요한 바벨 플러그인. a

Goober: A lightweight (1.25KB) library with a feature set similar to styled-components and Emotion.

Additional Resources

• Shopify's library selection research.
• Facebook's in-development "StyleX" (currently un-open-sourced).
• "Style9," a library aiming to replicate StyleX's features.
• Tailwind CSS (with just-in-time mode) for atomic CSS.
• Styled System, a React-oriented approach to atomic styling.
• Twin, another React-friendly atomic styling solution.
• CSS-in-JS Playground, showcasing various libraries including Fela and Radium.

1. "TypeScript editor experience" refers to TypeScript's code completion capabilities, enhancing developer workflow in editors like VS Code.

위 내용은 CSS-in-react 환경의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!