'그냥 시간에'CSS

원자 CSS의 상승과 "즉각적인"편집 : CSS를 작성하는 새로운 방법

ACSS.IO는 "원자 CSS"라는 개념을 채택한 최초의 프로젝트로 간주되며 그 핵심은 CSS의 편집에 있습니다. 다음과 같이 CSS를 작성하면됩니다.

<code><div>
  텍스트
</div></code>

다음과 같은 CS를 생성합니다.

 <code>.C\(\#333\) { color: #333; } .P\(20px\) { padding: 20px; }</code>

(또는 유사한 코드).

핵심은 실제로 필요한 CS 만 생성한다는 것입니다. 최종 생성 된 CSS 코드 양은 일반 스타일 시트보다 훨씬 작습니다.

이 컴파일 프로세스를 "제 시간에만"CSS라고합니다.

인기있는 Tailwind 프레임 워크 도이 접근법을 지원합니다. 저에게는 이번이 반향 테일 윈드의 사고 방식이있었습니다. 많은 CSS 유틸리티 클래스를 제공 한 다음 사용하지 않은 부품을 "청소"하는 대신 처음부터 필요한 CSS 만 생성합니다.

"Instant"CSS라는 개념이 인기가 있다고 생각합니다. 나는 최근 어셈블러 CSS를 보았고 이것을 매우 심각하게 생각합니다. 클래스를 사용하는 것과는 다르지만 다음과 같습니다.

<code><div x-style="grid; gap:1rem; grid-rows:1; grid-cols:1; sm|grid-cols:3">
  제출하다
</div></code>

나는이 접근법과 약간 충돌하고 있습니다. 한편으로, 나는 템플릿을 떠나지 않고 스타일을 좋아하고, 특히 CSS는 차단 자원이기 때문에 생성하는 매우 적은 양의 CSS 코드와 같은 것을 좋아합니다. 그러나 반면에, 나는 그것이 CSS 자체의 제한적인 추상화라는 것을 좋아하지 않아 도구가 CSS 기본 기능을 지원하는 정도를 남겨두고 있습니다. 또한 JSX의 인라인 이벤트 핸들러와 같은 것들에 익숙하지만 HTML을 조금 복잡하게 보이게합니다.

위 내용은 '그냥 시간에'CSS의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!