سی ایس ایس ماڈیولز کا استعمال کرتے ہوئے اجزاء کو کیسے اسٹائل کریں۔

سی ایس ایس ماڈیول مقامی طور پر سی ایس ایس کلاس کے ناموں کے دائرہ کار کا راستہ فراہم کرتے ہیں۔ جب آپ ایک ہی کلاس کا نام استعمال کرتے ہیں تو آپ کو اوور رائیڈنگ اسٹائل کے بارے میں فکر کرنے کی ضرورت نہیں ہے۔

معلوم کریں کہ CSS ماڈیول کیسے کام کرتے ہیں، آپ کو انہیں کیوں استعمال کرنا چاہیے، اور انہیں React پروجیکٹ میں کیسے لاگو کرنا ہے۔

---

---

سی ایس ایس ماڈیولز کیا ہیں؟

دی سی ایس ایس ماڈیول دستاویزات ایک CSS ماڈیول کو بطور CSS فائل بیان کریں جس کے کلاس کے نام مقامی طور پر بطور ڈیفالٹ اسکوپ کیے گئے ہوں۔ اس کا مطلب ہے کہ آپ مختلف CSS فائلوں میں ایک ہی نام کے ساتھ CSS متغیرات کو ایڈریس کر سکتے ہیں۔

آپ عام کلاسوں کی طرح سی ایس ایس ماڈیول کلاسز لکھتے ہیں۔ پھر کمپائلر سی ایس ایس کو براؤزر میں بھیجنے سے پہلے منفرد کلاس کے نام تیار کرتا ہے۔

مثال کے طور پر، styles.modules.css نامی فائل میں درج ذیل .btn کلاس پر غور کریں:

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
} 

اس فائل کو استعمال کرنے کے لیے، آپ کو اسے JavaScript فائل میں درآمد کرنا ہوگا۔

import styles from "./styles.module.js" 

اب، .btn کلاس کا حوالہ دینے اور اسے کسی عنصر میں دستیاب کرنے کے لیے، آپ کلاس کو استعمال کریں گے جیسا کہ ذیل میں دکھایا گیا ہے:

---

---

class="styles.btn" 

تعمیر کا عمل سی ایس ایس کلاس کو فارمیٹ کے منفرد نام سے بدل دے گا۔ _styles__btn_118346908.

کلاس کے ناموں کی انفرادیت کا مطلب یہ ہے کہ، اگر آپ مختلف اجزاء کے لیے ایک ہی کلاس کا نام استعمال کرتے ہیں، تو وہ آپس میں نہیں ٹکرائیں گے۔ آپ زیادہ سے زیادہ کوڈ کی آزادی کی ضمانت دے سکتے ہیں کیونکہ آپ کسی جزو کے سی ایس ایس اسٹائلز کو ایک فائل میں محفوظ کر سکتے ہیں، جو اس جزو کے لیے مخصوص ہے۔

---

---

ایک پرنٹر میں بہترین بجٹ۔

یہ ڈیبگنگ کو آسان بناتا ہے، خاص طور پر اگر آپ متعدد اسٹائل شیٹس کے ساتھ کام کر رہے ہیں۔ آپ کو صرف ایک خاص جزو کے لیے CSS ماڈیول کو ٹریک کرنے کی ضرورت ہوگی۔

CSS ماڈیولز آپ کو ایک سے زیادہ کلاسز کو یکجا کرنے کی بھی اجازت دیتے ہیں۔ کمپوز کرتا ہے کلیدی لفظ مثال کے طور پر، اوپر درج ذیل .btn کلاس پر غور کریں۔ آپ کمپوز کا استعمال کرتے ہوئے اس کلاس کو دوسری کلاسوں میں 'توسیع' کرسکتے ہیں۔

جمع کرانے والے بٹن کے لیے، آپ کے پاس یہ ہو سکتا ہے:

.btn { 
    /* styles */ 
} 
  
.submit { 
    composes: btn; 
    background-color: green; 
    color:#FFFFFF 
} 

