재사용 가능한 디자인을 빠르게 생성하기 위한 CSS-in-JS 라이브러리 작성

안녕하세요, 오늘은 NiftyCSS 이라는 CSS-in-JS 라이브러리에 대해 이야기하겠습니다. 저는 아주 멋진 아이디어를 거의 개발하지 못했고 커뮤니티로부터 피드백과 생각을 얻고 싶었습니다.

JS에서 CSS를 작성하는 이유는 무엇입니까?

좋은 질문. CSS-in-JS 라이브러리를 사용해 본 적이 없다면 JavaScript(또는 물론 TypeScript)에서 CSS를 작성할 수 있는 이유와 방법이 궁금할 것입니다.

클래스 이름 충돌 없음

클래스 이름은 라이브러리에서 자동으로 생성되므로 생각할 필요가 없습니다.

데드 코드 제거

클래스를 사용하지 않으면 CSS가 주입되지 않으며(또는 이를 지원하는 라이브러리의 경우 서버 측 렌더러) 추가 CSS가 전혀 없습니다.

CSS에서 JS 사용

논리적으로 보이지만 실제로는 JavaScript 코드에서 다음과 같은 모든 기능을 사용할 수 있습니다.

변수

함수를 호출하여 코드 가져오기

스타일 재사용

그리고 CSS-in-JS를 사용하는 훨씬 더 많은 전문가들이 있습니다. 물론 일부draw-backs도 있습니다.

NiftyCSS 멋진 기능

우선, 예제 코드가 어떻게 생겼는지 보여드리겠습니다.

보시다시피 저는 JavaScript 파일(실제로는 TypeScript였습니다)에 CSS를 작성했고 몇 가지 이상한 기술을 사용했습니다. css 함수는 고유한 클래스 이름을 반환하므로 원하는 모든 위치에 포함할 수 있습니다.
오른쪽에는 생성되고 삽입된 CSS가 표시됩니다. 사용되는 몇 가지 기능에 대해 자세히 살펴보겠습니다.

자동 코드 생성을 위한 지시어

미디어 쿼리 선언 작성은 지루하지 않나요? 이를 해결하기 위해 Directives라는 것을 만들었습니다. 그것들은 css 객체의 단순한 속성으로, 무엇이든 담을 수 있습니다.
예를 들어 NiftyCSS에는 까다로운 선언@media (min-width...)을 대체할 중단점이 포함되어 있습니다. 여기서는 $sm 지시어를 사용했는데, 이 지시어 내의 모든 CSS 규칙이 사전 정의된 중단점 내에 ​​있음을 알려줍니다. 가장 좋은 점은 Nifty에 의해 자동으로 변형된다는 것입니다! (또한 플러그인을 통해 사용자 지정 중단점 및 사용자 지정 지시문을 정의할 수 있지만 다음 시간에 제공됩니다.)

CSS 유틸리티

flexCenter 및 paddingX 라는 일부 함수와 변수를 사용했음을 알 수 있습니다. JavaScript 파일에 있으므로 스프레드 연산자를 사용할 수 있습니다. 이러한 함수와 변수는 @niftycss/css 패키지에서 제공되며 단일 속성에서 많은 CSS 규칙을 반환합니다.
예를 들어 flexCenter 변수는 다음 3가지 규칙이 있는 객체를 반환합니다.

display: flex;
justify-content: center;
align-items: center;

이러한 속성을 가진 요소를 만들고 싶을 때마다 모든 것을 직접 작성하는 대신 이 변수를 확산하기만 하면 됩니다!paddingX는 동일하게 작동하지만 전달된 값과 함께 padding-left 및 padding-right를 반환합니다.

테마

위의 코드에서 사용자 지정 테마 개체를 사용한 것을 눈치채셨나요? 그러면 나중에 setTheme를 호출하기만 하면 흰색 및 어두운 테마를 몇 초 만에 구현할 수 있습니다. 그리고 가장 좋은 점은 테마 키에서 자동 완성을 얻을 수 있다는 것입니다!

NiftyCSS 에 대한 첫 번째 기사는 여기까지입니다. 읽어 주셔서 감사합니다.
이러한 기능에 대한 의견 아래에 자유롭게 의견을 말하고 GitHub 저장소(즐거우셨다면 별표 표시)를 방문하십시오: https://github.com/QuiiBz/niftycss