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

دسته بندی محصولات

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

1397/09/15 48
CSS , 4.3 از 16 رای

این مقاله درباره ی اجزای طراحی در برنامه های کامپیوتری نوشته شده است. اطلاعاتی درباره ی اجزای طراحی و برنامه های جاوا اسکریپت در این مقاله درج شده است

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

9 CSS در کتابخانه های JS که باید در سال 2018 بدانید.

نوعی از بهترین CSS در کتابخانه های جاوا اسکریپت برای استفاده در برنامه شما.

"اجزای طراحی" یکی از جالب ترین بحث های اخیر در جامعه است. مفاهیم مختلف از CSS درون خطی تا Sass، کمتر و خیلی بیشتر گسترش می یابد.

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

با انتشار پروژه ی مشهور اجزای طراحی توسط مکس استویبر، امروزه این مفهوم بیشتر از همیشه جریان اصلی است.

بنابر این، ما برای کمک به شما در غور کردن در آن و امتحان نمودن آن برای خودتان، بعضی از کتابخانه های سودمند برای استفاده از CSS در جاوا اسکریپت به منظور طراحی کردن اجزای خودتان را فهرست کرده ایم.

نکته:  ما از Bit برای سازماندهی اجزای سازنده مان به کاتالوگ دیداری، به اشتراک گذاری آنها به عنوان یک تیم و همگام سازی آنها در پروژه های مختلفمان استفاده کردیم.

این کار همچنین به ما اجازه می دهد که اجزای طراحی از اجزای دیگر استفاده کنند، که بسیار جذاب است. آن را امتحان کنید.

شما می توانید این بحث توصیه شده را بخوانید تا به شما در گرفتن یک تصمیم خوب کمک کند، و یک مقایسه خیلی جالب از پروژه ها در اینجاست. موفق باشید!

1.اجزای طراحی شده

ایده متولد شده در یک بار ویسکی استرالیایی تبدیل به یک پروژه  18K ستاره  گردید که به طور گسترده در جامعه پذیرفته شد.

اجزای طراحی شده با تعریف اجزای طراحی شده همراه با طرح های محافظت شده بدون طبقات CSS به عنوان یک لایه ی میانجی  باعث می شود استفاده از CSS در اجزای واکنش آسان تر شود.

اجزای طراحی شده به وسیله ی تعریف اجزا با استفاده از نماد لفظی الگوی ES6 ایجاد می شوند. ویژگی های CSS را می توان به جزء، به عنوان [ویژگی های] مورد نیاز، اضافه کرد؛ درست همانگونه که شما به طور معمول با استفاده از CSS این کار را انجام می دهید.

وقتی JS تجزیه می شود، اجزای طراحی نام طبقات منحصر به فرد را پدید می آورند و CSS را به DOM تزریق می کنند. شما می توانید با این سخن عالی ماکس استویبر را بیشتر بیاموزید.

نکته: اجزای طراحی شده می توانند با Bit نیز ترکیب شوند، تا آنها را بین اپلیکیشن ها منتشر کنند و در یک زمین بازی دیداری توسعه دهند. نگاهی بیاندازید.

همچنین بررسی کنید: Stylable توسط Wix-Eng که هنوز در حال توسعه است.

2. رادیوم

در ستاره های 6.5K و ایجاد شده توسط آزمایشگاه های نیرومند FormidableLabs ، رادیوم به عنوان "ابزار زنجیره ای برای طراحی جزء واکنش" تعریف شده است. مجموعه ای از ابزارهای مدیریت طراحی های درون خطی با CSS بدون واکنش است.

رادیوم یک رابط استاندارد است و استخراج ها را برای ارتباط با ویژگی های CSS فراهم می کند که طراحی های درون خطی را به راحتی همساز نمی کنند.

رادیوم به شما اجازه می دهد که طراحی های خود را با اجزای واکنش، جاوا اسکریپت، HTML خود ترکیب کنید و با هم دیگر طراحی نمایید. آن همچنین رندر مبتنی بر پایه ها را فراهم می کند که به شما اجازه می دهد اجزای طراحی خود را براساس وضعیت برنامه خود تنظیم کنید.

3. آفرودیت

 

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

در ستاره های 4K، این پروژه  بدون واکنش کار می کند و امکانات تزریق طراحی به Dom، سبک های پیشوند خودکار و بیشتر، همه در اندازه نسبتا کوچک 20k و تعداد انگشت شماری از وابستگی ها را فراهم می کند.

در اینجا یک آفرودیت مفید در مقابل محدودیت رادیومی وجود دارد.

4. ایموشن

در K4.2 ستاره، ایموشن یک کتابخانه CSS-in-JS سازنده و قابل انعطاف است که به شما امکان طراحی برنامه ها را با رشته کردن یا هدف قرار دادن طرح ها می دهد. این ترکیب قابل پیش بینی برای جلوگیری از مسائل خاص با CSS است.

