CSS-in-JS 및 유틸리티 우선 CSS에 대한 생각 (Tailwind)

최근 직장에서 진행된 UI 개발 작업은 CSS-in-JS 및 유틸리티 우선 CSS(Tailwind)를 다시 살펴볼 수 있는 귀중한 기회를 제공했습니다. 내 일상 업무에는 UI 작업이 거의 포함되지 않았기 때문에 약간 녹슬었지만 상쾌한 경험이었습니다. 여기서 제 목표는 개발 워크플로와 도구에 초점을 맞춰 두 접근 방식을 편견 없이 비교하는 것입니다.

테일윈드 CSS

저희 팀이 Tailwind를 선택한 것은 효율성에 대한 열망에서 다소 즉흥적으로 이루어졌습니다. 친숙도가 다양하고 일부 회의적인 시각도 존재했지만 시간 절약은 매력적인 요소였습니다.

긍정적인 측면

통합, 맞춤 변수 생성, 테마 개발은 놀라울 정도로 간단했습니다. 새로운 테마를 확장하거나 구축하는 것이 직관적이라는 것이 입증되었습니다.

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

기본 여백 및 패딩 제거와 같은 단순한 작업이라도 기본 스타일을 포함하면 시간이 크게 절약됩니다. 이로 인해 작업 흐름이 상당히 간소화되었습니다.

Tailwind는 직관적인 경험을 목표로 하며 이를 크게 달성합니다. 그러나 일부 측면에서는 덜 직관적으로 느껴집니다. 클래스 명명 규칙은 일반적으로 명확하지만(예: 패딩의 경우 p, 여백 하단의 경우 mb) 가끔 불일치가 발생합니다(예: rounded의 경우 border-radius). 이는 사용자 정의 테마 정의로 완화될 수 있습니다.

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

전체 감상

가독성과 유지 관리성은 예상보다 문제가 적었습니다. 구문에 조정 기간이 필요하고 VS Code의 IntelliSense가 가끔 지연되는 반면, 작은 요소에 여러 클래스를 적용하더라도 코드는 관리 가능하고 탐색하기 쉽습니다.

중요 사항: @apply에 지나치게 의존하지 마세요. 이는 "Tailwind-in-CSS"의 바람직하지 않은 결과로 이어질 수 있습니다.

서버측 렌더링(SSR)

결정적으로 Tailwind는 테스트 중에 SSR 문제를 제시하지 않았습니다. 원활한 통합이 중요한 장점이었습니다.

CSS-in-JS(감정)

2024~2025년에는 CSS-in-JS 솔루션의 인기가 하락하고 있는데, 이는 주로 React와 같은 프레임워크의 서버 구성 요소 증가로 인해 발생합니다.

참조: https://www.php.cn/link/9cb4d40fce0492278209290ee3e4ae31

주요 과제

주요 문제는 React의 Context API에 대한 의존에서 비롯됩니다. React 애플리케이션에서 서버와 클라이언트 구성 요소를 혼합하면 데이터 손실이 발생하고 다시 렌더링할 때 올바른 스타일 업데이트가 방지될 수 있습니다. 이러한 제한은 많은 CSS-in-JS 라이브러리에 내재되어 있습니다.

호환 가능한 대안이 있지만 근본적인 문제는 여전히 남아 있습니다. Joshua Comeau의 블로그는 이 문제에 대한 훌륭한 맥락을 제공합니다.

회고전 가기도로 CSS-in-JS로의 전환은 처음에 예상했던 것보다 덜 유익하다고 느꼈습니다. 포함 된 개발 경험 (하나의 파일 내의 모든 것)은 처음에는 매력적이지만,이 장점은 시간이 지남에 따라 덜 중요하다는 것이 입증되었습니다.

장기 고려 사항 CSS-in-JS로 인해 타이핑 및 구성 오버 헤드가 증가했습니다. 꼬리 바람에 비해 덜 효율적이라고 느꼈습니다. 조건부 소품 통과는 힘과 유연성을 제공합니다

이것은 또한 코드 이해와 리팩토링을 복잡하게 할 수 있습니다. 과도한 스타일의 덮어 쓰기 신호 잠재적 설계 시스템 불일치 :

새로운 프로젝트의 경우 CSS-in-JS를 피할 수 있습니다 CSS 변수 및 테마

CSS 변수는 매우 중요합니다. 팔레트를 한 번 한 번 정의하고 구성 요소에서 재사용하면 스타일링을 단순화하여 사전 정의 된 구성 요소 변형을 사용하는 것과 비슷한 경험을 제공합니다.

후 프로세서 및 구성 후 프로세서 (예 : PostCS)는 CSS 최적화에 필수적입니다. 그들은 상당한 혜택을 제공합니다 :

: 사용되지 않은 코드를 제거합니다

: Sass와 유사한 중첩 된 CSS를 활성화합니다

<code>@import "tailwindcss";
@theme {  
  --font-script: Comic-sans; // theme extension
  --color-*: initial;  // default overrides
  --color-white: #fff;
  ...
}</code>

: 라인 기능을 제공합니다 : 공급 업체 접두사를 추가합니다 (지금은 덜 중요하지만)

:

진술을 활성화합니다

<code>@theme { 
  --border-radius: var(--rounded);
  --border-radius-none: var(--rounded-none);
  --border-radius-full: var(--rounded-full);
  // ...etc.
  --rounded*: initial;
}</code>

<:> (전체 목록 : ) 오버 헤드를 추가하는 동안 후 프로세서는 개발자 경험과 CSS 성능을 향상시킵니다. 혜택은 종종 초기 투자보다 중요합니다. 라이트닝 CSS

Lightning CSS (PostCS에 대한 Rust 기반 대안)는 더 빠른 빌드 시간과 동일한 기능을 제공합니다. 잘 통합 된 솔루션을 찾으면 탐색 할 가치가 있습니다

요약 CSS 환경은 빠르게 발전하고 있으며 새로운 도구와 접근 방식이 지속적으로 떠오르고 있습니다. Tailwind와 CSS-in-JS에 대한 나의 경험은 유익한 정보로 강점과 약점을 모두 강조했습니다. 미래의 CSS 툴링에 대한 RSC의 영향은 중요하며 추가 고려 사항을 보증합니다.

위 내용은 CSS-in-JS 및 유틸리티 우선 CSS에 대한 생각 (Tailwind)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!