CSS এর হাতেখড়ি (পর্ব

আগের পর্বে আমরা Pseudo-class, Pseudo-element ও Animation শিখেছি। আজকে শিখবো CSS Variables (আনুষ্ঠানিক নাম Custom Properties) — এটা দিয়ে একটা রঙ বা সাইজ একবার ঠিক করে পুরো ওয়েবসাইটে বারবার ব্যবহার করা যায়, আর পরে বদলাতে চাইলে শুধু একটা জায়গায় বদলালেই পুরো সাইট আপডেট হয়ে যায়।

সমস্যাটা কী ছিল

ধরো তোমার ওয়েবসাইটের থিম কালার #3949ab, আর এটা ৩০ জায়গায় ব্যবহার হয়েছে — বাটনে, হেডারে, লিংকে, বর্ডারে। এখন যদি ক্লায়েন্ট বলে রঙটা বদলে #e91e63 করতে হবে, তাহলে তোমাকে ৩০ জায়গায় গিয়ে খুঁজে খুঁজে বদলাতে হবে — সহজেই একটা জায়গা মিস হয়ে যেতে পারে। CSS Variables এই সমস্যার সমাধান।

Variable ডিফাইন করা

একটা variable ডিফাইন করতে হয় -- দিয়ে শুরু করে, সাধারণত :root-এর ভেতরে:

:root {
  --primary-color: #3949ab;
  --secondary-color: #e91e63;
  --text-color: #333;
  --spacing: 16px;
}

:root মানে পুরো HTML ডকুমেন্টের একদম উপরের স্তর — এখানে ডিফাইন করা variable পুরো পেজের যেকোনো জায়গা থেকে ব্যবহার করা যায়। এটাকে অনেকটা একটা গ্লোবাল সেটিংস ফাইলের মতো ভাবতে পারো।

Variable ব্যবহার করা

ব্যবহার করতে হয় var() ফাংশন দিয়ে:

button {
  background-color: var(--primary-color);
  padding: var(--spacing);
}

.link {
  color: var(--secondary-color);
}

এখন যদি :root-এ --primary-color-এর মান একটাই জায়গায় বদলাও, তাহলে যেখানেই var(--primary-color) ব্যবহার হয়েছে, সব জায়গাতেই রঙ বদলে যাবে — স্বয়ংক্রিয়ভাবে।

Fallback ভ্যালু

var()-এ একটা দ্বিতীয় ভ্যালু দেওয়া যায়, যেটা তখন ব্যবহার হবে যদি variable-টা খুঁজে না পাওয়া যায়:

p {
  color: var(--text-color, black);
}

যদি কোনো কারণে --text-color ডিফাইনই না করা থাকে, তাহলে ব্রাউজার black ব্যবহার করবে — এটা একটা নিরাপত্তা জাল।

Dark Mode বানানো — CSS Variables-এর সবচেয়ে জনপ্রিয় ব্যবহার

CSS Variables দিয়ে Dark Mode/Light Mode toggle বানানো খুব সহজ — শুধু একটা ক্লাস বদলে পুরো থিমের রঙ বদলে ফেলা যায়:

:root {
  --bg-color: white;
  --text-color: #222;
}

.dark-mode {
  --bg-color: #1a1a1a;
  --text-color: #f5f5f5;
}

body {
  background-color: var(--bg-color);
  color: var(--text-color);
  transition: all 0.3s ease;
}

এরপর শুধু JavaScript দিয়ে <body>-তে dark-mode ক্লাস যোগ/বাদ দিলেই পুরো পেজের থিম বদলে যাবে — একটা লাইনও CSS বদলাতে হবে না। (JavaScript দিয়ে ক্লাস টগল করা আমরা পরের সিরিজে শিখবো।)

নির্দিষ্ট এলিমেন্টের ভেতরে Variable override করা

Variable শুধু :root-এই না, যেকোনো selector-এর ভেতরেও ডিফাইন করা যায় — তখন সেটা শুধু সেই এলিমেন্ট ও তার চাইল্ডদের ভেতরেই কার্যকর হবে:

.card {
  --card-padding: 20px;
  padding: var(--card-padding);
}

.card.compact {
  --card-padding: 10px; /* এই নির্দিষ্ট কার্ডে override হয়ে যাবে */
}

টিপস: বড় প্রজেক্টে সাধারণত :root-এ রঙ, ফন্ট সাইজ, স্পেসিং-এর জন্য একটা "design system" এর মতো variable সেট বানিয়ে রাখা হয় — এতে পুরো টিম একই মান ব্যবহার করে, ডিজাইন সব জায়গায় সামঞ্জস্যপূর্ণ থাকে।

একটা সম্পূর্ণ উদাহরণ

<!DOCTYPE html>
<html lang="bn">
<head>
  <meta charset="UTF-8">
  <title>CSS Variables উদাহরণ</title>
  <style>
    :root {
      --primary-color: #3949ab;
      --text-color: #222;
      --spacing: 16px;
      --radius: 8px;
    }

    body {
      color: var(--text-color);
      font-family: Arial, sans-serif;
    }

    .btn {
      background-color: var(--primary-color);
      color: white;
      padding: var(--spacing);
      border: none;
      border-radius: var(--radius);
    }

    .card {
      border: 1px solid #ddd;
      padding: var(--spacing);
      border-radius: var(--radius);
      margin-top: var(--spacing);
    }

    .card h3 {
      color: var(--primary-color);
    }
  </style>
</head>
<body>
  <button class="btn">সাবমিট করো</button>

  <div class="card">
    <h3>প্রোডাক্ট</h3>
    <p>এই কার্ড ও বাটন একই variable শেয়ার করছে।</p>
  </div>
</body>
</html>

উপরের উদাহরণে --primary-color একবার বদলালেই বাটনের ব্যাকগ্রাউন্ড আর কার্ডের হেডিং — দুটোরই রঙ একসাথে বদলে যাবে।

নিজে চেষ্টা করো

Exercise:

:root-এ ৩-৪টা রঙ ও একটা spacing variable ডিফাইন করো
একাধিক এলিমেন্টে (বাটন, কার্ড, হেডিং) সেই variable গুলো ব্যবহার করো
একটা মান বদলে দেখো কতগুলো জায়গায় একসাথে পরিবর্তন হয়
একটা .dark-mode ক্লাস বানাও যেখানে --bg-color ও --text-color override করা থাকবে

পরের পর্বে যা থাকছে

পর্ব ১২-এ, সিরিজের শেষ পর্বে, আমরা HTML সিরিজের landing page-টা এখন পর্যন্ত শেখা সব CSS concept দিয়ে সম্পূর্ণ সুন্দর ও responsive বানিয়ে ফেলবো — Mini Project হিসেবে।

ইলন মাস্কের সম্পদের রহস্য

আমিত্ত্ব কি কোনো স্থির সত্তা, নাকি জটিল গাণিতিক ফাংশন?

বাংলাদেশের প্রেক্ষাপটে প্যারেন্টিং ও এর সীমাবদ্ধতা

রেডিও আবিষ্কারের ইতিহাস: মার্কোনি থেকে ডিজিটাল যুগ পর্যন্ত

দারিদ্র্যের মনস্তাত্ত্বিক ফাঁদ

CSS এর হাতেখড়ি (পর্ব – ১১)