معرفی ۷ کتابخانه CSS-in-JS

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

• در صورت استفاده از این کتابخانه‌ها، شما نیازی به استفاده از چندین فایل CSS را ندارید، استایل‌هایی که در پروژه شما استفاده می‌شوند همراه با کامپوننت مرتبطه کپسوله‌سازی شده و در یک جا قرار می‌گیرند.
• از آنجایی که زبان اصلی این کتابخانه‌ها جاوااسکریپت است، به همین دلیل کار با برخی ویژگی‌های CSS برای‌تان بسیار ساده‌تر خواهد شد. تست واحد، خودکار‌سازی Vendor-prefixing و... .
• انتخاب‌گرها به صورت محلی تعیین می‌شوند، بنابراین نیازی به نگرانی در رابطه با موضوع Collision نخواهید داشت.
• از آنجایی که تنها استایل‌های استفاده شده اعمال می‌شوند، بنابراین باید انتظار کارایی بالاتری از کدهای‌تان داشته باشید.

در این مطلب سعی خواهیم کرد که چند مورد از محبوب‌ترینِ این کتابخانه‌ها را با همدیگر بررسی کنیم.

۱. STYLED COMPONENTS

به احتمال زیاد زمانی که صحبت از کتابخانه‌های CSS-in-JS می‌شود، اولین مورد Styled Components به ذهن می‌رسد. در حال حاضر شرکت‌های مختلفی از این کتابخانه به عنوان ابزار اصلی طراحی رابط کاربری‌شان استفاده می‌کنند. در بین این شرکت‌ها می‌توان Reddit، Vimeo، Lego و... را نام برد. Styled Components به شما اجازه می‌دهد تا با استفاده از Template Literalها در ES6 کامپوننت‌های خودتان را با CSS استایل‌دهی کنید. فارغ از این موارد Styled Components به خوبی می‌تواند با فریمورک‌های ری‌اکت و ری‌اکت نیتیو نیز ادغام شود، بنابراین از این جهت نیز سازگاری بالایی دارد.

در کنار تمام این امکانات Styled Components به شما قابلیت آن را خواهد داد که انتخاب‌گرهای CSS خود را به صورت تودرتو وارد کنید. این دقیقا کاری‌ست که می‌توانید با استفاده از Sass نیز انجام دهید. Styled Components برای هر کامپوننت شما یک کلاس با نام منحصر به فرد ایجاد می‌کند. 

یک مثال کلی از این شیوه استایل‌دهی را می‌توانید در زیر مشاهده بکنید:

import React from 'react';
import styled from 'styled-components';

const Title = styled.h1`
  font-size: 1.5em;
  text-align: center;
  color: palevioletred;
`;

const Wrapper = styled.section`
  padding: 4em;
  background: papayawhip;
`;

<Wrapper>
  <Title>Hello World, this is my first styled component!</Title>
</Wrapper>

۲. JSS

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

با وجود آنکه می‌توانید به آسانی این ابزار را با هر کتابخانه و فریمورک دیگری ادغام کنید، اما نسخه‌های آماده‌ای از این ابزار وجود دارد که به صورت آماده با ری‌اکت و با Styled Components ادغام شده است. React-JSS و Styled-JSS نام این دو ابزار است. از طریق  Core JSS playgroundنیز می‌توانید به صورت زنده با این کتابخانه کار بکنید. JSS سینتکس بسیار شبیهی به CSS دارد به همین خاطر یادگیری آن چندان کار سختی نخواهد بود. برای یادگیری کار با این ابزار می‌توانید از طریق این لینک کارتان را شروع کنید.

در مثال زیر می‌توانید شاهد ساختن یک کامپوننت عنوان باشید که از پس زمینه نارنجی و متن بولد بهره می‌گیرد:

import jss from 'jss'

