Stylify.dev. 유창하고 신속한 개발을 위한 동적 CSS 생성기.
6081 단어 cssjavascriptwebdevproductivity
이야기를 해줄게
최근에는 여러 프로젝트를 진행하고 있습니다. 한 프로젝트는 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를 더 좋게 만들고 다음 프로젝트에서 작업할 때 개발자에게 더 유용할 수 있는 (긍정적 및 부정적) 피드백이나 아이디어를 알려주시면 매우 기쁠 것입니다.
Reference
이 문제에 관하여(Stylify.dev. 유창하고 신속한 개발을 위한 동적 CSS 생성기.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://dev.to/machy8/stylifydev-dynamic-css-generator-1cbe텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)