CSS-in-JS의 이점을 누리면서 일반 CSS 작성

최신 CSS 영역은 CSS-in-JS 추종자와 일반 CSS 지지자로 나뉘며 어떤 접근 방식이 더 우수한지에 대한 지속적인 논쟁이 있습니다. 싸움에도 불구하고 생태계를 발전시키고 더 활기차게 만들어 우리에게 도움이 됩니다.

일반 CSS 사용자는 확립된 도구, 단순성, 성능 및 이식성을 얻는 반면 CSS-in-JS 사용자는 안정성과 앱 코드와의 긴밀한 통합을 즐깁니다.

왜 둘 다 가지고 있지 않습니까?

Nyan CSS은 좋은 CSS를 작성하고 스타일을 구성 요소(React/Preact/Vue.js)로 가져올 수 있는 규칙입니다.

작동 방식은 다음과 같습니다. 먼저 CSS를 정의합니다.

.Header,
.Text {
  font-family: monospace;
}

.Header {
  font-size: 2rem;
}

.Header-size-large {
  font-size: 2.2rem;
}

.Text-italic {
  font-style: italic;
}

그런 다음 구성 요소로 가져옵니다.

import React from 'react'
import { Header, Text } from './style.css'

function Announcement() {
  return (
    <>
      <Header tag="h1" size="large">
        Welcome Nyan CSS!
      </Header>
      <Text tag="marquee" italic>
        Please, welcome Nyan CSS!
      </Text>
    </>
  )
}

따라서 다음을 얻습니다.



본질적으로 Nyan CSS는 프레임워크(React, Preact, Vue.js, 클래스 이름)와의 긴밀한 통합을 제공하는 라이브러리 제품군과 컨벤션입니다. Nyan CSS를 HTML과 함께 사용하기 위해 아무것도 설치할 필요가 없습니다.

대회

규칙은 단순하며 세 가지 규칙으로만 구성됩니다.

.Button는 컴포넌트(다른 예는 .ListItem , .UI 등)를 나타내는 CSS 클래스이며 <Button>Content</Button> 로 사용할 수 있습니다.

.Button-disabled는 부울 prop(예: .Button-fullWidth , .Window-inactive )로 구성 요소를 생성하고 <Button disabled /> 로 사용할 수 있습니다.

.Button-color-red는 enum prop이 있는 구성 요소를 나타내며(예: .Spacing-direction-column , .Window-mode-alert ) <Button color='red' /> 로 사용할 수 있습니다.

왜요?

유니버설 디자인 시스템

Nyan CSS는 CSS일 뿐이므로 코드 변경 없이 다양한 기술을 사용하여 구축된 다양한 프로젝트에서 사용할 수 있습니다. React SPA와 동일한 스타일을 JS가 없는 정적 랜딩 페이지에 사용합니다.

웹 기술은 발전하고 패션과 열정은 변화하며 HTML, CSS 및 JS는 몇 가지만 남습니다. CoffeeScript는 유산으로 우리의 삶을 더 좋게 만들었지만 언어 자체는 역사가 되었습니다.

제로 오버헤드

브라우저에서 CSS를 조작하는 런타임이 없는 Nyan CSS는 JavaScript 빌드 크기를 줄이고 CSS 관리를 브라우저에 맡겨 최대 성능을 보장합니다.

Styled Components에서 직접 영감을 받았지만 위젯 작업 중이었고 추가로 15Kb를 추가하고 싶지 않았기 때문에 the framework I use의 5x 크기가 아닌 Nyan CSS를 만들었습니다.

편집기용 플러그인을 설치하거나 사용하기 전에 트랜스파일하거나 구문 분석할 필요가 없습니다. 그것은 단지 CSS입니다.

전투 테스트

last two years에 대한 접근 방식을 점진적으로 개선합니다. 나는 developed 6 different applications (데모: Diary Email ) Nyan CSS를 사용하고 제대로 작동한다고 확신합니다.

이야기하자

어떻게 생각해? Give it a try . 그리고 나서 그것이 좋은지 아닌지 말해 줄 수 있습니다 ;-)