자동 생성 된 원자 CS

원자 CSS에서 Robin Weser의 속기-론적 딜레마 탐색은 HTML 및 CSS를 최적화 된 스타일로 자동으로 변환 해야하는 문제를 강조합니다. 핵심 문제는 속기 및 반 CSS 속성의 상호 작용에서 발생하는 에지 케이스를 처리하는 데있어서, 원자 클래스를 생성하는 FELA와 같은 프레임 워크를 사용할 때 잠재적 오류가 발생합니다.

원자 CSS ( 한 클래스, 하나의 직업 )의 개념은 흥미 롭습니다. 이 예를 고려하십시오 :

 <code>.mb-8 { margin-bottom: 2rem; }</code>

거의 모든 CSS 가능성을 다루는 수천 개의 그러한 수업을 상상해보십시오.

원자 CSS를 사용하는 이유는 무엇입니까? 몇 가지 강력한 이유가 있습니다.

• CSS 감소 : 반복 된 속성/값 쌍 및 저자 별 클래스 이름을 제거하면 최종 CSS 파일 크기가 크게 줄어 듭니다. CSS는 차단 리소스이기 때문에 이것은 중요합니다.
• 단순화 된 이름 지정 : 더 이상 시간이 많이 걸리는 클래스 이름 브레인 스토밍이 없습니다.
• 설계 일관성 : 가용 클래스 제한은 디자인 균일 성 정도를 시행합니다.
• 개발자 속도 증가 : 일부 개발자는이 접근 방식이 더 빠르고 효율적이라고 생각합니다.

원자 CS를 생성하는 것은 수동으로 (Github 및 Facebook이 각각 프라이머 및 FB5를 사용했던 것처럼, 반드시 권장되는 것은 아닙니다) 또는 사전 구축 프레임 워크를 사용하여 수행 할 수 있습니다. Tachyons는 크고 의견이 많은 원자 클래스 모음의 초기 예입니다.

그러나 Tailwind CSS는 지배적 인 플레이어입니다. 그 강점은 다음과 같습니다.

• 구성 가능성 : 프로젝트의 요구에 맞게 클래스를 사용자 정의하십시오.
• 사용하지 않은 클래스 : 이 중요한 단계는 사용되지 않은 클래스를 제거하여 원자 CS의 전체 성능 이점을 실현합니다.
• 내장 UI 라이브러리 : 쉽게 이용 가능한 구성 요소로 개발을 가속화합니다.

그러나 원자 CSS를 자동으로 생성하는 것은 어떻습니까?

야후의 접근 방식은 빌드 단계에서 처리 된 클래스 이름으로 기능을 사용하여 현재 방법을 예고했습니다. 이것은 Tailwind Purgecss 조합과 유사합니다.

오늘날 원자 CSS를 수동으로 쓸 필요는 없습니다. Weser가 지적했듯이 Fela, Styletron, React Native Web, Otion 및 Stylesheet과 같은 라이브러리를 사용하면 빌드 프로세스 중에 원자 CS를 생성하면서 친숙한 방식으로 스타일을 작성할 수 있습니다. 이 접근법은 재사용 성을 최대화하고 최종 CSS 번들 크기를 최소화합니다. 각 속성 값 쌍은 한 번만 렌더링되어 효율성이 향상됩니다.

이 방법은 종종 CSS-in-JS에 근절되며 최적의 결과를 위해 마크 업과 CSS를 모두 처리합니다. 저자를 포함한 많은 개발자들이 덜 매력적이라고 ​​생각하는 원자 CSS를 수동으로 작성하는 데 대한 설득력있는 대안입니다. 주요 이점은 웹 성능 향상을위한 자동 최적화입니다.

문제는 남아 있습니다 :이 접근법에 대한 당신의 생각은 무엇입니까?

위 내용은 자동 생성 된 원자 CS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!