CSS-এর সাথে পরিচয় — rule, property আর CSS যোগ করার তিন উপায়

১ · একই HTML, নতুন চেহারা — CSS কেন দরকার

পর্ব ১৫-এ আপনি শাপলা গণপাঠাগারের জন্য একটি পূর্ণ ওয়েবসাইট বানিয়েছেন। সাইটটি সঠিক, অ্যাক্সেসিবল, validator-এ পাস — কিন্তু দেখতে সাদামাটা। সাদা পাতায় কালো লেখা, নীল দাগ দেওয়া লিংক, বুলেটসহ মেনু। ব্রাউজার আপনার HTML-এর অর্থ ঠিকই বুঝেছে, কিন্তু চেহারার কোনো নির্দেশ পায়নি, তাই নিজের ডিফল্ট চেহারা দিয়েছে।

এখন সেই হোম পাতার একটি ছোট অংশ নিচে। ওপরে আপনি যা এডিট করবেন, তা শুধু CSS — HTML স্থির, একটি অক্ষরও বদলাবে না। প্রিভিউটি দেখুন:

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  max-width: 36rem;
  margin: 0 auto;
  padding: 1rem;
  color: #1f2937;
}
header {
  border-bottom: 3px solid #2e7d32;
}
nav ul {
  list-style: none;
  padding: 0;
  display: flex;
  gap: 1rem;
}
h1 {
  color: #2e7d32;
}
footer {
  margin-top: 2rem;
  font-size: 0.9rem;
  color: #6b7280;
}

এই ছোট পরীক্ষা থেকে CSS-এর মূল কথাটা বেরিয়ে আসে। HTML-এর কাজ বলা — “এটা শিরোনাম, এটা মেনু, এটা ঠিকানা”। CSS-এর কাজ বলা — “শিরোনাম সবুজ হবে, মেনু পাশাপাশি বসবে, ঠিকানা ছোট হবে”। একে বলে separation of concerns — কাজ আলাদা রাখার নীতি।

আলাদা রাখার লাভগুলো হাতে-কলমে:

• একবার বদলালে সব জায়গায়: ৫০ পাতার একটি কোচিং সেন্টারের সাইটে শিরোনামের রং বদলাতে একটি ফাইলের একটি লাইন বদলালেই চলে।
• এক কাঠামো, অনেক চেহারা: একই HTML ফোনে এক রকম, বড় পর্দায় আরেক রকম, ছাপার কাগজে আরেক রকম, আর dark mode-এ আরেক রকম দেখানো যায় — HTML না বদলেই।
• অর্থ অক্ষত থাকে: screen reader, সার্চ ইঞ্জিন আর AI-এর ওয়েব-পড়া টুল পড়ে HTML-এর কাঠামো। চেহারার নির্দেশ আলাদা থাকায় কাঠামো পরিষ্কার থাকে।

২ · CSS-এর আগে আর পরে — font ট্যাগ থেকে Baseline

১৯৯১ সালে Tim Berners-Lee যখন ওয়েব বানালেন, তখন HTML-এ চেহারা ঠিক করার প্রায় কিছুই ছিল না। শিরোনাম কত বড় হবে, কোন ফন্টে দেখাবে — সেটা ঠিক করত ব্রাউজার, আর অনেক ব্রাউজারে পাঠক নিজেও ঠিক করতে পারতেন। লেখক শুধু বলতেন “এটা শিরোনাম”।

কিন্তু ওয়েব জনপ্রিয় হতেই ডিজাইনাররা ছাপা পত্রিকার মতো নিয়ন্ত্রণ চাইলেন। ব্রাউজার কোম্পানিগুলো তাড়াহুড়ো করে HTML-এর ভেতরেই চেহারার ট্যাগ যোগ করতে লাগল। Netscape আনল <font> ট্যাগ — <font face="Arial" size="5" color="red">. কিন্তু প্রতিটি শিরোনামে, প্রতিটি পাতায় একই ট্যাগ বারবার লিখতে হতো। রং বদলাতে চাইলে শত শত পাতায় হাজার হাজার জায়গায় হাত দিতে হতো। HTML ফাইল ফুলে উঠল, আর অর্থ চাপা পড়ল চেহারার নিচে।

