9 کتابخانه CSS در JS که باید بشناسید

گردآوری و تالیف : عرفان کاکایی
تاریخ انتشار : 27 مرداد 1397
دسته بندی ها : css , جاوا اسکریپت

یکی از مفاهیم جالب، استفاده از JavaScript در CSS برای چکیده‌سازی CSS تا حد سطح خود کامپوننت، با استفاده از JavaScript برای تعریف استایل‌ها به یک روش قابل نگهداری است. پس در اینجا، چند پروژه پر کاربرد را برای شما لیست کرده‌ایم.

1. Styled components

ایده‌ای که در یک کافی‌شاپ در استرالیا به ذهن یک فرد رسید، تبدیل به پرو‌ژه‌ای با 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ها گسترش داده شود.

موارد دیگر که بهتر است بشناسید:

منبع

مقالات پیشنهادی

15 کتابخانه جالب javascript و css بهمن ۹۵

ماموریت ما در راکت این است که شما را بر اساس تکنولوژی روز طراحی وب به روز نگه داریم . به همین خاطر هم هست که ما تقریبا ماهانه یا چند هفته در میان پستی...

15 کتابخانه جالب javascript و css فروردین ۹۶

ماموریت ما در راکت این است که شما را بر اساس تکنولوژی روز طراحی وب به روز نگه داریم . به همین خاطر هم هست که ما تقریبا ماهانه یا چند هفته در میان پستی...

10 کتابخانه جذاب برای CSS و JavaScript در تیر ۱۳۹۶

در این مطلب کتابخانه جذاب برای CSS و JavaScript در تیر ۱۳۹۶ رو مشاهده میکنید که با استفاده از اون ها میتونید کارهای مختلفی با css و js انجام بدید که ک...

15 کتابخانه جالب javascript و css دی ۹۵

ماموریت ما در راکت این است که شما را بر اساس تکنولوژی روز طراحی وب به روز نگه داریم . به همین خاطر هم هست که ما تقریبا ماهانه یا چند هفته در میان پستی...