معرفی CSS-in-JS: تولید CSS از جاوا اسکریپت

CSS در جاوا اسکریپت چیست و چرا به طور ناگهانی محبوب می شود؟ نحوه عملکرد آن را بیاموزید و با برخی از فریمورک های پیشرو CSS-in-JS آشنا شوید.

• CSS در جاوا اسکریپت چیست؟
• CSS در سطح مؤلفه
• برنامه‌های یک صفحه در مقابل چند صفحه
• فریمورک‌های CSS-in-JS
• معایب استفاده از CSS در جاوا اسکریپت
• نتیجه‌گیری

ایده تولید CSS در جاوا اسکریپت در چند سال اخیر بیشتر به لطف تسلط چارچوب‌های واکنشی مانند React و Svelte محبوبیت بیشتری پیدا کرده است. چنین چارچوب هایی استفاده از جاوا اسکریپت را برای استایل دادن به مولفه ها اعمال نمی کنند، اما خود را به آن وام می دهند. در نتیجه، تعدادی از کتابخانه‌های CSS-in-JS برای آسان‌تر کردن فرآیند ارائه شده‌اند.

این مقاله شما را با CSS-in-JS آشنا می‌کند، سپس تعداد انگشت شماری از چارچوب‌های امیدوارکننده را برای پیاده‌سازی آن به نمایش می‌گذارد.

CSS در جاوا اسکریپت چیست؟

CSS قدیمی مدرسه اصولاً دو گزینه دارد: تعریف درون خطی و بارگیری از یک فایل خارجی. در هر دو مورد، مرورگر CSS را بارگذاری می‌کند، آن را تجزیه می‌کند، سپس استایل‌ها را روی نشانه‌گذاری اعمال می‌کند. CSS-in-JS رویکرد سومی را ارائه می‌کند: ارائه CSS با تولید برنامه‌ای آن در کد.

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

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

// Create a Title component that'll render an <h1> tag with some styles
const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

// Create a Wrapper component that'll render a <section> tag with some styles
const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

// Use Title and Wrapper like any other React component – except they're styled!
render(
  <Wrapper>
    <Title>
      Hello World!
    </Title>
  </Wrapper>
);

فهرست ۱ از چارچوب‌های styled-components گرفته شده است. هر چارچوب قراردادهای خاص خود را دارد، اما این مثال جنبه های اساسی هر سیستم را به شما نشان می دهد:

1. CSS را در نحو جاوا اسکریپت تعریف کنید.
2. سبک‌ها را در نشانه‌گذاری اعمال کنید (مانند JSX).

CSS سطح مؤلفه

سبک‌های کاربردی در مقیاس بزرگ معمولاً مستعد نفخ هستند. درک اینکه چه چیزی بر ویژگی‌های عناصر خاص در یک چیدمان بزرگ تأثیر می‌گذارد، می‌تواند بسیار چالش برانگیز باشد، و حتی ایجاد تغییرات به طور مؤثر دشوارتر است. این شکنندگی باعث می‌شود گاهی اوقات حفظ CSS به یک کار طاقت‌فرسا تبدیل شود.

CSS-in-JS این مشکل را با CSS با محدوده جزء برطرف می کند. تقریباً تمام چارچوب‌های جاوا اسکریپت مؤلفه‌گرا هستند، بنابراین تولید CSS که در محدوده آن مؤلفه‌ها قرار دارد، یک تناسب طبیعی است.

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

البته، برنامه‌ها هنوز باید بتوانند سبک‌ها را اعمال کنند و از آنها ارث ببرند. هر چارچوب CSS-in-JS که ارزشش را دارد باید این نگرانی را برطرف کند.

سبک ها نزدیک به جایی که استفاده می شوند وجود دارند