<!-- ১৯৯০-এর দশকের অভ্যাস — আজ অচল, শুধু ইতিহাস হিসেবে দেখুন -->
<center>
  <font face="Arial" size="6" color="#006600"><b>শাপলা গণপাঠাগার</b></font>
</center>
<font face="Arial" size="2" color="#333333">পাড়ার বই, সবার জন্য</font>

এই বিশৃঙ্খলার সমাধান প্রস্তাব করলেন নরওয়ের Håkon Wium Lie. তিনি তখন CERN-এ — যেখানে ওয়েবের জন্ম — কাজ করতেন। ১৯৯৪ সালের ১০ অক্টোবর তিনি প্রকাশ করেন “Cascading HTML Style Sheets” নামের একটি প্রস্তাব। মূল ভাবনা: চেহারার নিয়ম থাকবে HTML থেকে আলাদা একটি “style sheet”-এ, আর লেখক, পাঠক ও ব্রাউজার — তিন পক্ষের নিয়ম মিলে (cascade হয়ে) চূড়ান্ত চেহারা ঠিক হবে। শিগগিরই তাঁর সাথে যোগ দেন Bert Bos, যিনি নিজেও একটি style sheet ভাষা নিয়ে কাজ করছিলেন। দুজনে মিলে যা দাঁড় করালেন, সেটাই CSS.

“CSS4” কেন নেই

CSS3-এর পর অনেকে ভাবেন, এবার নিশ্চয়ই CSS4 আসবে। আসবে না — আর এটা একটা জনপ্রিয় ভুল ধারণা। CSS3 থেকেই CSS আর একটি বড় সংখ্যা ধরে এগোয় না। প্রতিটি মডিউল নিজের গতিতে এগোয়, নিজের “Level” নম্বর নিয়ে: যেমন Selectors Level 4, Color Level 4, Media Queries Level 5. নতুন মডিউল (যেমন Grid) Level 1 থেকে শুরু হয়। তাই “Selectors Level 4” মানে CSS4 নয়, শুধু ওই মডিউলের চতুর্থ সংস্করণ। শেখানোর সুবিধার জন্য মাঝে মাঝে “CSS4” বা “CSS5” নামে যুগ ভাগ করার প্রস্তাব ওঠে, কিন্তু CSS4 নামে কোনো আনুষ্ঠানিক স্পেসিফিকেশন নেই। CSS Working Group প্রতি বছর একটি “CSS Snapshot” দলিল প্রকাশ করে, যেখানে লেখা থাকে কোন মডিউলগুলো এখন স্থিতিশীল।

তাহলে একজন ডেভেলপার কীভাবে জানবেন কোন ফিচার এখন নিরাপদে ব্যবহার করা যায়? এখানে আসে Baseline — ব্রাউজার-নির্মাতাদের যৌথ উদ্যোগের একটি সহজ লেবেল, যা ২০২৩ সালে চালু হয়। কোনো ফিচার সব প্রধান ব্রাউজারের (Chrome, Edge, Firefox, Safari) সর্বশেষ সংস্করণে এলে সেটি Baseline Newly available; তার আড়াই বছর (৩০ মাস) পরে Baseline Widely available — তখন পুরোনো ফোনের ব্রাউজারেও প্রায় নিশ্চিন্তে চলে। আর যা এখনো সব জায়গায় আসেনি, তা not yet Baseline (Baseline নয়)। MDN আর Can I use-এ এই লেবেল দেখা যায়, আর এই কোর্সেও আমরা এই ভাষাতেই সাপোর্ট বলব।

৩ · একটি CSS rule-এর শরীর — selector, property, value

CSS-এর বাক্য হলো rule. প্রতিটি rule দুটি প্রশ্নের উত্তর দেয়: কাকে সাজাব? আর কীভাবে সাজাব? দোকানের সাইনবোর্ড বানানোর নির্দেশের মতো: “সব সাইনবোর্ড — পটভূমি সবুজ, লেখা সাদা।”