یہ .btn اور .submit کلاسز کو یکجا کرتا ہے۔ آپ کسی دوسرے CSS ماڈیول سے اس طرح کی طرزیں بھی تحریر کر سکتے ہیں:

.submit { 
    composes:primary from "./colors.css" 
    background-color: green; 
} 

نوٹ کریں کہ آپ کو دوسرے قواعد سے پہلے کمپوز کا اصول لکھنا چاہیے۔

رد عمل میں سی ایس ایس ماڈیولز کا استعمال کیسے کریں۔

آپ React میں CSS ماڈیولز کو کس طرح استعمال کرتے ہیں اس کا انحصار اس بات پر ہے کہ آپ React ایپلیکیشن کیسے بناتے ہیں۔

اگر آپ create-react-app استعمال کرتے ہیں، تو CSS ماڈیولز باکس سے باہر سیٹ اپ ہوتے ہیں۔ تاہم، اگر آپ شروع سے ایپلیکیشن بنانے جا رہے ہیں، تو آپ کو ویب پیک جیسے کمپائلر کے ساتھ CSS ماڈیولز کو ترتیب دینے کی ضرورت ہوگی۔

اس ٹیوٹوریل کے ساتھ پیروی کرنے کے لیے، آپ کو یہ ہونا چاہیے:

• آپ کی مشین پر نوڈ انسٹال ہے۔
• ES6 ماڈیولز کی بنیادی تفہیم۔
• ایک بنیادی رد عمل کی سمجھ .

ری ایکٹ ایپلی کیشن بنانا

چیزوں کو آسان رکھنے کے لیے، آپ استعمال کر سکتے ہیں۔ تخلیق-رد عمل-ایپ ری ایکٹ ایپ کا سہارا لینا۔

اس کمانڈ کو چلائیں۔ ایک نیا رد عمل پروجیکٹ بنائیں react-css-modules کہتے ہیں:

npx create-react-app react-css-modules 

یہ ایک نئی فائل تیار کرے گا جسے react-css-modules کہا جاتا ہے تمام انحصار کے ساتھ React کے ساتھ شروع کرنے کے لیے درکار ہے۔

بٹن کا جزو بنانا

آپ اس مرحلے میں بٹن کا ایک جزو اور ایک CSS ماڈیول بنائیں گے جسے Button.module.css کہتے ہیں۔ src فولڈر میں، اجزاء کے نام سے ایک نیا فولڈر بنائیں۔ اس فولڈر میں بٹن کے نام سے ایک اور فولڈر بنائیں۔ آپ اس فولڈر میں بٹن کا جزو اور اس کی طرزیں شامل کریں گے۔

پر نیویگیٹ کریں۔ src/اجزاء/بٹن اور Button.js بنائیں۔

export default function Button() { 
    return ( 
        <button>Submit</button> 
    ) 
} 

اگلا، Button.module.css نامی ایک نئی فائل بنائیں اور درج ذیل کو شامل کریں۔

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 

اس کلاس کو بٹن کے جزو میں استعمال کرنے کے لیے، اسے اسٹائل کے طور پر درآمد کریں اور بٹن عنصر کے کلاس کے نام میں اس کا حوالہ اس طرح دیں:

import styles from "./Button.module.css" 
  
export default function Button() { 
    return ( 
        <button className={styles.btn}>Submit</button> 
    ) 
} 

یہ ایک سادہ سی مثال ہے جو دکھاتی ہے کہ ایک کلاس کو کیسے استعمال کیا جائے۔ آپ مختلف اجزاء میں سٹائل کا اشتراک کرنا چاہتے ہیں یا یہاں تک کہ کلاسوں کو یکجا کرنا چاہتے ہیں۔ اس کے لیے آپ کمپوزس کی ورڈ استعمال کر سکتے ہیں جیسا کہ پہلے اس مضمون میں بتایا گیا ہے۔

کمپوزیشن کا استعمال

سب سے پہلے، بٹن کے جزو کو درج ذیل کوڈ کے ساتھ تبدیل کریں۔

import styles from "./Button.module.css" 
  
