মৌলিক CSS এর নীতিগুলি শেখার সময়, রক্ষণাবেক্ষণযোগ্যতা নিশ্চিত করার জন্য একজনকে মডুলার, পুনরায় ব্যবহারযোগ্য এবং বর্ণনামূলক শৈলী লিখতে শেখানো হয়। কিন্তু যখন বিকাশকারীরা বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলির সাথে জড়িত হন, তখন প্রায়শই অনাকাঙ্ক্ষিত এলাকায় স্টাইল ফাঁস ছাড়া UI বৈশিষ্ট্যগুলি যোগ করা অসম্ভব বলে মনে হয়। এই সমস্যাটি প্রায়শই একটি স্ব-পূরণকারী লুপে পরিণত হয়; যে শৈলীগুলি তাত্ত্বিকভাবে একটি উপাদান বা শ্রেণীতে স্কোপ করা হয় সেগুলি দেখাতে শুরু করে যেখানে তারা অন্তর্ভুক্ত নয়। এটি বিকাশকারীকে ফাঁস হওয়া শৈলীগুলিকে ওভাররাইড করার জন্য আরও নির্দিষ্ট নির্বাচক তৈরি করতে বাধ্য করে, যা দুর্ঘটনাক্রমে গ্লোবাল স্টাইলগুলিকে ওভাররাইড করে এবং আরও অনেক কিছু। কঠোর শ্রেণির নাম কনভেনশন, যেমন BEM, এই সমস্যার একটি তাত্ত্বিক সমাধান। BEM (ব্লক, এলিমেন্ট, মডিফায়ার) পদ্ধতি হল CSS ফাইলের মধ্যে পুনঃব্যবহারযোগ্যতা এবং গঠন নিশ্চিত করার জন্য CSS ক্লাসের নামকরণের একটি পদ্ধতিগত উপায়। এই ধরনের নামকরণ প্রথাগুলি উপাদান এবং তাদের অবস্থা বর্ণনা করার জন্য ডোমেন ভাষা ব্যবহার করে জ্ঞানীয় লোড কমাতে পারে এবং সঠিকভাবে প্রয়োগ করা হলে, বড় অ্যাপ্লিকেশনগুলির জন্য শৈলী বজায় রাখা সহজ করে তুলতে পারে। বাস্তব জগতে, যাইহোক, এটি সবসময় এর মতো কাজ করে না। অগ্রাধিকার পরিবর্তন হতে পারে, এবং পরিবর্তনের সাথে, বাস্তবায়ন অসঙ্গত হয়ে যায়। এইচটিএমএল কাঠামোতে ছোট পরিবর্তনের জন্য অনেক CSS শ্রেণীর নাম সংশোধনের প্রয়োজন হতে পারে। অত্যন্ত ইন্টারেক্টিভ ফ্রন্ট-এন্ড অ্যাপ্লিকেশানগুলির সাথে, BEM প্যাটার্ন অনুসরণ করে ক্লাসের নামগুলি দীর্ঘ এবং অপ্রত্যাশিত হয়ে উঠতে পারে (যেমন, অ্যাপ-ব্যবহারকারী-ওভারভিউ__স্ট্যাটাস--প্রমাণিত করা হচ্ছে), এবং নামকরণের নিয়মগুলি সম্পূর্ণরূপে মেনে না চলা সিস্টেমের কাঠামোকে ভেঙে দেয়, যার ফলে এর সুবিধাগুলি অস্বীকার করে। এই চ্যালেঞ্জগুলির পরিপ্রেক্ষিতে, এতে অবাক হওয়ার কিছু নেই যে ডেভেলপাররা ফ্রেমওয়ার্কের দিকে ঝুঁকছেন, টেলউইন্ড হল সবচেয়ে জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক। শৈলীগুলির মধ্যে একটি অজেয় নির্দিষ্টতার যুদ্ধের মতো লড়াই করার চেষ্টা করার পরিবর্তে, CSS ক্যাসকেড ছেড়ে দেওয়া এবং সম্পূর্ণ বিচ্ছিন্নতার গ্যারান্টি দেয় এমন সরঞ্জামগুলি ব্যবহার করা সহজ। ডেভেলপাররা ইউটিলিটিগুলির উপর আরও ঝুঁকছেন আমরা কিভাবে জানি যে কিছু বিকাশকারী ক্যাসকেড শৈলী এড়াতে আগ্রহী? এটি "আধুনিক" ফ্রন্ট-এন্ড টুলিংয়ের উত্থান - যেমন CSS-in-JS ফ্রেমওয়ার্ক - বিশেষভাবে সেই উদ্দেশ্যে ডিজাইন করা হয়েছে। বিচ্ছিন্ন শৈলীগুলির সাথে কাজ করা যা নির্দিষ্ট উপাদানগুলির জন্য শক্তভাবে স্কোপ করা তাজা বাতাসের শ্বাসের মতো মনে হতে পারে। এটি জিনিসগুলির নামকরণের প্রয়োজনীয়তাকে সরিয়ে দেয় - এখনও সবচেয়ে ঘৃণ্য এবং সময়সাপেক্ষ ফ্রন্ট-এন্ড কাজগুলির মধ্যে একটি - এবং বিকাশকারীদের সিএসএস উত্তরাধিকারের সুবিধাগুলি সম্পূর্ণরূপে না বুঝে বা লাভ না করেই উত্পাদনশীল হতে দেয়৷ কিন্তু CSS ক্যাসকেড ডিচ করা তার নিজস্ব সমস্যা নিয়ে আসে। উদাহরণস্বরূপ, জাভাস্ক্রিপ্টে স্টাইল রচনার জন্য ভারী বিল্ড কনফিগারেশনের প্রয়োজন হয় এবং প্রায়শই স্টাইলগুলিকে কম্পোনেন্ট মার্কআপ বা এইচটিএমএল এর সাথে বিশ্রীভাবে মিশে যায়। নামকরণের নিয়মগুলি সাবধানে বিবেচনা করার পরিবর্তে, আমরা আমাদের জন্য নির্বাচক এবং শনাক্তকারীগুলিকে স্বয়ংক্রিয়ভাবে তৈরি করার জন্য বিল্ড টুলগুলিকে অনুমতি দিই (যেমন, .jsx-3130221066), যার জন্য ডেভেলপারদের নিজের মধ্যে আরেকটি ছদ্ম-ভাষা বজায় রাখতে হবে। (যেন আপনার সমস্ত উপাদানের প্রভাবগুলি কী করে তা বোঝার জ্ঞানীয় লোড ইতিমধ্যে যথেষ্ট ছিল না!) টুলিং-এ ক্লাসের নামকরণের কাজটিকে আরও বিমূর্ত করার অর্থ হল যে বিকাশকারী সরঞ্জামগুলির মতো লাইভ ডিবাগিং সমর্থনকারী নেটিভ ব্রাউজার বৈশিষ্ট্যগুলিকে ব্যবহার করার পরিবর্তে, বিকাশের জন্য সংকলিত নির্দিষ্ট অ্যাপ্লিকেশন সংস্করণগুলিতে প্রাথমিক ডিবাগিং প্রায়ই সীমাবদ্ধ থাকে। এটি প্রায় এমনই যে ওয়েব ইতিমধ্যে যা সরবরাহ করে তা বিমূর্ত করার জন্য আমরা যে সরঞ্জামগুলি ব্যবহার করছি সেগুলি ডিবাগ করার জন্য আমাদের সরঞ্জামগুলি বিকাশ করতে হবে - সবই স্ট্যান্ডার্ড CSS লেখার "ব্যথা" থেকে দূরে থাকার জন্য। সৌভাগ্যবশত, আধুনিক CSS বৈশিষ্ট্যগুলি শুধুমাত্র স্ট্যান্ডার্ড CSS লেখাকে আরও নমনীয় করে তোলে না বরং আমাদের মতো ডেভেলপারদের ক্যাসকেড পরিচালনা করতে এবং এটিকে আমাদের জন্য কার্যকর করার জন্য অনেক বেশি শক্তি দেয়। CSS ক্যাসকেড স্তরগুলি একটি দুর্দান্ত উদাহরণ, তবে আরও একটি বৈশিষ্ট্য রয়েছে যা আশ্চর্যজনকভাবে মনোযোগের অভাব পায় - যদিও এটি এখন পরিবর্তিত হচ্ছে যে এটি সম্প্রতি বেসলাইন সামঞ্জস্যপূর্ণ হয়ে উঠেছে। CSS @স্কোপ অ্যাট-রুল আমি CSS @scope at-rule-কে আমরা কভার করেছি এমন ধরনের স্টাইল-লিক-জনিত উদ্বেগের জন্য একটি সম্ভাব্য প্রতিকার বলে মনে করি, যা আমাদেরকে বিমূর্ততা এবং অতিরিক্ত বিল্ড টুলিংয়ের জন্য নেটিভ ওয়েব সুবিধার সাথে আপস করতে বাধ্য করে না। "@স্কোপ CSS অ্যাট-রুল আপনাকে নির্দিষ্ট DOM সাবট্রিতে উপাদান নির্বাচন করতে সক্ষম করে, অত্যধিক-নির্দিষ্ট নির্বাচককে ওভাররাইড করা কঠিন, এবং আপনার নির্বাচকদের DOM কাঠামোর সাথে খুব শক্তভাবে সংযুক্ত না করেই উপাদানগুলিকে সুনির্দিষ্টভাবে লক্ষ্য করে।"- MDN
অন্য কথায়, আমরা উত্তরাধিকার, ক্যাসকেডিং বা এমনকি উদ্বেগের মৌলিক বিচ্ছেদ ছাড়াই নির্দিষ্ট ক্ষেত্রে বিচ্ছিন্ন শৈলীগুলির সাথে কাজ করতে পারি।যেটি ফ্রন্ট-এন্ড ডেভেলপমেন্টের একটি দীর্ঘমেয়াদি পথপ্রদর্শক নীতি। এছাড়াও, এটিতে দুর্দান্ত ব্রাউজার কভারেজ রয়েছে। আসলে, ফায়ারফক্স 146 ডিসেম্বরে @স্কোপের জন্য সমর্থন যোগ করেছে, এটিকে প্রথমবারের মতো বেসলাইন সামঞ্জস্যপূর্ণ করে তুলেছে। এখানে @স্কোপ নিয়ম বনাম BEM প্যাটার্ন ব্যবহার করে একটি বোতামের মধ্যে একটি সহজ তুলনা রয়েছে:
<স্টাইল> .button .button__text { /* বোতাম পাঠ্য শৈলী */ } .button .button__icon { /* বোতাম আইকন শৈলী */ } .button--প্রাথমিক { প্রাথমিক বোতাম শৈলী */ }
<বাটন ক্লাস="প্রাথমিক-বাটন"> আমাকে ক্লিক করুন →
<স্টাইল> @স্কোপ (.প্রাথমিক-বোতাম) { span:first-child { /* বোতাম পাঠ্য শৈলী */ } স্প্যান:লাস্ট-চাইল্ড { /* বোতাম আইকন শৈলী */ } }
@স্কোপ নিয়ম কম জটিলতার সাথে নির্ভুলতার জন্য অনুমতি দেয়। বিকাশকারীকে আর ক্লাসের নাম ব্যবহার করে সীমানা তৈরি করতে হবে না, যা তাদের নেটিভ এইচটিএমএল উপাদানের উপর ভিত্তি করে নির্বাচকদের লেখার অনুমতি দেয়, যার ফলে সিএসএস ক্লাস নামের প্যাটার্নের প্রয়োজনীয়তা দূর হয়। ক্লাসের নাম ব্যবস্থাপনার প্রয়োজনীয়তা দূর করে, @scope বড় প্রকল্পে CSS-এর সাথে যুক্ত ভয়কে দূর করতে পারে। মৌলিক ব্যবহার শুরু করার জন্য, আপনার CSS-এ @scope নিয়ম যোগ করুন এবং একটি রুট নির্বাচক সন্নিবেশ করুন যেখানে শৈলী স্কোপ করা হবে: @স্কোপ (<নির্বাচক>) { /* শৈলীগুলি <নির্বাচক> */ }
সুতরাং, উদাহরণস্বরূপ, যদি আমরা একটি
@স্কোপ (নেভি) { একটি { /* লিংক শৈলী নেভি স্কোপের মধ্যে */ }
একটি:সক্রিয় { /* সক্রিয় লিঙ্ক শৈলী */ }
a:active::before { /* অতিরিক্ত স্টাইলিং এর জন্য ছদ্ম-এলিমেন্ট সহ সক্রিয় লিঙ্ক */ }
@media (সর্বোচ্চ-প্রস্থ: 768px) { একটি { /* প্রতিক্রিয়াশীল সমন্বয় */ } } }
এটি, নিজস্বভাবে, একটি যুগান্তকারী বৈশিষ্ট্য নয়। যাইহোক, একটি নিম্ন সীমানা তৈরি করতে সুযোগে একটি দ্বিতীয় যুক্তি যোগ করা যেতে পারে, কার্যকরভাবে সুযোগের শুরু এবং শেষ পয়েন্টগুলিকে সংজ্ঞায়িত করে।
/* ul-এর অভ্যন্তরে কোনো উপাদানে শৈলী প্রয়োগ করা হবে না */ @স্কোপ (নেভি) থেকে (উল) { একটি { ফন্ট-আকার: 14px; } }
এই অনুশীলনটিকে ডোনাট স্কোপিং বলা হয়, এবং বিভিন্ন পদ্ধতি ব্যবহার করা যেতে পারে, যার মধ্যে রয়েছে একই রকম, অত্যন্ত নির্দিষ্ট নির্বাচকদের একটি সিরিজ যা DOM কাঠামোর সাথে শক্তভাবে সংযুক্ত করা, a :not pseudo-selector, অথবা ভিন্ন CSS পরিচালনা করতে
/*
উপসংহার ইউটিলিটি-প্রথম CSS ফ্রেমওয়ার্ক, যেমন Tailwind, প্রোটোটাইপিং এবং ছোট প্রকল্পের জন্য ভাল কাজ করে। তাদের সুবিধাগুলি দ্রুত হ্রাস পায়, তবে, যখন কয়েকটি বিকাশকারীর সাথে জড়িত বড় প্রকল্পগুলিতে ব্যবহার করা হয়। ফ্রন্ট-এন্ড ডেভেলপমেন্ট গত কয়েক বছরে ক্রমশ অত্যধিক জটিল হয়ে উঠেছে এবং CSSও এর ব্যতিক্রম নয়। যদিও @স্কোপ নিয়ম একটি নিরাময়-সমস্ত নয়, এটি জটিল টুলিংয়ের প্রয়োজনীয়তা কমাতে পারে। কৌশলগত শ্রেণির নামকরণের জায়গায় বা পাশাপাশি ব্যবহার করা হলে, @scope রক্ষণাবেক্ষণযোগ্য CSS লেখাকে সহজ এবং আরও মজাদার করে তুলতে পারে। আরও পড়া
CSS @scope (MDN) "সিএসএস @স্কোপ", জুয়ান দিয়েগো রদ্রিগেজ (সিএসএস-ট্রিকস) ফায়ারফক্স 146 রিলিজ নোট (ফায়ারফক্স) ব্রাউজার সমর্থন (CanIUse) জনপ্রিয় CSS ফ্রেমওয়ার্ক (CSS 2024 এর অবস্থা) সিএসএস-এ "সি": ক্যাসকেড", থমাস ইপ (সিএসএস-ট্রিকস) BEM পরিচিতি (BEM পান)
