মূল CSS ৰ নীতিসমূহ শিকিলে, ৰক্ষণাবেক্ষণযোগ্যতা নিশ্চিত কৰিবলৈ মডিউলাৰ, পুনৰ ব্যৱহাৰযোগ্য, আৰু বৰ্ণনাত্মক শৈলী লিখিবলৈ শিকোৱা হয়। কিন্তু যেতিয়া ডেভেলপাৰসকল বাস্তৱ-পৃথিৱীৰ এপ্লিকেচনসমূহৰ সৈতে জড়িত হয়, অনুপ্ৰাণিত অঞ্চললৈ শৈলীসমূহ লিক নোহোৱাকৈ UI বৈশিষ্ট্যসমূহ যোগ কৰাটো প্ৰায়ে অসম্ভৱ অনুভৱ হয়। এই বিষয়টো প্ৰায়ে স্নোবল হৈ এটা স্ব-পূৰ্ণতাপূৰ্ণ লুপলৈ পৰিণত হয়; তাত্ত্বিকভাৱে এটা উপাদান বা শ্ৰেণীৰ বাবে পৰিসৰ কৰা শৈলীসমূহ য’ত ইয়াৰ অন্তৰ্গত নহয় তাতেই দেখাবলৈ আৰম্ভ কৰে। ই ডেভেলপাৰক লিক কৰা শৈলীসমূহ অভাৰৰাইড কৰিবলে আৰু অধিক নিৰ্দিষ্ট নিৰ্বাচক সৃষ্টি কৰিবলৈ বাধ্য কৰে, যি তাৰ পিছত ভুলবশতঃ গোলকীয় শৈলীসমূহ অভাৰৰাইড কৰে, ইত্যাদি। কঠিন শ্ৰেণী নামৰ নিয়ম, যেনে BEM, এই সমস্যাৰ এটা তাত্ত্বিক সমাধান। BEM (ব্লক, উপাদান, পৰিবৰ্তক) পদ্ধতি হৈছে CSS নথিপত্ৰসমূহৰ ভিতৰত পুনৰ ব্যৱহাৰযোগ্যতা আৰু গঠন সুনিশ্চিত কৰিবলে CSS শ্ৰেণীসমূহৰ নামকৰণৰ এটা পদ্ধতিগত উপায়। এই ধৰণৰ নামকৰণ নিয়মসমূহে উপাদানসমূহ আৰু সিহতৰ অৱস্থা বৰ্ণনা কৰিবলে ডমেইন ভাষাৰ সহায় লৈ জ্ঞানমূলক লোড হ্ৰাস কৰিব পাৰে, আৰু যদি সঠিকভাৱে প্ৰণয়ন কৰা হয়, বৃহৎ এপ্লিকেচনসমূহৰ বাবে শৈলীসমূহ ৰক্ষণাবেক্ষণ কৰাটো সহজ কৰিব পাৰে। বাস্তৱ জগতত অৱশ্যে সদায় তেনেকুৱা নহয়। অগ্ৰাধিকাৰ সলনি হ’ব পাৰে, আৰু পৰিৱৰ্তনৰ লগে লগে কাৰ্যকৰীকৰণ অসামঞ্জস্যপূৰ্ণ হৈ পৰে। HTML গঠনৰ সৰু সৰু পৰিবৰ্তনৰ বাবে বহুতো CSS শ্ৰেণীৰ নাম পুনৰীক্ষণৰ প্ৰয়োজন হব পাৰে। অতি পাৰস্পৰিক ফ্ৰন্ট-এণ্ড এপ্লিকেচনসমূহৰ সৈতে, BEM আৰ্হি অনুসৰণ কৰা শ্ৰেণী নামসমূহ দীঘলীয়া আৰু অসহজ হ'ব পাৰে (যেনে, app-user-overview__status--is-authenticating), আৰু নামকৰণ নিয়মসমূহ সম্পূৰ্ণৰূপে মানি নচলে চিস্টেমৰ গঠন ভংগ কৰে, যাৰ ফলত ইয়াৰ সুবিধাসমূহ নস্যাৎ হয়। এই প্ৰত্যাহ্বানসমূহৰ প্ৰতি লক্ষ্য ৰাখি, ডেভেলপাৰসকলে ফ্ৰেমৱৰ্কৰ ফালে মুখ কৰাটো কোনো আচৰিত কথা নহয়, Tailwind হৈছে আটাইতকৈ জনপ্ৰিয় CSS ফ্ৰেমৱৰ্ক। শৈলীসমূহৰ মাজত এটা অবিজয়ী নিৰ্দিষ্টতা যুদ্ধৰ দৰে দেখা যোৱাটো যুঁজিবলৈ চেষ্টা কৰাৰ পৰিৱৰ্তে, CSS Cascade এৰি দিয়া আৰু সম্পূৰ্ণ পৃথকীকৰণৰ নিশ্চয়তা দিয়া সঁজুলিসমূহ ব্যৱহাৰ কৰাটো সহজ। ডেভেলপাৰসকলে ইউটিলিটিৰ ওপৰত অধিক হেলান দিয়ে আমি কেনেকৈ জানিম যে কিছুমান ডেভেলপাৰে কেছকেড শৈলী এৰাই চলিবলৈ আগ্ৰহী? ই হৈছে “আধুনিক” ফ্ৰন্ট-এণ্ড সঁজুলিৰ উত্থান — যেনে CSS-in-JS ফ্ৰেমৱৰ্ক — সেই উদ্দেশ্যে বিশেষভাৱে ডিজাইন কৰা হৈছে। নিৰ্দিষ্ট উপাদানসমূহৰ সৈতে টানকৈ পৰিসৰ কৰা বিচ্ছিন্ন শৈলীৰ সৈতে কাম কৰাটো শুদ্ধ বতাহৰ উশাহ যেন লাগিব পাৰে। ই বস্তুৰ নামকৰণৰ প্ৰয়োজনীয়তা আঁতৰায় — এতিয়াও আটাইতকৈ ঘৃণিত আৰু সময়সাপেক্ষ ফ্ৰন্ট-এণ্ড কামসমূহৰ ভিতৰত এটা — আৰু ডেভেলপাৰসকলক CSS উত্তৰাধিকাৰৰ সুবিধাসমূহ সম্পূৰ্ণৰূপে বুজি নোপোৱা বা লাভ নকৰাকৈ উৎপাদনশীল হ'বলৈ অনুমতি দিয়ে। কিন্তু চি এছ এছ কেছকেডক ডিচিং কৰিলে নিজস্ব সমস্যাও আছে। উদাহৰণস্বৰূপ, জাভাস্ক্রিপ্টত শৈলীসমূহ ৰচনা কৰাৰ বাবে গধুৰ নিৰ্মাণ সংৰূপসমূহৰ প্ৰয়োজন হয় আৰু প্ৰায়ে শৈলীসমূহক উপাদান মাৰ্কআপ বা HTML ৰ সৈতে অস্বস্তিকৰভাৱে মিহলি হোৱালৈ লৈ যায়। সযতনে বিবেচনা কৰা নামকৰণ নিয়মৰ পৰিবৰ্তে, আমি বিল্ড সঁজুলিসমূহক আমাৰ বাবে নিৰ্বাচক আৰু চিনাক্তকৰ্তাসমূহ স্বয়ংক্ৰিয়ভাৱে সৃষ্টি কৰাৰ অনুমতি দিওঁ (যেনে, .jsx-3130221066), ডেভেলপাৰসকলক নিজৰ মাজতে আন এটা ছ্যুডো-ভাষাৰ সৈতে খোজ মিলাব লাগিব। (যেনেকৈ আপোনাৰ সকলো উপাদানৰ useEffects এ কি কৰে সেয়া বুজি পোৱাৰ জ্ঞানমূলক বোজা ইতিমধ্যে যথেষ্ট নাছিল!) ক্লাছসমূহক সঁজুলিলৈ নামকৰণ কৰাৰ কামক অধিক বিমূৰ্ত কৰাৰ অৰ্থ হ'ল যে মূল ডিবাগিং প্ৰায়ে বিকাশৰ বাবে কমপাইল কৰা নিৰ্দিষ্ট এপ্লিকেচন সংস্কৰণসমূহৰ বাবে বাধাপ্ৰাপ্ত হয়, স্থানীয় ব্ৰাউজাৰ বৈশিষ্ট্যসমূহ লিভাৰেজ কৰাৰ পৰিবৰ্তে যি লাইভ ডিবাগিং সমৰ্থন কৰে, যেনে ডেভেলপাৰ সঁজুলিসমূহ। ই প্ৰায় এনেকুৱা যেন আমি ৱেবে ইতিমধ্যে প্ৰদান কৰা বস্তুবোৰ বিমূৰ্ত কৰিবলৈ আমি ব্যৱহাৰ কৰা সঁজুলিসমূহ ডিবাগ কৰিবলৈ সঁজুলি বিকশিত কৰিব লাগিব — এই সকলোবোৰ প্ৰামাণিক CSS লিখাৰ “বেদনা”ৰ পৰা পলায়নৰ স্বাৰ্থত। ভাগ্য ভাল যে আধুনিক CSS বৈশিষ্ট্যসমূহে কেৱল প্ৰামাণিক CSS লিখাক অধিক নমনীয় কৰি তোলাই নহয় কিন্তু আমাৰ দৰে ডেভেলপাৰসকলক কেছকেড পৰিচালনা কৰিবলৈ আৰু ইয়াক আমাৰ বাবে কাম কৰিবলৈ বহু বেছি শক্তি প্ৰদান কৰে। CSS Cascade Layers এটা ভাল উদাহৰণ, কিন্তু আন এটা বৈশিষ্ট্য আছে যিয়ে আচৰিত ধৰণে মনোযোগৰ অভাৱ পায় — যদিও সেয়া এতিয়া সলনি হৈছে কাৰণ ই শেহতীয়াকৈ বেচলাইন সুসংগত হৈ পৰিছে। চিএছএছ @স্কোপ এট-ৰুল মই CSS @scope at-rule ক আমি সামৰি লোৱা শৈলী-লিক-প্ৰৰোচিত উদ্বেগৰ বাবে এটা সম্ভাৱ্য নিৰাময় বুলি বিবেচনা কৰোঁ, যিয়ে আমাক বিমূৰ্তকৰণ আৰু অতিৰিক্ত নিৰ্মাণ সঁজুলিৰ বাবে স্থানীয় ৱেব সুবিধাসমূহৰ সৈতে আপোচ কৰিবলৈ বাধ্য নকৰে। “@scope CSS at-rule এ আপোনাক নিৰ্দিষ্ট DOM উপবৃক্ষসমূহত উপাদানসমূহ নিৰ্ব্বাচন কৰিবলে সামৰ্থবান কৰে, অভাৰৰাইড কৰাটো কঠিন অতি-নিৰ্দিষ্ট নিৰ্বাচকসমূহ লিখা নোহোৱাকৈ, আৰু আপোনাৰ নিৰ্বাচকসমূহক DOM গঠনৰ সৈতে অতি টানকৈ সংযুক্ত নকৰাকৈ, উপাদানসমূহক নিখুঁতভাৱে লক্ষ্য কৰি।”— MDN
অৰ্থাৎ আমি উত্তৰাধিকাৰ, কেছকেডিং, আনকি চিন্তাৰ মৌলিক পৃথকীকৰণকো ত্যাগ নকৰাকৈয়ে নিৰ্দিষ্ট দৃষ্টান্তত পৃথক শৈলীৰ সৈতে কাম কৰিব পাৰোযিটো ফ্ৰন্ট-এণ্ড ডেভেলপমেণ্টৰ এটা দীৰ্ঘদিনীয়া পথ প্ৰদৰ্শক নীতি হৈ আহিছে। ইয়াৰ উপৰিও ইয়াৰ ব্ৰাউজাৰ কভাৰেজ অতি উত্তম। আচলতে, Firefox 146 এ ডিচেম্বৰ মাহত @scope ৰ বাবে সমৰ্থন যোগ কৰিছিল, যাৰ ফলত ইয়াক প্ৰথমবাৰৰ বাবে Baseline সুসংগত কৰি তোলা হৈছে। ইয়াত BEM আৰ্হি ব্যৱহাৰ কৰা এটা বুটামৰ মাজত এটা সৰল তুলনা কৰা হৈছে বনাম @scope নিয়ম:
<শৈলী> .button .button__text { /* বুটাম লিখনী শৈলী */ } .button .button__icon { /* বুটাম আইকন শৈলী */ } .button--primary { প্ৰাথমিক বুটাম শৈলীসমূহ */ }
<শৈলী> @scope (.প্ৰাথমিক-বুটাম) { span:first-child { /* বুটাম লিখনী শৈলী */ } span:last-child { /* বুটাম আইকন শৈলীসমূহ */ } }
@scope নিয়মে কম জটিলতাৰ সৈতে নিখুঁততাৰ অনুমতি দিয়ে। ডেভেলপাৰে আৰু শ্ৰেণী নাম ব্যৱহাৰ কৰি সীমা সৃষ্টি কৰাৰ প্ৰয়োজন নাই, যি, পাছলৈ, তেওঁলোকক স্থানীয় HTML উপাদানসমূহৰ ওপৰত ভিত্তি কৰি নিৰ্বাচক লিখিবলৈ অনুমতি দিয়ে, যাৰ ফলত নিৰ্ধাৰিত CSS শ্ৰেণী নামৰ আৰ্হিৰ প্ৰয়োজনীয়তা নাইকিয়া হয়। কেৱল শ্ৰেণী নাম ব্যৱস্থাপনাৰ প্ৰয়োজনীয়তা আঁতৰাই, @scope এ বৃহৎ প্ৰকল্পসমূহত CSS ৰ সৈতে জড়িত ভয়টো লাঘৱ কৰিব পাৰে। মৌলিক ব্যৱহাৰ আৰম্ভ কৰিবলে, আপোনাৰ CSS ত @scope নিয়ম যোগ কৰক আৰু এটা ৰূট নিৰ্বাচক সন্নিবিষ্ট কৰক কোনবোৰ শৈলীত স্কোপ কৰা হব: @scope (<নিৰ্বাচক>) { /* শৈলীসমূহ <নিৰ্বাচক> লৈ পৰিসৰ কৰা হৈছে */ }
গতিকে, উদাহৰণস্বৰূপে, যদি আমি শৈলীসমূহক এটা
@স্কোপ (nav) { a { /* nav পৰিসৰৰ ভিতৰত শৈলীসমূহ সংযোগ কৰক */ }
a:active { /* সক্ৰিয় সংযোগ শৈলীসমূহ */ }
a:active::before { /* অতিৰিক্ত ষ্টাইলিঙৰ বাবে pseudo-element ৰ সৈতে সক্ৰিয় সংযোগ */ }
@media (সৰ্বোচ্চ-প্ৰস্থ: 768px) { a { /* প্ৰতিক্ৰিয়াশীল সামঞ্জস্যসমূহ */ } } }
এইটো নিজৰ মতে কোনো যুগান্তকাৰী বৈশিষ্ট্য নহয়। কিন্তু পৰিসৰত দ্বিতীয়টো যুক্তি যোগ কৰি নিম্ন সীমা সৃষ্টি কৰিব পাৰি, যাৰ ফলত পৰিসৰৰ আৰম্ভণি আৰু শেষ বিন্দুসমূহ ফলপ্ৰসূভাৱে সংজ্ঞায়িত কৰিব পাৰি।
/* ul ৰ ভিতৰত যিকোনো এটা উপাদান শৈলীসমূহ প্ৰয়োগ কৰা নহ'ব */ @স্কোপ (nav) ৰ পৰা (ul) { a { ফন্ট-আকাৰ: ১৪px; } }
এই প্ৰথাক ডোনাট স্কোপিং বোলা হয়, আৰু কেইবাটাও পদ্ধতি আছে, য'ত DOM গঠনৰ সৈতে টানকৈ সংযুক্ত একে ধৰণৰ, অতি নিৰ্দিষ্ট নিৰ্বাচকৰ এটা শৃংখলা, এটা :not pseudo-selector, বা ভিন্ন CSS নিয়ন্ত্ৰণ কৰিবলে
/*
উপসংহাৰ সঁজুলি-প্ৰথম CSS কাঠামো, যেনে Tailwind, প্ৰ'ট'টাইপিং আৰু সৰু প্ৰকল্পৰ বাবে ভাল কাম কৰে। কিন্তু দুজনতকৈ অধিক ডেভেলপাৰ জড়িত বৃহৎ প্ৰকল্পত ব্যৱহাৰ কৰিলে ইহঁতৰ সুবিধা দ্ৰুতভাৱে হ্ৰাস পায়। যোৱা কেইবছৰমানৰ পৰা ফ্ৰন্ট-এণ্ড বিকাশ ক্ৰমান্বয়ে অতি জটিল হৈ পৰিছে, আৰু চি এছ এছও ইয়াৰ ব্যতিক্ৰম নহয়। @scope নিয়মটো সকলোৰে নিৰাময় নহ’লেও, ই জটিল সঁজুলিৰ প্ৰয়োজনীয়তা হ্ৰাস কৰিব পাৰে। যেতিয়া কৌশলগত শ্ৰেণী নামকৰণৰ ঠাইত বা কাষে কাষে ব্যৱহাৰ কৰা হয়, @scope এ ইয়াক ৰক্ষণাবেক্ষণযোগ্য CSS লিখাটো সহজ আৰু অধিক মজাৰ কৰি তুলিব পাৰে। অধিক পঢ়া
CSS @scope (MDN) “CSS @scope”, জুয়ান ডিয়েগো ৰড্ৰিগেজ (CSS-Tricks) Firefox 146 উন্মোচন টোকাসমূহ (Firefox) ব্ৰাউজাৰ সমৰ্থন (CanIUse) জনপ্ৰিয় CSS কাঠামোসমূহ (CSS 2024 ৰ অৱস্থা) “চিএছএছত “চি”: কেছকেড”, থমাছ য়িপ (চিএছএছ-ট্ৰিক্স) BEM পৰিচয় (BEM পাওক)