নিচের স্টেপারে একটি rule-কে টুকরো টুকরো করে দেখুন। প্রতিটি অংশের ইংরেজি নামগুলো মনে রাখুন — DevTools, MDN, AI, ইন্টারভিউ — সবখানে এই নামেই কথা হয়।

h1 {
  color: crimson;
  font-size: 2rem;
}

h1 {
  color: crimson;
  font-size: 2rem;
}

h1 {
  color: crimson;
  font-size: 2rem;
}

h1 {
  color: crimson;
  font-size: 2rem;
}

h1 {
  color: crimson;
  font-size: 2rem;
}

/* এক selector-এ কয়েকটি element, কমা দিয়ে */
h1, h2 {
  color: crimson;
  font-size: 2rem;
}

এবার নিজে হাতে। নিচের এডিটরে দুটি rule — একটি শিরোনামের, একটি অনুচ্ছেদের:

h1 {
  color: crimson;
  font-size: 2rem;
}

p {
  background: lightyellow;
  padding: 8px;
}

লেখার ধরন — ফাঁকা জায়গা আর ছোট-বড় অক্ষর

CSS ফাঁকা জায়গা (space, নতুন লাইন, tab) নিয়ে খুঁতখুঁতে নয় — পুরো rule এক লাইনেও লেখা যায়: h1{color:crimson;font-size:2rem}. তবে পড়ার সুবিধায় প্রতিটি declaration আলাদা লাইনে, একটু ভেতরে সরিয়ে লেখাই প্রচলিত। আর property-র নাম ও বেশিরভাগ value-তে বড়-ছোট হাতের অক্ষরের পার্থক্য ধরা হয় না (COLOR: RED চলে), কিন্তু সবাই ছোট হাতেই লেখেন। ব্যতিক্রম মনে রাখুন: class আর id-এর নাম, ফন্টের নাম আর URL-এ অক্ষরের ধরন গুরুত্বপূর্ণ হতে পারে — .Notice আর .notice আলাদা class.

৪ · CSS যোগ করার তিন উপায় — inline, internal, external

CSS লিখলেন, কিন্তু HTML পাতা সেটা পাবে কোথা থেকে? তিনটি পথ আছে, আর তিনটিই আজও বৈধ।

প্রথম দুটি পাশাপাশি দেখুন। (এই প্রিভিউতে কোড বসে পাতার body-তে; আপনার আসল ফাইলে <style> রাখবেন <head>-এ। HTML-এর নিয়মে <style>-এর জায়গা head — ব্রাউজার body-তে পেলেও মানে, কিন্তু validator সেটিকে ভুল ধরে।)

