یکی از مفاهیم جالب، استفاده از JavaScript در CSS برای چکیده‌سازی CSS تا حد سطح خود کامپوننت، با استفاده از JavaScript برای تعریف استایل‌ها به یک روش قابل نگهداری است. پس در اینجا، چند پروژه پر کاربرد را برای شما لیست کرده‌ایم.
ایده‌ای که در یک کافی‌شاپ در استرالیا به ذهن یک فرد رسید، تبدیل به پروژهای با 18 هزار ستاره، که به خوبی در جامعه جا افتاده است شد. Styled-components با تعریف استایل‌های بسته‌بندی شده بدون کلاس‌های CSS، استفاده از CSS در کامپوننت‌های React را آسان‌تر می‌کند.
این کتابخانه، (کامپوننت‌های استایل‌بندی شده) با تعریف کامپوننت‌ها با استفاده از الگوهای ES6 و نشانه‌گذاری لفظی ساخته شده است. ویژگی‌های CSS می‌توانند به طور طبیعی در استفاده از CSS، طبق نیاز، به کامپوننت‌ها اضافه شوند. وقتی که جاوااسکریپت Parse می‌شود، Styled-components نام‌های کلاس خاصی می‌سازد، و CSS را به DOM اعمال می‌کند.
2. Radium
Radium که دارای ۶ هزار و ۵۰۰ ستاره است و توسط FormidableLabs ساخته شده است، به این صورت تعریف شده است: «ابزاری برای استایل‌بندی کامپوننت‌های React». Radium مجموعه‌ای از ابزار برای مدیریت استایل‌های خطی با استفاده از React بدون CSS است. Radium رابطی استاندارد، و نوعی چکیده‌سازی برای مدیریت امکانات CSS دارد، که استایل‌های خطی به راحتی نمی‌توانند با آن تطبیق پیدا کنند.
Radium شما را قادر می‌سازد تا کامپوننت‌های React خود را به هم متصل کرده، و JavaScript، HTML و استایل‌بندی‌های خود را با هم جفت کنید. همچنین قابلیت رندر کردن بر پایه ویژگی‌ها را دارد، که شما را قادر می‌سازد تا کامپوننت‌های خود را بر پایه state برنامه خود استایل‌بندی کنید.
3. Aphrodite
Aphrodite یک کتابخانه CSS در JavaScript با پشتیبانی رندر کردن سمت سرور، و مولد CSS است. Aphrodite هر چیزی را به کلاس‌های CSS تغییر شکل می‌دهد و از صفت class استفاده می‌کند.
این پروژه با داشتن ۴ هزار ستاره، چه با و یا چه بدون React کار می‌کند و امکاناتی مانند تزریق استایل به DOM را فراهم می‌کند. همه این امکانات، ۲۰ کیلوبایت حجم داشته و نیازمند تعدادی Dependency هستند.
4. Emotion
Emotion با داشتن ۴ هزار و ۲۰۰ ستاره، یک کتابخانه CSS در JavaScript منعطف است که شما را قادر می‌سازد تا برنامه‌ها را با استفاده از رشته یا استایل آبجکت، استایل‌بندی کنید. این کتابخانه، ترکیب‌بندی‌های قابل پیش‌بینی‌ای برای جلوگیری از مشکلات اختصاصی در CSS دارد. این کتابخانه بر پایه کتابخانه glam ساخته شده است، و حفظ کارایی در هنگام نوشتن CSS با parse کردن استایل‌ها با استفاده از babel و PostCSS را مد نظر دارد. حجم اصلی آن 2.3 کیلوبایت بوده، و حجم نسخه دارای پشتیبانی React آن ۴ کیلوبات است. Emotion به React محدود نمی‌شود.
5. Glamorous
Glamorous با داشتن ۳ هزار و ۶۰۰ ستاره، در جهت داشتن یک CSS قابل نگهداری به همراه React ساخته شد، که از styled-components و jsxtyle الهام گرفته شده بود. سازنده آن، این کتابخانه را به این صورت تعریف کرد: « استایل‌بندی کامپوننت‌های React، با یک API برازنده و کارایی بالا» این کتابخانه API مشابهی به styled-components دارد و از ابزار مشابهی استفاده می‌کند.
6. Glamor
Glamor کاملا کم حجم و موثر است. این ابزار شما را قادر می‌سازد تا در کامپوننت‌های خود با استفاده از سینتکس مشابه Object CSS که React برای ویژگی style پشتیبانی می‌کند، استایل‌بندی‌های CSS را به صورت خطی اعمال کنید. این کتابخانه سریع، موثر، بدون نیاز به فریم‌وورک، سمت سرور، و دارای رندر کردن استاتیک است.
7. Fela
<FelaComponent
style={{
backgroundColor: 'blue',
color: 'red'
}}
render={({ className, theme }) => (
<div className={className}>I am red on blue.</div>
)}
/>
Fela پروژهای است که برای استایل‌بندی‌های بر پایه State در JavaScript ساخته شده است، و بر روی سه چیز تاکید دارد: به طور پیشفرض، استایل‌بندی‌های دینامیک باشند، framework-agnostic باشند، و کارایی بالایی داشته باشند. این کتابخانه به طور دینامیک طراحی شده است و استایل‌ها را بر پایه state برنامه شما رندر می‌کند. Fela از تمام امکانات CSS مانند کوئری‌های چند رسانه‌ای، کلاس‌های pseudo، keyframeها و font-faceها پشتیبانی می‌کند. این کتابخانه می‌تواند به همراه هر کتابخانه view مانند React Native استفاده شود.
8. Styletron
Styletron جعبه ابزاری برای استایل‌بندی با گرایش به کامپوننت، دارای 2500 ستاره است. Styletron از کامپوننت‌های استایل‌بندی شده بدون state و تک عنصری پشتیبانی می‌کند. این جعبه ابزار، رابطی برای استایل‌بندی شرطی / دینامیک دارد.
9. JSS
JSS، چکیده‌ای از CSS است که از JavaScript برای تعریف استایل‌ها به روشی قابل نگهداری استفاده می‌کند. JSS یک کمپایلر JavaScript به CSS با کارایی بالا است که در سمت سرور نیز کار می‌کند. این کتابخانه سطح پایین و framework agnostic است، و تنها ۶ کلیوبایت حجم دارد. همچنین می‌تواند با استفاده از APIها گسترش داده شود.
موارد دیگر که بهتر است بشناسید:
- React-css-modules
لینک:
https://github.com/gajus/react-css-modules - Babel-plugin-css-in-js
لینک:
https://github.com/martinandert/babel-plugin-css-in-js - linaria
لینک:
https://github.com/callstack/linaria - typestyle
لینک:
https://github.com/typestyle/typestyle - freestyler
لینک:
https://github.com/streamich/freestyler - react-with-styles
لینک:
https://github.com/airbnb/react-with-styles - jsxstyle
لینک:
https://github.com/jsxstyle/jsxstyle
دیدگاه و پرسش
در حال دریافت نظرات از سرور، لطفا منتظر بمانید
در حال دریافت نظرات از سرور، لطفا منتظر بمانید