با چه روش‌هایی می‌تونیم به کامپوننت‌های ری‌اکتی استایل بدیم؟

درود دوستان! توی این قسمت از مجموعه پست‌های ری‌اکت ۱۰۱ می‌خوایم انواع مختلف روش‌های استایل دادن کامپوننت‌های ری‌اکتی رو بررسی کنیم و همچنین مزایا و معایب هر روش رو بررسی می‌کنیم. روش‌هایی که بررسی می‌کنیم شامل:

 

1. CSS Stylesheets
2. CSS Modules
3. CSS Modules با Sass/SCSS
4. Inline Styles
5. Styled-Components (CSS-in-JS)
6. Tailwind CSS

خب بریم که این روش‌ها رو بررسی کنیم.

 

۱. CSS Stylesheets

این یک روش سنتی برای استایل دادن به کامپوننت‌های ری‌اکتی هست. توی این روش یک فایل ‌.css می‌سازیم، توی اون دستورات CSS رو تعریف می‌کنیم:

.container {
  width: 100%;
  background: white;
}

و نهایتاً اون فایل رو به کامپوننت اضافه می‌کنیم:

import './App.css';

function App() {
  return <div className="container">Hello, world!</div>;
}

 

مزایا و معایب این روش

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

 

چه زمانی از این روش استفاده کنیم؟

استفاده از این روش برای زمانی خوبه که می‌خوایم استایل‌هایی داشته باشیم که در سراسر برنامه قراره قابل دسترس باشن (Global). این کار رو معمولاً توی فایل main.ts یا App.tsx انجام می‌دیم.

 

۲. CSS Modules

این روش مشکل استایل‌های Global رو حل می‌کنه و با استفاده از اون از اعمال دستورات ناخواستهٔ سی‌اس‌اس جلوگیری میشه. استایل‌های ما به قول معروف Scoped هستن. یعنی فقط اونجایی اعمال میشن که Import شدن.

استفاده از CSS Modules تقریباً مشابه روش قبل است. ابتدا باید دستورات سی‌اس‌اس رو بریزیم توی فایل‌هایی با پسوند .module.css:

/* App.module.css */

.container {
  width: 100%;
  background: white;
}

و بعد اون رو به این شکل توی هر کامپوننتی اضافه کنیم:

import styles from './App.module.css';

function App() {
  return <div className={<<styles.container>>}>Hello, world!</div>;
}

هر کلاس سی‌اس‌اس که ساختیم، از آبجکت styles قابل دسترس هست و برای اعمال شدن به المنت‌ها، باید مثل خط ۴ به اون المنت اضافه بشه. به این ترتیب مشکل استایل‌های سراسری برطرف میشه و استایل‌های ما به قول معروف Scoped میشن.

 

مزایا و معایب این روش

همونطور که بررسی کردیم، از مهمترین مزایای این روش اینه که می‌تونیم استایل‌های Scoped داشته باشیم. همچنین باعث میشه کدهایی مرتب‌تر داشته باشیم. مثلاً استایل‌های هر کامپوننت می‌تونه توی یک فایل مجزا نگهداری بشه. از معایب این روش اینه که درست مثل روش قبل نمی‌تونیم از قابلیت‌هایی مثل دستورات داینامیک و شرطی که با حضور جاوااسکریپت قابل اجرا هست استفاده کنیم. همچنین برای استفاده از این روش به ابزارهایی مثل Webpack نیازه.

 

چه زمانی از این روش استفاده کنیم؟

از این روش بهتره زمانی استفاده کنیم که می‌خوایم به کامپوننت خاصی استایل بدیم و نمی‌خوایم دستوراتی به صورت سراسری داشته باشیم.

 

۳. CSS Modules با Sass/SCSS

این روش هم شباهت زیادی به روش قبلی داره. با این تفاوت که توی اون می‌تونیم از Sass/SCSS استفاده کنیم تا این ویژگی رو توی برنامه اضافه کرده باشیم. توی این روش پسوند فایل باید .module.scss باشه:

/* App.module.scss */
.container {
  color: $primary-color;
  padding: 20px;
}

import styles from './App.module.scss';

function App() {
  return <div className={styles.container}>Hello, world!</div>;
}

 

مزایا و معایب این روش

این روش مزایایی مثل روش قبل داره به‌علاوهٔ اینکه می‌تونیم از قابلیت‌های Sass مثل استفاده از متغیرها و Mixin ها توی برنامه استفاده کنیم. از معایب این روش شاید این باشه که نیاز به کانفیگ کردن با ساختن فایل Config داریم. همچنین توی این روش هم دسترسی به جاوااسکریپت نداریم تا دستوراتی داینامیک و شرطی داشته باشیم. همچنین برای افرادی که با دستورات Sass آشنایی ندارن ممکنه سختی‌هایی در ابتدا به وجود بیاد.

 

۴. Inline Styles

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

function App() {
  const containerStyle = {
    width: '100%',
    backgroundColor: 'white',
  };

  return <div style={containerStyle}>Hello, world!</div>;
}

