সিএসএস মডিউল ব্যবহার করে উপাদানগুলিকে কীভাবে স্টাইল করবেন

CSS মডিউলগুলি স্থানীয়ভাবে CSS ক্লাস নামগুলির সুযোগ দেওয়ার একটি উপায় প্রদান করে। আপনি যখন একই শ্রেণীর নাম ব্যবহার করেন তখন আপনাকে ওভাররাইডিং শৈলী সম্পর্কে চিন্তা করতে হবে না।

সিএসএস মডিউলগুলি কীভাবে কাজ করে, কেন সেগুলি ব্যবহার করা উচিত এবং একটি প্রতিক্রিয়া প্রকল্পে সেগুলি কীভাবে প্রয়োগ করা যায় তা সন্ধান করুন।

---

---

CSS মডিউল কি?

দ্য CSS মডিউল ডক্স একটি CSS মডিউলকে একটি CSS ফাইল হিসাবে বর্ণনা করুন যার ক্লাসের নাম স্থানীয়ভাবে ডিফল্টরূপে স্কোপ করা হয়। এর মানে হল আপনি বিভিন্ন CSS ফাইলে একই নামের CSS ভেরিয়েবলকে অ্যাড্রেস করতে পারেন।

আপনি সাধারণ ক্লাসের মতোই CSS মডিউল ক্লাস লিখুন। তারপর কম্পাইলার ব্রাউজারে CSS পাঠানোর আগে অনন্য ক্লাসের নাম তৈরি করে।

উদাহরণস্বরূপ, styles.modules.css নামক একটি ফাইলে নিম্নলিখিত .btn ক্লাস বিবেচনা করুন:

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

এই ফাইলটি ব্যবহার করতে, আপনাকে এটি একটি জাভাস্ক্রিপ্ট ফাইলে আমদানি করতে হবে।

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

এখন, .btn ক্লাস রেফারেন্স করতে এবং এটিকে একটি এলিমেন্টে উপলব্ধ করতে, আপনি নীচে দেখানো ক্লাসটি ব্যবহার করবেন:

---

---

টিকটকে কীভাবে শব্দ রাখবেন

class="styles.btn" 

বিল্ড প্রক্রিয়াটি সিএসএস ক্লাসকে একটি অনন্য নামের ফর্ম্যাটের মতো প্রতিস্থাপন করবে _styles__btn_118346908.

শ্রেণী নামের স্বতন্ত্রতার অর্থ হল, আপনি যদি বিভিন্ন উপাদানের জন্য একই শ্রেণীর নাম ব্যবহার করেন, তবুও তারা সংঘর্ষে লিপ্ত হবে না। আপনি বৃহত্তর কোড স্বাধীনতার গ্যারান্টি দিতে পারেন যেহেতু আপনি একটি উপাদানের CSS শৈলীগুলি একটি একক ফাইলে সংরক্ষণ করতে পারেন, সেই উপাদানটির জন্য নির্দিষ্ট।

---

---

এটি ডিবাগিংকে সহজ করে, বিশেষ করে যদি আপনি একাধিক স্টাইলশীটের সাথে কাজ করেন। আপনাকে শুধুমাত্র একটি নির্দিষ্ট উপাদানের জন্য 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; 
} 

মনে রাখবেন যে অন্যান্য নিয়মের আগে আপনাকে অবশ্যই রচনার নিয়ম লিখতে হবে।

প্রতিক্রিয়ায় কীভাবে সিএসএস মডিউল ব্যবহার করবেন

আপনি কীভাবে প্রতিক্রিয়াতে CSS মডিউলগুলি ব্যবহার করেন তা নির্ভর করে আপনি কীভাবে প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করবেন তার উপর।

টিকটকে কীভাবে বিখ্যাত হবেন

আপনি তৈরি-প্রতিক্রিয়া-অ্যাপ ব্যবহার করলে, CSS মডিউলগুলি বক্সের বাইরে সেট আপ করা হয়। যাইহোক, আপনি যদি স্ক্র্যাচ থেকে অ্যাপ্লিকেশনটি তৈরি করতে যাচ্ছেন, তাহলে আপনাকে ওয়েবপ্যাকের মতো একটি কম্পাইলার দিয়ে CSS মডিউলগুলি কনফিগার করতে হবে।

এই টিউটোরিয়ালটি অনুসরণ করতে, আপনার থাকতে হবে:

• আপনার মেশিনে নোড ইনস্টল করা হয়েছে।
• ES6 মডিউলগুলির একটি প্রাথমিক ধারণা।
• একটা মূল প্রতিক্রিয়া বোঝা .

একটি প্রতিক্রিয়া অ্যাপ্লিকেশন তৈরি করা

জিনিস সহজ রাখতে, আপনি ব্যবহার করতে পারেন তৈরি-প্রতিক্রিয়া-অ্যাপ একটি প্রতিক্রিয়া অ্যাপ্লিকেশন ভারা.

এই কমান্ড চালান একটি নতুন প্রতিক্রিয়া প্রকল্প তৈরি করুন প্রতিক্রিয়া-সিএসএস-মডিউল বলা হয়:

npx create-react-app react-css-modules 

এটি প্রতিক্রিয়া শুরু করার জন্য প্রয়োজনীয় সমস্ত নির্ভরতা সহ react-css-modules নামে একটি নতুন ফাইল তৈরি করবে।

একটি বোতাম উপাদান তৈরি করা

আপনি এই ধাপে Button.module.css নামে একটি বোতাম উপাদান এবং একটি 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> 
    ) 
} 

এটি একটি সাধারণ উদাহরণ যা দেখায় কিভাবে একটি একক শ্রেণী ব্যবহার করতে হয়। আপনি বিভিন্ন উপাদান জুড়ে শৈলী ভাগ করতে বা এমনকি ক্লাস একত্রিত করতে চাইতে পারেন। এই জন্য, আপনি পূর্বে এই নিবন্ধে উল্লিখিত হিসাবে composes কিওয়ার্ড ব্যবহার করতে পারেন.

রচনা ব্যবহার করে

প্রথমে নিচের কোড দিয়ে বোতাম কম্পোনেন্ট পরিবর্তন করুন।

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; 
} 

এই উদাহরণে, প্রাথমিক শ্রেণী এবং মাধ্যমিক শ্রেণী বিটিএন শ্রেণী ব্যবহার করে। এটি করার মাধ্যমে, আপনি লিখতে প্রয়োজনীয় কোডের পরিমাণ কমিয়ে দেবেন।

আপনি একটি বহিরাগত 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 মডিউল সহ Sass

আপনি আপনার কোডবেসের মডুলারিটি উন্নত করতে CSS মডিউল ব্যবহার করতে পারেন। একটি উদাহরণ হিসাবে, আপনি একটি বোতাম উপাদানের জন্য একটি সাধারণ CSS ক্লাস তৈরি করতে পারেন এবং রচনার মাধ্যমে CSS ক্লাসগুলি পুনরায় ব্যবহার করতে পারেন।

আপনার CSS মডিউলগুলির ব্যবহারকে শক্তিশালী করতে, Sass ব্যবহার করুন। Sass—Syntactically Awesome Style Sheets- হল একটি CSS প্রিপ্রসেসর যা প্রচুর বৈশিষ্ট্য প্রদান করে। তারা নেস্টিং, ভেরিয়েবল এবং উত্তরাধিকারের জন্য সমর্থন অন্তর্ভুক্ত করে যা CSS-এ উপলব্ধ নয়। Sass এর মাধ্যমে, আপনি আপনার অ্যাপ্লিকেশনে আরও জটিল বৈশিষ্ট্য যোগ করতে পারেন।