<style>
  p { color: navy; }
  .note { background: #e0f2fe; padding: 6px; }
</style>

<p>এই লাইনের রং এসেছে style ট্যাগ থেকে।</p>
<p class="note">এটিও — সাথে class দিয়ে বাড়তি সাজ।</p>
<p style="color: crimson; font-weight: bold;">
  এই লাইনে inline style — শুধু এই একটি element-এর জন্য।
</p>

External stylesheet — বাস্তব সাইটের নিয়ম

পর্ব ১৫-এর পাঠাগার সাইটের ফোল্ডারে একটি খালি css/ ফোল্ডার রাখা হয়েছিল — এখন তার কাজ এলো। চারটি পাতা, কিন্তু CSS ফাইল একটাই:

shapla-library/
├── index.html
├── about.html
├── services.html
├── contact.html
├── css/
│   └── style.css     ← চার পাতার একটাই চেহারার ফাইল
└── images/
    └── logo.svg

প্রতিটি পাতার head-এ একটি লাইন যোগ করুন। rel="stylesheet" বলে “এই ফাইলটি এই পাতার স্টাইলশিট”, আর href-এ ফাইলের ঠিকানা — পর্ব ৫-এর মতোই relative URL:

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>শাপলা গণপাঠাগার — উত্তরপাড়া, বগুড়া</title>
  <link rel="stylesheet" href="css/style.css">
</head>

আর css/style.css ফাইলে কোনো HTML ট্যাগ থাকে না — শুধু CSS rule, শুরু থেকে শেষ পর্যন্ত। কয়েকটি ছোট কিন্তু গুরুত্বপূর্ণ খুঁটিনাটি:

• type="text/css" লাগে না। পুরোনো টিউটোরিয়ালে দেখবেন, কিন্তু HTML5 থেকে এটি ঐচ্ছিক — stylesheet মানেই CSS.
• <link> একটি void element. এর কোনো বন্ধ ট্যাগ নেই।
• ঠিকানা ভুল হলে চুপচাপ ব্যর্থতা। href ভুল হলে পাতা কোনো error দেখায় না, শুধু সাদামাটা দেখায়। DevTools-এর Network প্যানেলে style.css-এর পাশে লাল 404 দেখলেই বুঝবেন।
• একাধিক ফাইলও চলে। কয়েকটি <link> দিলে সবগুলোর নিয়ম মিলে কাজ করে; media="print" দিলে একটি ফাইল শুধু ছাপার সময় খাটে। (CSS-এর ভেতর থেকে @import দিয়েও আরেকটি ফাইল ডাকা যায়, কিন্তু তাতে ফাইলগুলো একটির পর একটি নামে, পাতা দেরিতে আসে — <link>-ই ভালো।)

৫ · কেন external সেরা — ক্যাশ, পুনর্ব্যবহার আর একটু সাবধানতা

তুলনার টেবিলে “ক্যাশ” সারিটিই external stylesheet-এর আসল শক্তি। Cache মানে আগে আনা জিনিসের একটি কপি কাছে রেখে দেওয়া। পাড়ার মুদি দোকানদার প্রতিবার ক্রেতা এলে পাইকারি বাজারে দৌড়ান না — বেশি বিক্রি হওয়া জিনিস দোকানের তাকেই রাখেন। ব্রাউজারও একবার আনা style.css নিজের তাকে (disk cache) রাখে, পরের পাতায় আবার আনে না। ধাপে ধাপে দেখুন, একজন পাঠক যখন পাঠাগারের সাইটে প্রথম আসেন:

সংক্ষেপে external-এর লাভ: এক জায়গায় বদল, সব পাতায় একই চেহারা, ক্যাশের কারণে দ্রুত, আর পরিষ্কার HTML. তবে বড় সাইটে প্রথম পর্দার জরুরি CSS কখনো ইচ্ছা করে head-এ inline রাখা হয় (critical CSS), যাতে প্রথম পাতা আরও তাড়াতাড়ি আঁকা যায়। সেই কৌশল পর্ব ৪৯-এ।

৬ · ব্রাউজারের নিজের CSS — user-agent stylesheet, reset আর normalize

একটা প্রশ্ন ভাবুন: পর্ব ৩ থেকে ১৫ পর্যন্ত আপনি একটিও CSS লেখেননি, তবু <h1> বড় আর মোটা দেখাল, লিংক নীল আর দাগ দেওয়া, তালিকায় বুলেট, অনুচ্ছেদের আগে-পরে ফাঁক। এই চেহারা এলো কোথা থেকে? উত্তর: প্রতিটি ব্রাউজারের ভেতরে একটি তৈরি-করা CSS ফাইল থাকে, যাকে বলে user-agent stylesheet (“user agent” মানে ব্রাউজার)। WHATWG-এর HTML স্পেসিফিকেশনের “Rendering” অংশে এই ডিফল্ট CSS-এর একটি প্রস্তাবিত রূপ লেখা আছে, আর ব্রাউজারগুলো মোটামুটি সেটাই মানে।

সাধারণ পাতায় এর ফলে body-র চারপাশে 8px ফাঁক আর লেখা 16px হয়। নিচের ছোট স্ক্রিপ্টটি কয়েকটি element-এর আসল মান মেপে দেখায়। (এই ছোট পরীক্ষাগারের body-তে নিজস্ব একটু স্টাইল আছে, তাই আমরা মাপছি body-র লেখার তুলনায় অনুপাত — অনুপাতগুলো সব পাতায় একই।)

// h1, p, ul-এর জন্য কোনো CSS লেখা হয়নি — ব্রাউজার নিজে কী দিয়েছে?
function cs(sel) { return getComputedStyle(document.querySelector(sel)); }
const base = parseFloat(cs('body').fontSize);
const h1Size = parseFloat(cs('h1').fontSize);

console.log('h1 font-size:', (h1Size / base).toFixed(2), 'x body');
console.log('h1 margin-top:', (parseFloat(cs('h1').marginTop) / h1Size).toFixed(2), 'em');
console.log('h1 font-weight:', cs('h1').fontWeight);
console.log('p margin-top:', (parseFloat(cs('p').marginTop) / base).toFixed(2), 'em');
console.log('ul padding-left:', cs('ul').paddingLeft);
console.log('ul list-style-type:', cs('ul').listStyleType);

এই ডিফল্টগুলো ভালো জিনিস — CSS লোড না হলেও পাতা পড়া যায়, শিরোনাম চেনা যায়। কিন্তু নকশার সময় এগুলো বাধা হয়: body-র 8px ফাঁক, বোতাম-ইনপুটের আলাদা ফন্ট, আর পুরোনো দিনে ব্রাউজারভেদে আলাদা ডিফল্ট। এর জন্য দুটি পুরোনো দর্শন আছে:

আজকের প্রচলিত পথ এই দুইয়ের মাঝামাঝি: কয়েক লাইনের একটি আধুনিক ছোট reset, যা শুধু সবচেয়ে বিরক্তিকর ডিফল্টগুলো বদলায়। নিচের এডিটরে প্রতিটি element-এর চারপাশে কমলা দাগ দেওয়া আছে, যাতে ফাঁকগুলো চোখে পড়ে:

/* ফাঁক দেখানোর জন্য প্রতিটি element-এ দাগ */
* { outline: 1px dashed #f97316; }

/* ---- একটি আধুনিক ছোট reset ---- */
*, *::before, *::after {
  box-sizing: border-box;
}
body, h1, p, ul {
  margin: 0;
}
button, input {
  font: inherit;
}
body {
  line-height: 1.5;
}

৭ · ভুল হলে CSS চুপ থাকে — ক্ষমাশীল নিয়ম আর DevTools

C বা Java-য় একটি ; বাদ পড়লে প্রোগ্রাম চলেই না, স্পষ্ট error আসে। JavaScript-এও ভুল হলে console-এ লাল লেখা ওঠে। CSS-এর আচরণ একেবারে আলাদা: ভুল declaration ব্রাউজার চুপচাপ ফেলে দেয়, আর বাকি সবকিছু চালিয়ে যায়। একে বলে forgiving error handling — ক্ষমাশীল ভুল-সামলানো।

নিচের CSS-এ তিনটি ভুল লুকানো আছে, যা মিলে চারটি নির্দেশ ডুবিয়েছে — অথচ একটিও কোনো error দেবে না। আগে প্রিভিউ দেখুন, তারপর স্টেপারে ব্রাউজারের মাথার ভেতরে ঢুকব:

.notice {
  color: crimson;
  colr: navy;
  font-size: 20 px;
  background: #fff3cd
  border: 2px solid orange;
  padding: 12px;
}

1.notice {2  color: crimson;3  colr: navy;4  font-size: 20 px;5  background: #fff3cd6  border: 2px solid orange;7  padding: 12px;8}

এত ক্ষমা কেন? — ভবিষ্যতের জন্য দরজা খোলা

এই আচরণ অলসতা নয়, সুচিন্তিত নকশা। ধরুন text-wrap: balance — একটি নতুন property, যা শিরোনামের লাইনগুলো সমান দৈর্ঘ্যে ভাগ করে সুন্দর দেখায়। ২০২৪ সালে এটি সব প্রধান ব্রাউজারে পৌঁছায় (Baseline Newly available — সব প্রধান ব্রাউজারের নতুন সংস্করণে আছে, পুরোনোগুলোতে নেই)। CSS যদি C-এর মতো কড়া হতো, পুরোনো ফোনের ব্রাউজার অচেনা property দেখেই পুরো stylesheet বাতিল করত। কিন্তু CSS-এ সে শুধু ওই লাইনটি ফেলে দেয়; শিরোনাম একটু কম সুন্দর ভাঙে, বাকি সব ঠিক। নতুন ফিচার যোগ করা নিরাপদ — একে বলে forward compatibility.

এই নিয়ম থেকেই এসেছে একটি পুরোনো কৌশল — fallback declaration. একই property দুবার লিখুন: আগে সবাই বোঝে এমন মান, পরে নতুন মান। নতুন ব্রাউজার দুটোই বোঝে, তাই পরেরটা জেতে; পুরোনো ব্রাউজার নতুনটা ফেলে দেয়, তাই আগেরটা থাকে:

h1 {
  color: #2e7d32;                        /* সব ব্রাউজার বোঝে */
  color: oklch(52% 0.13 145);            /* নতুন রং-পদ্ধতি; না বুঝলে ওপরেরটা থাকে */
  text-wrap: balance;                    /* না বুঝলে শুধু এই লাইনটি বাদ */
}

(oklch() রং-পদ্ধতির গল্প পর্ব ২০-এ, আর আরও নিয়ন্ত্রিত পথ @supports পর্ব ৪৮-এ।)

DevTools-এ CSS-এর ভুল ধরা

যেহেতু CSS চুপ থাকে, ভুল ধরার আসল জায়গা DevTools (পর্ব ২)। পদ্ধতিটা প্রতিদিনের অভ্যাস করে ফেলুন:

1. যে element ঠিক দেখাচ্ছে না, তাতে ডান-ক্লিক করে “Inspect” চাপুন।
2. Elements প্যানেলের পাশে Styles অংশে ওই element-এ খাটা সব rule দেখবেন — আপনার ফাইলের নাম ও লাইন নম্বরসহ, আর নিচে user agent stylesheet-এর নিয়ম।
3. কাটা দাগ + ⚠ চিহ্ন = ভুল declaration (অচেনা property বা ভুল value). মাউস রাখলে কারণ লেখা আসে।
4. শুধু কাটা দাগ, কোনো চিহ্ন নেই = declaration ঠিক আছে, কিন্তু অন্য কোনো rule তাকে হারিয়ে দিয়েছে (cascade — পর্ব ১৮)। দুটির পার্থক্য চিনতে পারা debugging-এর অর্ধেক কাজ।
5. আপনার rule-টা তালিকাতেই নেই? তাহলে selector ভুল, অথবা CSS ফাইলটাই আসেনি — Network প্যানেলে 404 খুঁজুন।

আর ফাইল ধরে যাচাই করতে আছে W3C-র CSS Validator, আর কোড লেখার সময়ই ভুল ধরতে VS Code-এর নিজস্ব CSS যাচাই (অচেনা property-র নিচে ঢেউ খেলানো দাগ) বা Stylelint-এর মতো টুল। পুরো debugging কৌশল পর্ব ৪৭-এ।

৮ · comment, selector-এর এক ঝলক, আর “CSS কি প্রোগ্রামিং ভাষা?”

CSS-এ comment

CSS-এ comment লেখার একটিই উপায়: /* দিয়ে শুরু, */ দিয়ে শেষ। এক লাইন বা অনেক লাইন — দুটোই চলে। HTML-এর <!-- --> বা JavaScript-এর // CSS-এ comment নয়! আর comment-এর ভেতরে আরেকটি comment রাখা যায় না — প্রথম */-তেই comment শেষ হয়ে যায়। comment দিয়ে ফাইলকে ভাগ করুন, অদ্ভুত মানের কারণ লিখুন, বা একটি নিয়ম সাময়িক বন্ধ রাখুন — তবে CSS ফাইল যে কেউ পড়তে পারে, তাই গোপন কিছু নয়।

তিন রকম সহজ selector — এক ঝলক

এতক্ষণ বেশিরভাগ জায়গায় element-এর নাম দিয়ে selector লিখেছেন। আরও দুটি প্রতিদিনের selector আছে, যার পুরো গল্প পরের পর্বে: class selector — বিন্দু দিয়ে শুরু, .tag মানে class="tag" যার আছে (পাতায় যতবার খুশি); আর id selector — হ্যাশ চিহ্ন দিয়ে, #today মানে id="today" যার (পাতায় একটিই)। নিচের এডিটরে তিনটিই, comment-সহ:

/* element selector: পাতার সব p */
p {
  color: #1d4ed8;
}

/* class selector: class="tag" যার আছে */
.tag {
  display: inline-block;
  background: #dcfce7;
  padding: 2px 10px;
}

/* id selector: পাতায় একটিই */
#today {
  font-weight: bold;
}

/* h2 { color: crimson; }   ← comment-এর ভেতরে, তাই বন্ধ */

class কেন id-এর চেয়ে বেশি ব্যবহার হয়, attribute selector, combinator (nav a-এর মতো “ভেতরের” selector) — সব পর্ব ১৭-এ। আর একই element-কে দুটি rule ধরলে কে জেতে (যেমন ওপরের এডিটরে p আর .tag দুটোই “উপন্যাস”-কে ধরেছে) — সেটা cascade আর specificity, পর্ব ১৮-এ।

CSS কি প্রোগ্রামিং ভাষা?

এক পক্ষ বলেন, CSS-এ loop বা নিজের function নেই, তাই এটা প্রোগ্রামিং ভাষা নয়। আরেক পক্ষ দেখান, CSS-এ এখন variable (পর্ব ৩৩), হিসাব (calc()), শর্তের মতো আচরণ (media query, :has()) আছে; এমনকি কেউ কেউ দেখিয়েছেন, মানুষের ক্লিকের সাহায্য নিয়ে HTML আর CSS দিয়ে “Rule 110” নামের একটি গাণিতিক যন্ত্র চালানো যায়, যা তাত্ত্বিকভাবে যেকোনো হিসাব করতে সক্ষম।

সবচেয়ে কাজের উত্তরটা সম্ভবত এই: CSS একটি declarative language — আপনি বলেন কী চান (“শিরোনাম সবুজ, কার্ডগুলো তিন কলামে”), ব্রাউজার ঠিক করে কীভাবে করবে। SQL-ও এমন; C বা JavaScript সেখানে imperative — ধাপগুলো আপনি লেখেন। তকমার তর্কের চেয়ে বড় কথা: CSS একটি গভীর ভাষা, আর ভালো CSS লিখতে পারা ফ্রন্ট-এন্ড চাকরির বাজারে আলাদা মূল্যের দক্ষতা — “সহজ জিনিস” ভেবে অবহেলা করলে পরে ভুগতে হয়।

৯ · AI-এর যুগে — CSS-এর কাজ AI-কে দিলে কী দেখবেন

“আমার পাঠাগারের সাইটের জন্য সুন্দর CSS লিখে দাও” — AI কয়েক সেকেন্ডে শত লাইন দেবে, আর প্রিভিউতে চমৎকারও দেখাবে। কিন্তু CSS-এর ক্ষমাশীল স্বভাবের কারণে এখানে একটা বিশেষ বিপদ আছে: AI-এর লেখা ভুল বা অচল লাইন কোনো error দেয় না। অচেনা property, পুরোনো লাইন, বানানো value — সব চুপচাপ বাদ পড়ে, আর কেউ জানে না কোন লাইন আসলে কাজ করছে।

AI সাধারণত যেসব ভুল করে

AI-এর দেওয়া CSS হাতে পেলে — যাচাইয়ের চেকলিস্ট

• CSS আলাদা ফাইলে আছে, আর প্রতিটি পাতার head-এ <link rel="stylesheet">-এর ঠিকানা ঠিক — Network প্যানেলে style.css-এর পাশে 200, 404 নয়
• DevTools-এর Styles প্যানেলে কয়েকটি element দেখেছি — কোথাও ⚠ চিহ্নসহ কাটা দাগ (ভুল declaration) নেই
• W3C CSS Validator-এ ফাইল যাচাই করেছি, আর HTML validator.w3.org-এ — inline style বা অচল ট্যাগ ঢোকেনি
• সন্দেহজনক property-র নাম MDN-এ খুঁজেছি; নতুন ফিচারের Baseline অবস্থা MDN বা Can I use-এ দেখেছি
• Tab চেপে পুরো পাতা ঘুরেছি — প্রতিটি লিংক আর বোতামে focus-এর দাগ দেখা যায়
• Lighthouse-এর Accessibility আর Performance রিপোর্ট চালিয়েছি; CSS ফাইল মুছে দেখেছি পাতা তবু পড়া যায় কি না