const styles = {
   wrapper: {
      padding: 40,
      background: 'orangered',
      textAlign: 'center'
   },
   title: {
      font: {
          size: 40,
          weight: 900
      },
      color: 'white'
   }
}

const { classes } = jss.createStyleSheet(styles).attach()

document.body.innerHTML = `
   <div class="${classes.wrapper}">
      <h1 class="${classes.title}">Title</h1>
   </div>
`

۳. EMOTION

Emotion یک فریمورک از دسته فریمورک‌های CSS-in-JS است که همراه با ویژگی‌های بسیار حرفه‌ای مانند سرویس کش، تست اسنپ‌شات و source map ارائه می‌شود. سینتکس کلی این فریمورک به CSS شبیه است و به همین دلیل نیز کار کردن و یادگیری آن بسیار ساده است. شما می‌توانید با استفاده از Template Literalهای ES6 و یا Javascript Object کدهای Emotion خود را بنویسید.

کل فریمورک Emotion حدود ۲.۳ کیلوبایت حجم دارد از این رو بسیار سبک است اما می‌شود پکیج‌های مختلفی را روی آن نصب کرد. برای مثال پکیج‌هایی وجود دارند که به شما قابلیت ادغام کردن اپلیکیشن‌های ری‌اکت را با این فریمورک می‌دهند.

در زیر می‌توانید یک مثال از شیوه تغییر رنگ یک لینک در زمان hover کردن را مشاهده کنید:

import { css, cx } from 'emotion'
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>
)

۴. APHRODITE

Aphrodite کتابخانه‌ای است که توسط Khan Academy توسعه داده شده است. در واقع تیم مهندسی Khan Acadmey ابتدا قصد داشتند تا تنها رابط کاربری اپلیکیشن ری‌اکت خود را بهتر کنند، بعد از انجام این کار در نهایت چیزی که ساختند را نیز به صورت متن باز روی گیت‌هاب قرار دادند. با وجود آنکه این کتابخانه با در نظر گرفتن ری‌اکت ساخته شده اما وجودیت کلی آن به صورت مستقل است و لزومی به استفاده از ری‌اکت در آن وجود ندارد. شما می‌توانید از این ابزار در کنار هر فریمورک جاوااسکریپتی دیگری استفاده کنید.

حجم این کتابخانه ۶ کیلوبایت است از این رو باید گفت که کتابخانه سبکی است. Aphrodite از Server-Side Rendering پشتیبانی می‌کند و همچنین برای بهتر کردن زمان رندر کامپوننت‌ها به شما قابلیت CSS Generation را می‌دهد.

زمانی که از کتابخانه‌تان در کنار Web Components استفاده کنید، و بخواهید تنها یک پس زمینه قرمز رنگ را در اپلیکیشن‌تان داشته باشید، کدهای‌شان شبیه زیر خواهد بود:

import { StyleSheet, css } from 'aphrodite';

const styles = StyleSheet.create({
   red: {
      backgroundColor: 'red'
   }
});

class App extends HTMLElement {
   attachedCallback() {
       this.innerHTML = `
           <div class="${css(styles.red)}">
               This is red.
           </div>
       `;
   }
}

document.registerElement('my-app', App);

۵. RADIUM

Radium از یک رویکرد متفاوت برای نوشتن کدهای CSS در جاوااسکریپت استفاده می‌کند. Radium به جای آنکه از یک نام منحصر به فرد برای کلاس‌های هر کامپوننت استفاده کند، استایل‌ها را به صورت inline روی کدهای HTML اعمال می‌کند. بنابراین در چنین حالتی المان‌های شما از طریق خاصیت کلی style و به صورت inline استایل‌دهی می‌شوند. البته با وجود معایبی که این حالت دارد اما مزیت‌هایی نیز وجود دارد که به نظر مهم می‌آیند. استایل‌های مستقل، نبود کدهای مرده و نبود ناسازگاری‌ از جمله مزیت‌هایی است که این شیوه از کدنویسی می‌تواند برای شما داشته باشد.