export default function Button({type="primary", label="Button"}) { 
    return ( 
        <button className={styles[type]}>{label}</button> 
    ) 
} 

یہ کوڈ بٹن کے جز کو ایک قسم کی قدر کو سہارا کے طور پر قبول کرکے مزید متحرک بناتا ہے۔ یہ قسم بٹن عنصر پر لاگو کلاس کے نام کا تعین کرے گی۔ لہذا اگر بٹن ایک جمع کرانے کا بٹن ہے، تو کلاس کا نام 'جمع کروائیں' ہوگا۔ اگر یہ 'خرابی' ہے، تو کلاس کا نام 'خرابی' ہو گا، وغیرہ۔

شروع سے ہر بٹن کے لیے تمام سٹائل لکھنے کے بجائے کمپوز کی ورڈ کو استعمال کرنے کے لیے Button.module.css میں درج ذیل کو شامل کریں۔

.btn { 
    width: 90px; 
    height: 40px; 
    padding: 10px 20px; 
    border-radius: 4px; 
    border: none; 
} 
  
.primary { 
    composes: btn; 
    color: #FFFFFF; 
    background-color: #6E41E2; 
} 
  
.secondary { 
    composes: btn; 
    color: #6E41E2; 
    background-color: #FFFFFF; 
} 

اس مثال میں، پرائمری کلاس اور سیکنڈری کلاس btn کلاس کا استعمال کرتی ہے۔ ایسا کرنے سے، آپ لکھنے کے لیے کوڈ کی مقدار کو کم کرتے ہیں۔

نئے کمپیوٹر پر USB سے ونڈوز 10 انسٹال کرنے کا طریقہ

آپ اسے ایک بیرونی CSS ماڈیول کے ساتھ اور بھی آگے لے جا سکتے ہیں۔ colors.module.css درخواست میں استعمال ہونے والے رنگوں پر مشتمل ہے۔ اس کے بعد آپ اس ماڈیول کو دوسرے ماڈیولز میں استعمال کر سکتے ہیں۔ مثال کے طور پر، درج ذیل کوڈ کے ساتھ اجزاء کے فولڈر کے روٹ میں colors.module.css فائل بنائیں:

.primaryBg { 
    background-color: #6E41E2 
} 
.secondaryBg { 
    background-color: #FFFFFF 
} 
  
.primaryColor { 
    color: #FFFFFF 
} 
.secondaryColor { 
    color: #6E41E2 
} 

اب Button/Button.module.css فائل میں، اوپر کی کلاسز کو اس طرح استعمال کرنے کے لیے پرائمری اور سیکنڈری کلاسز میں ترمیم کریں۔

.primary { 
    composes: btn; 
    composes: primaryColor from "../colors.module.css"; 
    composes: primaryBg from "../colors.module.css"; 
} 
  
.secondary { 
    composes: btn; 
    composes: secondaryColor from "../colors.module.css"; 
    composes: secondaryBg from "../colors.module.css"; 
} 

سی ایس ایس ماڈیولز کے ساتھ ساس

آپ اپنے کوڈبیس کی ماڈیولریٹی کو بہتر بنانے کے لیے CSS ماڈیول استعمال کر سکتے ہیں۔ مثال کے طور پر، آپ بٹن کے جزو کے لیے ایک سادہ سی ایس ایس کلاس بنا سکتے ہیں اور کمپوزیشن کے ذریعے سی ایس ایس کلاسز کو دوبارہ استعمال کر سکتے ہیں۔

CSS ماڈیولز کے اپنے استعمال کو طاقت دینے کے لیے، Sass کا استعمال کریں۔ Sass—Syntactically Awesome Style Sheets—ایک CSS پری پروسیسر ہے جو بہت ساری خصوصیات فراہم کرتا ہے۔ ان میں نیسٹنگ، متغیرات اور وراثت کے لیے سپورٹ شامل ہے جو CSS میں دستیاب نہیں ہیں۔ Sass کے ساتھ، آپ اپنی درخواست میں مزید پیچیدہ خصوصیات شامل کر سکتے ہیں۔