کد نویسی برنامه های Faster React: نحوه مهاجرت از Emotion CSS-in-JS به Stylify Utility-First CSS

به دنبال راه بهتری برای مدیریت CSS خود در React هستید؟ بیاموزید که چگونه از Emotion CSS-in-JS به رویکرد اول ابزار کاربردی Stylify CSS مهاجرت کنید و گردش کار توسعه خود را ساده کنید.

می توانید نمونه های موجود در این مقاله را در Playground On Stackblitz امتحان کنید.

💎 مقدمه

Stylify کتابخانه‌ای است که از انتخابگرهای شبیه به CSS برای تولید CSS بهینه‌سازی شده بر اساس آنچه می‌نویسید استفاده می‌کند.

امکانات:
✅ ساخت ماژول. بدون اسکریپت زمان اجرا
✅ انتخابگرهای شبیه CSS
✅ بدون چارچوب برای مطالعه
✅ زمان کمتری که در اسناد صرف می شود
✅ CSS مخدوش و بسیار کوچک
✅ بدون نیاز به پاکسازی CSS
✅ مولفه ها، متغیرها، انتخابگرهای سفارشی
✅ می تواند چندین بسته CSS ایجاد کند

🔗 اجزاء

در Emotion، اجزاء اغلب به این صورت تعریف می شوند:

const Title = styled.h1`
  color: blue 
  font-weight: bold
  @media (max-width: 640px) {
    color:red
  }
`;
<Title>Hello World!🎉</Title>

Stylify ویژگی مشابهی را ارائه می دهد. کامپوننت‌ها را می‌توان در یک فایل (با استفاده از گزینه‌های محتوا)، جایی که از آنها استفاده می‌شود، یا به صورت سراسری در یک پیکربندی تعریف کرد.

به عنوان مثال با پیکربندی در یک فایل. محتوای بین stylify-components از شی جاوا اسکریپت بدون براکت های اطراف انتظار می رود:

<!-- 
stylify-components
  title: 'color:blue font-weight:bold md:color:red'
/stylify-components
-->
<h1 class="title"></h1>

مثال در یک پیکربندی کامپایلر جهانی:

const compilerConfig = {
  title: 'color:blue font-weight:bold md:color:red'
};

استفاده:

<h1 class="title"></h1>

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

خروجی CSS تولیدی در تولید چیزی شبیه به این خواهد بود:

.a,.d {color:blue}
.b,.d {font-weight:bold}
 @media (max-width: 768px) {
 .c,.d {color:red}
 }

خروجی html:

<h1 class="d"></h1>

🎯 انتخاب کننده ها

در Emotion، می توانید از CSS prop برای استایل دادن به عنصر مستقیماً به این صورت استفاده کنید:

<div css={css`
  color: blue;
  font-weight: bold;
  @media (min-width: 640px) {
    color: red;
  }
`}></div>

Stylify به شما امکان می دهد از برنامه های کاربردی مستقیماً در محتوا استفاده کنید. بنابراین مثال بالا را می توان به این شکل بازگرداند:

<div className="color:blue font-weight:bold md:color:red"></div>

خروجی تولید CSS مشابه نمونه کامپوننت ها خواهد بود. اما HTML به شکل زیر خواهد بود:

<div className="a b c"></div>

🌐 سبک های جهانی

گاهی اوقات لازم است برخی از قسمت های برنامه را به صورت سراسری استایل کنیم. برای انجام این کار در Emotion، باید از مؤلفه Global استفاده کنیم:

<Global
  styles={css`
    .some-class {
      color: hotpink !important;
    }
  `}
/>

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

مثال با ویژگی class:

<div className="[.button_.icon]{font-size:14px}">
  <button className="
    [.icon]{color:#fff;border-radius:12px}
    [&+button]{margin-left:24px}
  ">
    <i className="icon"></i>
  </button>
  <button></button>
<div>

الگوی نحوی در ویژگی class به شکل زیر است:

[css selectors]{stylify selectors split by ;}

را _ (زیر خط) هم در انتخابگرهای CSS و Stylify و هم به جای فاصله استفاده می شود & کاراکتر همیشه به عنصر فعلی اشاره دارد.

کد مشابه اما در پیکربندی جهانی به شکل زیر است:

const compilerConfig = {
  customSelectors: {
    '.buttons-wrapper .button .icon': 'font-size:14px',
    '.button': `
       .icon { color:#fff border-radius:12px }
       & + button { margin-left:24px }
    `,
  }
}

هنگام تعریف customSelectors در پیکربندی جهانی، نحو به شما امکان می دهد از یک ویژگی تودرتو استفاده کنید. را & کاراکترها به سطح بالایی اشاره دارند.

استفاده از پیکربندی جهانی:

<div className="buttons-wrapper">
  <button className="button">
    <i className="icon"></i>
  </button>
  <button></button>
<div>

💲متغیرها

زمانی که باید رنگی را با استفاده از props به کامپوننت منتقل کنید، به جای انجام این کار color: ${props => props.textColor};، می توانید از متغیرهای CSS بومی استفاده کنید:

<div 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">
</div>

فقط باید به Stylify بگوییم که متغیرها را به جای مقدارشان با متغیرهای CSS جایگزین کند و این localTextColor خارجی است:

const compilerConfig = {
  replaceVariablesByCssVariables: true,
  externalVariables: ['localTextColor']
}

متغیر خارجی نیز فقط در فایلی که در آن استفاده می شود قابل تعریف است:

<!-- 
stylify-externalVariables
  localTextColor
/stylify-externalVariables
-->
<div 
  style={{ '--localTextColor': props.textColor }}
  className="title color:$localTextColor"
">

Stylify همچنین گزینه ای برای پیکربندی متغیرهای سفارشی. این کار را می توان در فایلی که در آن استفاده می شود، به همان روشی که کامپوننت ها یا در پیکربندی جهانی انجام می دهند:

در پرونده:

<!-- 
stylify-variables
  primary: '#000',
  secondary: '#444'
/stylify-variables
-->
<div class="color:primary"></div>

در پیکربندی کامپایلر:

const compilerConfig = {
  primary: '#000'
}

📦 تقسیم CSS

Emotion CSS را به طور خودکار تقسیم می کند و آن را مستقیماً بر اساس اجزای رندر شده به سند تزریق می کند.

Stylify هیچ اسکریپت زمان اجرا ندارد، بنابراین باید Bundler و splitting را به صورت دستی پیکربندی کنید.

با این حال، خروجی Stylify آنقدر کوچک است (حتی می تواند 10 کیلوبایت (گزیپ شده) برای یک وب سایت بزرگ باشد)، که داشتن تنها یک بسته برای کل پروژه مشکلی ندارد. در نهایت، در آنجا می توانید نکات مربوط به تقسیم بسته های CSS را بررسی کنید.

مثال پیکربندی باندل:

const bundles = [
  { 
     outputFile: 'path/to/layout.css', 
     files: ['path/to/layout.jsx'] 
  },

  // Bundler uses https://npmjs.com/package/fast-glob
  // You can use its glob syntax
  { 
     outputFile: 'path/to/global.css', 
     files: ['path/**/*.jsx'] 
  }
]);

به من بگویید که چه فکر می کنید!

اگر ایده را دوست دارید، با بازی Stylify repo ❤️ به من اطلاع دهید.

من برای هر گونه بازخورد خوشحال خواهم شد! Stylify هنوز یک کتابخانه جدید است و فضای زیادی برای بهبود وجود دارد 🙂.