یکی دیگر از مزایای CSS-in-JS این است که سبک ها را می توان نزدیک به محل اعمال آنها تعریف کرد، اگرچه همه چارچوب های CSS-in-JS این ویژگی را ارائه نمی دهند. این یک امتیاز برای توسعه دهندگان است که کد را می نویسند و حفظ می کنند. قرار دادن قوانین سبک با ساختارهایی که از آنها استفاده می کنند باید درک آنچه در حال وقوع است را بسیار آسان تر کند. علاوه بر این، در زمان توسعه، عدم نیاز به جابجایی زمینه های مفهومی بین کد سطح مؤلفه و نشانه گذاری و شیوه نامه های سطح جهانی یک پیروزی بزرگ است. این چیزی شبیه بهترین بی واسطه بودن CSS درون خطی و ترکیب پذیری سبک های وارداتی است.

برنامه های تک صفحه ای در مقابل چند صفحه ای

اخیراً، در مورد برنامه‌های تک صفحه‌ای در مقابل برنامه‌های چند صفحه‌ای غوغای زیادی وجود داشته است. به ویژه، سؤالاتی در مورد اینکه کدام بخش از یک برنامه می‌تواند کاملاً پویا باشد، کدام بخش را می‌توان از قبل رندر کرد، و کدام بخش به مقداری از هر دو نیاز دارد، وجود دارد. نکته اصلی برای CSS-in-JS این است که سبک‌ها باید هر جا که لازم است تولید شوند. روی سرور یا کلاینت باشد. خوشبختانه، به نظر می رسد موردی برای اکثر چارچوب ها.

است

فریم ورک های CSS-in-JS

اولین چیزی که هنگام در نظر گرفتن پیاده سازی CSS-in-JS پیدا می کنید، تعداد گزینه های موجود است. بهترین انتخاب شما، قبل از هر چیز، با چارچوب جاوا اسکریپتی که استفاده می‌کنید، مشخص می‌شود. برخی از راه حل های CSS-in-JS مختص یک چارچوب واکنشی خاص هستند، در حالی که برخی دیگر آگنوستیک هستند. حتی در میان کتابخانه‌های CSS-in-JS با چارچوب آگنوستیک، اغلب تمایلی به یک چارچوب خاص وجود دارد. بنابراین، ارزش این را دارد که در نظر بگیرید کدام راه حل CSS-in-JS در جامعه ای که از چارچوب مورد استفاده شما پشتیبانی می کند، محبوب است.

یکی دیگر از ویژگی‌هایی که باید در هنگام ارزیابی چارچوب‌ها در نظر گرفت، پشتیبانی از TypeScript است. همه فریم ورک‌های CSS-in-JS با TypeScript کار نمی‌کنند، اگرچه این امر در حال تبدیل شدن به حالت عادی است.

بیایید به برخی از چارچوب‌های بهتر موجود نگاهی بیندازیم.

Styled-components

Styled-components یکی از طولانی‌ترین چارچوب‌های CSS-in-JS است. این برای React طراحی شده است (اگرچه تلاش هایی برای استفاده از آن در جاهای دیگر وجود دارد) و در درجه اول به طراحی اجزای React مربوط می شود. کاملاً فعال و محبوب است و بیش از ۳۷۰۰۰ ستاره در GitHub دارد.

نمونه‌ای از مؤلفه‌های سبک‌دهی شده را در فهرست ۱ مشاهده کردید.

احساس

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

import { css, cx } from '@emotion/css'

const color = 'white'

render(
  <div
    className={css`
      padding: 32px;
      background-color: hotpink;
      font-size: 24px;
      border-radius: 4px;
      &:hover {
        color: ${color};
      }
    `}
  >
    Hover to change color.
  </div>
)

JSX سبک

Styled JSX راه‌حل پیش‌فرض CSS-in-JS برای Next.js است که متأسفانه اینرسی خاصی به آن می دهد. این یک پروژه Git سالم است، با بیش از ۷۰۰۰ ستاره، اما به اندازه برخی از پروژه های دیگر که در اینجا توضیح داده شده است فعال نیست (یک شاخه v2 که به نظر می رسد خاموش شده است).

JSX Styled یک انتخاب واضح هنگام استفاده از Next.js است، اما در صورت تمایل می توان آن را در یک کتابخانه دیگر CSS-in-JS سازگار با React تعویض کرد.

ماژول های CSS