همونطور که می‌بینیم دستورات سی‌اس‌اس رو توی آبجکت نوشتیم و اون رو به اتریبیوت style المنت مد نظر پاس دادیم. البته مستقیماً می‌تونستیم آبجکت رو توی style بنویسیم:

function App() {
  return <div style={{ width: '100%', backgroundColor: 'white' }}>Hello, world!</div>;
}

 

مزایا و معایب این روش

توی این روش چون به جاوااسکریپت دسترسی داریم، می‌تونیم دستوراتی داینامیک و شرطی داشته باشیم. مثلاً دستوراتی که براساس props کامپوننت تغییر می‌کنن:

function Button({ disabled }) {
  const styles = {
    color: disabled ? 'gray' : 'black',
  }

  return <button style={styles}>{props.children}</button>;
}

همچنین توی این روش دستورات ما Scoped هستن و فقط روی المنت‌های مد نظر ما اعمال میشن. از مزایای دیگهٔ این روش اینه که خیلی سریع و راحت و بدون نیاز به فایل یا پکیجی می‌تونیم به یک المنت استایل بدیم.

از معایب این روش اینه که نمی‌تونیم از Pseudo-Classes مثل :hover و یا Media Queries استفاده کنیم. همچنین دستوراتی که می‌نویسیم قابلیت استفاده مجدد کمتری در مقایسه با روش‌های دیگه دارن.

 

چه زمانی از این روش استفاده کنیم؟

اگه می‌خوایم بدون استفاده از پکیج خاصی به یک المنت یک استایل ساده بدیم و همچنین می‌خوایم از قابلیت‌های جاوااسکریپت استفاده کنیم، می‌تونیم از این روش استفاده کنیم. البته بهتره که این روش، روش پیشفرض و اصلی استایل دادن به کامپوننت‌ها نباشه و از روش‌های دیگه مثل Styled-Components و یا Tailwind استفاده کنیم.

 

۵. Styled-Components (CSS-in-JS)

Styled-Components یکی از محبوب‌ترین کتابخونه‌های CSS-in-JS (ابزارهایی که اجازه میدن استایل‌هامون رو توی فایل‌ها جاوااسکریپتی تعریف کنیم):

import styled from 'styled-components';

const Container = styled.div`
  color: blue;
  padding: 20px;
`;

function App() {
  return <Container>Hello, world!</Container>;
}

یکی از مهمترین مزایای این روش در مقایسه با روش‌های قبلی اینه که می‌تونیم توی فایل‌های جاوااسکریپتی می‌تونیم از Pseudo-Classes و Media Query ها استفاده کنیم:

import styled from 'styled-components';

const Container = styled.div`
  background-color: lightblue;
  padding: 20px;

  @media (max-width: 768px) {
    background-color: lightcoral;
  }
`;

function App() {
  return <Container>Hello World!</Container>;
}

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

Emotion یکی دیگه از ابزارهای معروف CSS-in-JS هست که کارایی مشابه Styled-Components داره، با انعطاف‌پذیری و بهینه‌سازی بیشتر:

import { css } from '@emotion/react';

const containerStyle = css`
  color: blue;
  padding: 20px;
`;

function App() {
  return <div css={containerStyle}>Hello, world!</div>;
}

 

۶. Tailwind CSS

تیلویند یکی از قدرتمندترین و پراستفاده‌ترین ابزارهای استایل دادن به کامپوننت‌های ری‌اکتی به حساب میاد. تیلوید به قول معروف یک فریم‌ورک Utility-first هست. یعنی ابزاری که شامل کلاس‌های از پیش تعریف‌شدهٔ CSS هست و مستقیماً می‌تونه روی یک المنت استفاده و اعمال بشه:

<button class="px-4 py-2 bg-blue-500 text-white rounded">Click Me</button>

کلاس‌هایی که نوشتیم ما رو از نوشتن چنین کدی معاف می‌کنه:

.btn {
  padding: 8px 16px;
  background-color: #4299e1;
  color: #fff;
  border-radius: 4px;
}

 

مزایا و معایب این روش

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

از معایب تیلویند اینه که اگه بخوایم به یک المنت استایل‌های زیادی بدیم، حجم کلاس‌هایی که باید تعریف کنیم زیاد و در نتیجه کدهای ما شلوغ میشه:

<div class="bg-blue-500 border border-t-red-500 leading-snug flex align-center justify-between text-white p-4 rounded shadow-md">
  Lots of classes here!
</div>

خب دوستان امیدوارم از اطلاعاتی که بررسی کردیم استفاده کرده باشین. نکتهٔ مهمی که باید در نظر داشته باشیم اینه که سعی کنیم سرتاسر توسعهٔ برنامه یک روش رو پیش بگیریم و به قول معروف Consistency رو رعایت کنیم تا برنامه‌ای تمیز و قابل توسعه داشته باشیم. روزتون خوش 😉✌️