Stylify.dev. 유창하고 신속한 개발을 위한 동적 CSS 생성기.

Stylify은 작성한 내용을 기반으로 CSS를 동적으로 생성하는 라이브러리입니다. HTML을 작성합니다. CSS를 가져옵니다. 🚀

이야기를 해줄게

최근에는 여러 프로젝트를 진행하고 있습니다. 한 프로젝트는 Bootstrap을 사용하고 두 번째 프로젝트는 Tailwind를 사용하며 자체 유틸리티 및 구성 요소 클래스가 있는 다른 바닐라 CSS를 사용합니다.

이러한 도구가 훌륭하고 접근 방식이 "나쁘지"않더라도 클래스, 구성, 선택기를 다시 배우고 기억하는 것은 단순히 귀찮고 시간 소모적입니다. 속삭이는 수업을 위한 IDE 플러그인은 때때로 순수한 절망으로 다가옵니다.

나는 개발자들이 이미 알고 있는 자연 CSS 속성과 그 값을 선택자로 사용하는 프레임워크나 라이브러리가 없는 이유를 스스로에게 여러 번 질문했습니다. 예, 선택자는 조금 더 길어질 수 있지만 그것을 사용하기 위해 공부할 것은 없을 것입니다.

찾을 수 없었기 때문에 직접 만들었습니다.

아이디어에서 프로젝트로

1년의 개발 기간을 거쳐 드디어 첫 번째 버전을 출시하게 되었습니다🎉.
Stylify은 Chrome, Mozilla, Opera, Safari and Edge의 678개(아마도 모든) CSS 속성과 일치할 수 있는 Native Preset과 함께 제공되는 라이브러리입니다. 크기는 28kB 미만입니다.

구문은 간단합니다: cssProperty:value 그리고 화면과 의사 클래스가 필요한 경우 screen:pseudoClass:property:value .

실제로 Stylify의 사용법은 다음과 같습니다.

<div class="font-size:24px hover:color:red md:font-size:48px">
    Hello World!
</div>
<script src="https://cdn.jsdelivr.net/npm/@stylify/stylify@latest/dist/stylify.native.min.js"></script>

일부 값에는 공백과 따옴표가 포함될 수 있으므로 특수 구문을 추가하기로 결정했습니다. 선택기를 작성할 때 해당 값에는 공백이 포함되어야 하며 __(밑줄 2개) 및 따옴표^(모자)를 사용할 수 있습니다.

이를 통해 다음과 같은 선택기를 작성할 수 있습니다.

<div class="
 border:12px__solid__steelblue 
 font-family:^Arial^,__sans-serif
">
  Hello World!
</div>

컴파일되고 맹글링되면 다음 CSS가 생성됩니다.

._nmed{
 border:12px solid steelblue
}
._l4hja{
 font-family:'Arial', sans-serif
}

또 다른 기능

Dynamic selectors : 매크로를 정의하고 원하는 대로 사용하십시오 width:240px , width:10% , width:30rem .

Dynamic screens : || 및 && => sm&&tolg:font-size:48px xl&&dark:color:rgba(200,200,200,0.5) 와 같은 논리 피연산자를 사용하여 화면을 결합하고 원하는 값을 사용할 수 있습니다 minw123px:font-size:24px .

선택기 맹글링: Stylify는 긴 선택기transition:color__0.3s__ease-in-out를 _abc123로 변환할 수 있습니다.

CSS 분할: CSS는 각 파일에 대해 별도로 생성할 수 있습니다. 덕분에 예를 들어 페이지 및 레이아웃에 대해 CSS를 분할할 수 있습니다.

Components : 예를 들어 button와 같은 종속성이 있는 background:#000 color:#fff padding:24px를 정의하고 전체 프로젝트에서 사용합니다.

Variables : 반복 값에 대한 변수를 정의합니다. CSS 변수로 코드에 삽입할 수 있습니다.

Plain selectors : article > h1 와 같은 선택기의 스타일을 지정할 수 있습니다.

Helpers : 단위 재계산 등을 위해 CSS를 생성할 때 사용할 수 있습니다.

원활한 통합

Stylify는 Next.js , Nuxt.js , Vite.js , Symfony Framework , Nette Framework , Laravel 등과 같은 프레임워크에 쉽게 통합될 수 있습니다. 또한 Webpack 및 (6)65와 함께 잘 작동합니다.

보다 쉬운 통합을 위해 Nuxt.js용 Rollup.js과 이미 언급한 Rollup.js 및 Webpack 또는 다른 도구와 함께 사용할 수 있는 @stylify/nuxt-module이 있습니다.

기존 프로젝트에 통합할 때 크기를 늘리거나 손상시키지 않고 각 페이지에 대해 개별적으로(작은 구성 요소의 경우에도) 및 @stylify/bundlerslowly rewrite the website CSS를 생성할 수 있습니다.

당신이 무슨 생각을하는지 제게 알려주세요!

귀하try Stylify가 Stylify를 더 좋게 만들고 다음 프로젝트에서 작업할 때 개발자에게 더 유용할 수 있는 (긍정적 및 부정적) 피드백이나 아이디어를 알려주시면 매우 기쁠 것입니다.