ماژول‌های CSS پیاده‌سازی اولیه و تأثیرگذار ایده CSS-in-JS است. . پروژه GitHub بیش از ۱۶۰۰۰ ستاره دارد، اما چندین سال است که به روز نشده است. این چارچوب-آگنوستیک است و می تواند در بسیاری از کتابخانه های واکنشی محبوب ادغام شود. برای مثال، اینجا با Vue است.

ماژول‌های CSS به عنوان یک راه‌حل کلی در نظر گرفته شده است که کار می‌کند خارج از یک سیستم اجزای چارچوب، برای ایجاد سبک های محلی به صورت پیش فرض. توجه داشته باشید که اگرچه ماژول‌های CSS مانند یک مشخصات رسمی به نظر می‌رسند، اما واقعاً اینطور نیست – این یک پروژه با برداشتی خاص در مورد چگونگی دستیابی به CSS-in-JS است.

دوقلو

CSS Tailwind یک کتابخانه CSS عملکردی است. در میان توسعه دهندگان جاوا اسکریپت چیزی بسیار دوست داشتنی است، بنابراین اجتناب ناپذیر است که با رویکرد CSS-in-JS متحد شود. Twin Tailwind را با CSS-in-JS ترکیب می کند.

Twin به ما امکان می دهد از کلاس های Tailwind در چندین پیاده سازی CSS-in-JS استفاده کنیم، همانطور که در اینجا. این یک پروژه فعال و در حال رشد است، با بیش از ۶۰۰۰ ستاره در GitHub.

Twin دارای نمونه‌های مختلف آن را با انواع فریمورک ها و ابزارهای ساخت ترکیب کنید. به عنوان مثال، در اینجا نحوه ترکیب آن با Emotion از طریق Webpack آمده است. .

JSS

JSS یک رویکرد چارچوب-آگنوستیک با بیش از ۶۰۰۰ ستاره GitHub. به نظر می رسد بسیار محبوب است و مستندات خوبی دارد، اگرچه اخیراً فعالیت زیادی در مخزن مشاهده نکرده است. JSS یکی از قدیمی‌ترین راه‌حل‌های فعال CSS-in-JS است و از برخی جهات مولد این جنبش است.

زاویه ای

Angular، مانند بسیاری از چارچوب‌های Reactive، از CSS در سطح مؤلفه پشتیبانی می‌کند. سیستم Angular نسبتاً قدرتمند و منعطف است و ویژگی‌های مشابهی با کتابخانه‌های دیگر دارد. این با فلسفه طراحی یکپارچه Angular مطابقت دارد و به نظر می رسد رایج ترین رویکرد در استفاده از Angular باشد. با این حال، ممکن است از CSS- استفاده کنید. چارچوب in-JS مانند JSS.

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

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

اما مقاله در مورد مزایای CSS-in-JS که در این مقاله به آن پرداخته ام نیز واضح است. بنابراین، راه حل این نیست که CSS-in-JS را رد کنید، بلکه راهی برای به دست آوردن مزایا و در عین حال به حداقل رساندن معایب پیدا کنید. این مقاله انواع راه‌حل‌های ممکن برای چالش‌های عملکرد CSS-in-JS را مورد بحث قرار می‌دهد.

مثل همه چیز در نرم افزار، جامعه به دنبال ایده های بهتر است. اکنون، ما به دنبال راه‌هایی برای حفظ مزایای CSS-in-JS و در عین حال به حداقل رساندن جنبه‌های منفی هستیم.

نتیجه گیری

استفاده از چارچوب CSS-in-JS همیشه ضروری نیست، اما می تواند مزایای عمده ای نسبت به استفاده از CSS مستقیم یا پیش پردازنده CSS به تنهایی ارائه دهد. با انواع راه حل ها برای انتخاب، باید بتوان راه حلی را پیدا کرد که متناسب با پشته مورد علاقه شما باشد. علاوه بر این، احتمالاً در پروژه‌های موجود با این چارچوب‌ها مواجه خواهید شد، بنابراین دانستن اینکه آنها چیستند و چگونه کار می‌کنند مفید است.