شما می‌توانید از Radium تنها در کنار فریمورک ری‌اکت استفاده کنید. از آنجایی که این فریمورک به صورت اختصاصی برای ری‌اکت ساخته شده است شما می‌توانید از قابلیت prob-based rendering استفاده کنید. در این حالت کامپوننت‌های ری‌اکت شما براساس وضعیت‌تشان استایل دریافت می‌کنند. 

در مثال زیر می‌توانید ساخت یک دکمه با سه استایل متفاوت را مشاهده کنید:

<Button
   kind="primary"
   disabled={false}
   styles={{
      base: {
          padding: "1.5em 2em",
          border: "0px",
          cursor: "pointer",
          fontSize: "1rem",
          fontWeight: 700,
      },
      primary: {
          backgroundColor: "#0074D9",
          color: "#ffffff",
          ":hover": {
              backgroundColor: color("#0074d9").lighten(0.2).hexString()
          }
      },
      warning: {
          backgroundColor: "#F5A623",
          color: "#ffffff",
          ":hover": {
              backgroundColor: color("#F5A623").darken(0.2).hexString()
          }
      },
      disabled: {
          opacity: .4,
          cursor: "not-allowed"
      }
}}
>
Radium Button
</Button>

۶. STYLETRON

 Styletron یک فریمورک مستقل CSS-in-JS است که به شما قابلیت تعریف استایل‌های CSS را با استفاده از اشیاء در جاوااسکریپت می‌دهد. شما می‌توانید از Styletron در کنار جاوااسکریپت، ری‌اکت و یا دیگر فریمورک‌ها استفاده کنید. همچنین یک نسخه دیگر از این ابزار وجود دارد که برای Atomic CSS ساخته شده است. کامپوننت‌های استایل شده با استفاده از Styletron بین موتورهای رندرینگ مختلف می‌تواند استفاده شود.

کتابخانه Styletron تنها استایل‌هایی را پردازش می‌کند که در حال حاضر اعمال شده و استفاده شده‌اند. این ویژگی باعث می‌شود که تمام هدر رفتگی‌ها از بین بروند و صفحه وب شما با سرعت بیشتری بارگذاری شوند. برای کار با این کتابخانه نیازی به Babel و یا Webpack ندارید، تنها کاری که باید انجام دهید این است که یک ماژول npm دیگر را به پروژه‌تان اضافه نمایید.

در کدهای زیر می‌توانید یک استایل ساخته شده برای تگ a را مشاهده کنید:

import { styled } from "styletron-react";

export default () => {
  const Anchor = styled("a", {
    fontSize: "20px",
    color: "red"
  });

  return <Anchor href="/getting-started">Start!</Anchor>;
};

۷. STYLED-JSX

Styled-JSX یک کتابخانه CSS-in-JS است که به شما قابلیت استفاده از JSX را می‌دهد. JSX یکی از راه‌هایی است که با آن می‌توانید کامپوننت‌های React را ایجاد کنید. شما می‌توانید این کتابخانه را هم در سمت کلاینت و هم در سمت سرور رندر کنید. برای استایل‌دهی به کامپوننت‌های JSX در این کتابخانه باید از Template Literalهای ES6 استفاده کنید.

حجم کتابخانه در زمان اجرا تنها ۳ کیلوبایت است که این موضوع به لطف فشرده‌سازی زیاد و همچنین gzip اتفاق افتاده است.

در زیر می‌توانید تغییر رنگ یک پاراگراف را در این کتابخانه مشاهده کنید.

import _JSXStyle from 'styled-jsx/style'
export default () => (
  <div className="jsx-123">
    <p className="jsx-123">Only this paragraph will get the style.</p>
    <_JSXStyle id="123">{`p.jsx-123 {color: red;}`}</_JSXStyle>
  </div>
)

در پایان

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

منبع