Tailwind CSS Atomic Classes를 프로젝트에 추가하는 이유 ❓

문제

• 많은 UI 개발자가 참여하는 프로젝트에서는 필요에 따라 각각 고유한 사용자 정의 CSS 클래스를 선언하는 방식으로 구성 요소를 코딩하기 시작합니다.

전통적인 방식

페이지 중앙에 "div"를 배치하기 위해 잘 알려진 간단한 문제를 고려할 때 일반적으로 필요한 모든 스타일을 갖춘 클래스를 만드는 방법은 다음과 같습니다.

• 이 모든 클래스는 글로벌 범위에서 사용 가능하므로 개발자라면 누구나 자유롭게 사용할 수 있습니다.

장점

• CSS 번들 크기를 크게 줄입니다.
• 팀 전체에서 구성요소 스타일이 일관되게 유지되도록 합니다.
• 개발자는 동일한 스타일을 다시 적용하는 데 드는 노력을 덜 들이고 아이디어의 프로토타입을 빠르게 제작할 수 있습니다.

단점

• 학습 곡선, 각 개발자는 이미 존재하는 클래스에 익숙해져야 합니다.
• 다른 사람이 사용할 수 있도록 전역으로 선언된 클래스를 추가할 때 프로젝트에서는 적절한 문서를 유지해야 합니다.

Vue JS의 함정

:deep() / ::v-deep

• 베인? Vue JS CSS 타겟팅

전통 수업

• 수업 스타일을 타겟팅하고 적용하는 것은 매우 쉽습니다.

타이윈드 수업

• 개발자는 'div'를 타겟팅할 때 매우 창의적이어야 합니다.

애플리케이션에 Tailwind CSS 클래스를 도입하는 방법

전통적인 방식

• 다음을 사용하여 쉽게 설치할 수 있습니다

테일윈드 설치

• 그러나 이렇게 하면 전 세계적으로 수많은 클래스가 설치(즉, 등록)됩니다.

틀에 얽매이지 않는? 방법

• 애플리케이션에 이미 기존 CSS 라이브러리가 있는 경우 필요한 클래스를 선별하여 하나의 CSS 파일에 추가하고 앱에 전역적으로 등록하는 것이 이상적입니다.

• 귀하의 애플리케이션이 Flexbox 스타일의 유연성만 원한다고 가정해 보세요
  -- 플렉스 스타일에서 필요한 클래스 목록을 가져옵니다

• 체리픽 수업을 선택하세요 ? 추정하다 ? 귀하의 애플리케이션 요구 사항을 확인하고 필요에 따라 추가하십시오.

• 이 방법을 사용하면 CSS 번들을 상당히 작게 유지할 수 있지만 개발팀은 적용되는 CSS를 엄격하게 제어해야 합니다.
  

결론

• Tailwind와 함께 Atomic 클래스를 참조로 사용하면
• 프로젝트의 CSS 공간을 줄입니다.
• 애플리케이션 전체에서 스타일 일관성을 유지합니다.
• 신속한 프로토타이핑으로 개발자 속도를 높입니다. ?

위 내용은 Tailwind CSS Atomic Classes를 프로젝트에 추가하는 이유 ❓의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!