بر اساس کتابخانه گلم و فلسفه آن، ایده این است که در هنگام نوشتن CSS با استفاده از تجزیه طراحی  با بابل و پست CSS، عملکرد اجرای حین رانش حفظ شود.

زمان اجرای هسته ای 2.3 کیلوبایت است و با پشتیبانی واکنش، 4 کیلوبایت است. احساس به واکنش محدود نیست.

5. گلمرس

توجه: پروژه دیگر فعالانه حفظ نمی شود! هرچند هنوز خنک است!

در ستاره های 3.6K PayPal Glamorous برای ساخت "CSS قابل نگهداری با واکنش" گرایش یافته است که الهام گرفته از اجزای طراحی و jsxtyle است. کنت سی دادز، پروژه را به عنوان "طراحی جزء واکنش حل شده با یک API ظریف  (الهام گرفته)، رد پای کوچک (کمتر از 5 کیلوبایتgzipped)، و عملکرد عالی (از طریق گلمرس) تعریف می کند. این یک API بسیار شبیه به اجزای طراحی شده است و از ابزارهای مشابه زیر صداپوش را استفاده می کند.

6. گلمر

 

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

در اینجا یک مقدمه کوتاه API ، مقایسه تکنیک های CSS در گلمر و یک آموزش مفید گلمر با Gatsby بیان شده است.

همچنین بررسی کنید: گلم Glam(هنوز تحت کار است)

7. فلا

<FelaComponent
  style={{
    backgroundColor: 'blue',
    color: 'red'
  }}
  render={({ className, theme }) => (
    <div className={className}>I am red on blue.</div>
  )}
/>

فلا یک پروژه ی ساخته شده برای طراحی  مبتنی بر وضعیت در جاوا اسکریپت با تأکید بر سه چیز است:

پویا ساختن طراحی به صورت پیش فرض، آگنوستیک چارچوبی (اتصال دهنده ها برای واکنش) و اجرایی بودن آن در طراحی پویاست و طرح ها را بسته به وضعیت برنامه ی شما ارائه می دهد. این ابزار CSS اتمی را تولید می کند و همه ی ویژگی های رایج CSS، مانند جستار های رسانه ای، طبقات ساختگی، قاب های کلیدی و نمای فونت ها را پشتیبانی می کند. می توان آن را با هر کتابخانه، از جمله بومی واکنشی استفاده کرد. شما می توانید اطلاعات بیشتر در مورد ویژگی های V6 را در اینجا بخوانید.

8. استیلرتون

در 2500 ستاره استیلرتون یک "جعبه ابزار برای طراحی جزء گرا" است. استیلرتون از اجزای تک عنصری مستقل از وضعیت می باشد که به عنوان پایه ی طراحی اولیه با خطوط اتصال پایه برای طراحی پویا یا شرطی، و ترکیبی از طراحی ها به وسیله ی اهداف جاوا اسکریپت (تایپ شده) بدون ابزار اضافه پشتیبانی می کند. (مانند وب پک لاودرز، بابل پلاگینز و غیره.) آن همچنین درباره ی شکل اهداف طراحی غیر قابل اعتماد است. شما می توانید درباره ی این رشته ی HN جالب بیشتر بیاموزید.

9. JSS

JSS انتزاعی بر روی CSS است که از جاوا اسکریپت برای توصیف طراحی ها در یک شیوه ی اعلانی و قابل نگهداری استفاده می کند. این یک JS با کارایی بالا برای همگردان CSS است که در زمان اجرا و سمت سرور کار می کند.

این کتابخانه هسته ای سطح پایین و آگنوستیک چارچوبی است و حدود 6 کیلوبایت و به صورت خرد و gzip شده می باشد. این کتابخانه همچنین می تواند از طریق افزونه های API گسترش یابد. در اینجا یک آموزش خوب برای تبدیل SCSS  بیان شده است. همچنین می توانید React-JSS، ادغامJSS برای واکنش را نیز بررسی کنید.

 

4.3 از 16 رای

نویسنده : تم شاپ

بزرگترین مرجع خرید و فروش قالب های حرفه ای

اگر می‌خواهید مقالات ویژه ما و قالب های رایگان را در ایمیل خود داشته باشید ، همین الان ایمیل خود را در کادر زیر وارد کنید:

تعداد اعضای خانواده تم شاپ 3084 نفر

نظرات کاربران

0 نظر

درج نظر مخصوص اعضای سایت می باشد .

9 CSS در کتابخانه های JS که باید در سال 2018 بدانید بازبینی شده توسط تم شاپ در 12/6/2018. 9 CSS در کتابخانه های JS که باید در سال 2018 بدانید این مقاله درباره ی اجزای طراحی در برنامه های کامپیوتری نوشته شده است. اطلاعاتی درباره ی اجزای طراحی و برنامه های جاوا اسکریپت در این مقاله درج شده است رتبه : 4.3