@scope নিয়মটি অবশেষে বিকাশকারীদের CSS লিখতে আত্মবিশ্বাস দেয় যা আধুনিক ফ্রন্ট এন্ডের সাথে তাল মিলিয়ে চলতে পারে?
মৌলিক CSS নীতিগুলি শেখার সময়, রক্ষণাবেক্ষণযোগ্যতা নিশ্চিত করার জন্য একজনকে মডুলার, পুনরায় ব্যবহারযোগ্য এবং বর্ণনামূলক শৈলী লিখতে শেখানো হয়। কিন্তু যখন বিকাশকারীরা বাস্তব-বিশ্বের অ্যাপ্লিকেশনগুলিতে প্রবেশ করে, তখন প্রায়শই অনিচ্ছাকৃত অঞ্চলে স্টাইল ফাঁস ছাড়া UI বৈশিষ্ট্যগুলি যুক্ত করা অসম্ভব বলে মনে হয়।
এই সমস্যাটি প্রায়ই একটি স্ব-পূরণকারী লুপে পরিণত হয়; যে শৈলীগুলি তাত্ত্বিকভাবে একটি উপাদান বা বিভাগে সীমাবদ্ধ যেখানে তারা অন্তর্ভুক্ত নয় সেখানে উপস্থিত হতে শুরু করে। এটি বিকাশকারীকে ফাঁস হওয়া শৈলীগুলিকে ওভাররাইড করার জন্য আরও নির্দিষ্ট নির্বাচক তৈরি করতে বাধ্য করে, যা দুর্ঘটনাক্রমে বিশ্বব্যাপী শৈলীগুলিকে ওভাররাইড করে এবং আরও অনেক কিছু।
বিইএম-এর মতো কঠোর শ্রেণির নামকরণ প্রথা এই সমস্যার একটি তাত্ত্বিক সমাধান। BEM (ব্লক, এলিমেন্ট, মডিফায়ার) পদ্ধতি CSS হল CSS ফাইলের মধ্যে পুনঃব্যবহারযোগ্যতা এবং গঠন নিশ্চিত করার জন্য ক্লাসের নামকরণের একটি পদ্ধতিগত উপায়। এই ধরনের নামকরণ কনভেনশনগুলি উপাদান এবং তাদের অবস্থা বর্ণনা করার জন্য ডোমেন ভাষা ব্যবহার করে জ্ঞানীয় লোড কমাতে পারে এবং সঠিকভাবে প্রয়োগ করা হলে, বড় অ্যাপ্লিকেশনগুলির জন্য শৈলীগুলি বজায় রাখা সহজ করে তুলতে পারে।
যাইহোক, বাস্তব জগতে, এটি সর্বদা সেভাবে কাজ করে না। অগ্রাধিকার পরিবর্তন হতে পারে এবং বাস্তবায়ন পরিবর্তনের সাথে অসঙ্গতিপূর্ণ হয়ে ওঠে। HTML গঠনে ছোট পরিবর্তনের জন্য একাধিক CSS শ্রেণীর নাম পরিবর্তনের প্রয়োজন হতে পারে। অত্যন্ত ইন্টারেক্টিভ ফ্রন্ট-এন্ড অ্যাপ্লিকেশনগুলির সাথে, BEM প্যাটার্ন অনুসরণ করে ক্লাসের নামগুলি দীর্ঘ এবং কষ্টকর হয়ে উঠতে পারে (উদাহরণস্বরূপ, app-user-overview__status--is-authenticating), এবং নামকরণের নিয়মগুলি সম্পূর্ণরূপে অনুসরণ না করা সিস্টেমের কাঠামোকে ভেঙে দেয়, এর সুবিধাগুলিকে অস্বীকার করে৷
এই চ্যালেঞ্জগুলির পরিপ্রেক্ষিতে, এতে অবাক হওয়ার কিছু নেই যে ডেভেলপাররা ফ্রেমওয়ার্কের দিকে ঝুঁকছে, টেলউইন্ড হল সবচেয়ে জনপ্রিয় সিএসএস ফ্রেমওয়ার্ক। স্টাইলগুলির মধ্যে একটি অনাকাঙ্ক্ষিত নির্দিষ্টতার যুদ্ধে লড়াই করার চেষ্টা করার পরিবর্তে, CSS ক্যাসকেড এড়িয়ে যাওয়া এবং সম্পূর্ণ বিচ্ছেদের গ্যারান্টি দেয় এমন সরঞ্জামগুলি ব্যবহার করা সহজ।
বিকাশকারীরা ইউটিলিটিগুলির উপর বেশি নির্ভর করে
আমরা কিভাবে জানি যে কিছু বিকাশকারী ক্যাসকেড শৈলী এড়াতে ইচ্ছুক? এটি “আধুনিক” ফ্রন্ট-এন্ড টুলিংয়ের উত্থান – যেমন সিএসএস-ইন-জেএস ফ্রেমওয়ার্ক – বিশেষভাবে সেই উদ্দেশ্যে ডিজাইন করা হয়েছে। নির্দিষ্ট উপাদানের মধ্যে সীমাবদ্ধ বিভিন্ন শৈলীর সাথে কাজ করা তাজা বাতাসের শ্বাসের মতো মনে হতে পারে। এটি জিনিসগুলির নামকরণের প্রয়োজনীয়তাকে সরিয়ে দেয় – এখনও সবচেয়ে ঘৃণ্য এবং সময়সাপেক্ষ ফ্রন্ট-এন্ড কাজগুলির মধ্যে একটি – এবং বিকাশকারীদের সিএসএস উত্তরাধিকারের সুবিধাগুলি সম্পূর্ণরূপে বুঝতে বা সুবিধা গ্রহণ না করেই উত্পাদনশীল হতে দেয়৷
কিন্তু CSS ক্যাসকেড এড়িয়ে যাওয়া তার নিজস্ব সমস্যা নিয়ে আসে। উদাহরণস্বরূপ, জাভাস্ক্রিপ্টে স্টাইল রচনার জন্য ভারী বিল্ড কনফিগারেশনের প্রয়োজন হয় এবং প্রায়শই শৈলীগুলি উপাদান মার্কআপ বা HTML এর সাথে বিশ্রীভাবে মিশ্রিত হয়। নামকরণের নিয়মগুলি সাবধানে বিবেচনা করার পরিবর্তে, আমরা আমাদের জন্য স্বয়ংক্রিয়ভাবে নির্বাচক এবং শনাক্তকারী তৈরি করার জন্য সরঞ্জামগুলিকে অনুমতি দিই (উদাহরণস্বরূপ, .jsx-3130221066), ডেভেলপারদের তাদের নিজস্বভাবে অন্য ছদ্ম-ভাষার সাথে লেগে থাকতে হবে। (যেন আপনার সমস্ত উপাদান বোঝার জ্ঞানীয় বোঝা useEffectএটি করা ইতিমধ্যে যথেষ্ট ছিল না!)
টুলিং-এ ক্লাসের নামকরণের কাজকে আরও বিমূর্ত করার অর্থ হল নেটিভ ডিবাগিং প্রায়শই লাইভ ডিবাগিং সমর্থনকারী নেটিভ ব্রাউজার বৈশিষ্ট্যগুলির মতো বিকাশকারী সরঞ্জামগুলির সুবিধা নেওয়ার পরিবর্তে বিকাশের জন্য সংকলিত নির্দিষ্ট অ্যাপ্লিকেশন সংস্করণগুলিতে সীমাবদ্ধ থাকে।
সৌভাগ্যবশত, আধুনিক CSS বৈশিষ্ট্যগুলি শুধুমাত্র স্ট্যান্ডার্ড CSS লেখাকে আরও নমনীয় করে তোলে না, বরং আমাদের মতো ডেভেলপারদের ক্যাসকেড পরিচালনা করতে এবং এটিকে আমাদের জন্য কার্যকর করার জন্য অনেক বেশি শক্তি দেয়। CSS ক্যাসকেড স্তরগুলি একটি দুর্দান্ত উদাহরণ, তবে আরও একটি বৈশিষ্ট্য রয়েছে যা আশ্চর্যজনকভাবে খুব বেশি মনোযোগ দেয় না – যদিও এটি সম্প্রতি পরিণত হয়েছে বলে এটি পরিবর্তিত হচ্ছে বেসলাইন সামঞ্জস্যপূর্ণ.
css @scope নিয়মের উপর
আমি বিবেচনা css @scope নিয়মের উপর আমরা যে ধরনের স্টাইল-লিক-জনিত উদ্বেগ কভার করেছি তার সম্ভাব্য প্রতিকার হতে, এটি বিমূর্ততা এবং অতিরিক্ত বিল্ড টুলিংয়ের জন্য মূল ওয়েব সুবিধাগুলির সাথে আপস করতে বাধ্য করে না।
“দি
@scopeনিয়ম অনুসারে সিএসএস আপনাকে নির্দিষ্ট DOM সাবট্রিতে উপাদান নির্বাচন করতে সক্ষম করে, হাইপার-নির্দিষ্ট নির্বাচকগুলিকে ওভাররাইড করা কঠিন না লিখে এবং আপনার নির্বাচকদের DOM কাঠামোর সাথে খুব শক্তভাবে বেঁধে না রেখে সঠিকভাবে লক্ষ্যবস্তুগুলিকে লক্ষ্য করে।– MDN
অন্য কথায়, আমরা নির্দিষ্ট ক্ষেত্রে বিচ্ছিন্ন শৈলী নিয়ে কাজ করতে পারি। উত্তরাধিকার, ক্যাসকেডিং বা উদ্বেগের মৌলিক বিচ্ছেদ ছাড়াই এটি ফ্রন্ট-এন্ড উন্নয়নের একটি দীর্ঘস্থায়ী নির্দেশিকা নীতি।
এছাড়াও, এটিতে দুর্দান্ত ব্রাউজার কভারেজ রয়েছে। আসলে, Firefox 146 এর জন্য সমর্থন যোগ করেছে @scope ডিসেম্বরে, এটি প্রথমবারের জন্য বেসলাইন সামঞ্জস্যপূর্ণ করা হয়েছিল। এখানে BEM প্যাটার্ন বনাম বোতামগুলির মধ্যে একটি সহজ তুলনা @scope নিয়ম:
@scope নিয়ম এটির অনুমতি দেয় কম জটিলতার সাথে নির্ভুলতা. ডেভেলপারদের আর ক্লাসের নাম ব্যবহার করে সীমানা তৈরি করতে হবে না, যা তাদের নেটিভ এইচটিএমএল উপাদানের উপর ভিত্তি করে নির্বাচকদের লেখার অনুমতি দেয়, প্রেসক্রিপটিভ CSS ক্লাস নামের প্যাটার্নের প্রয়োজনীয়তা দূর করে। ক্লাস নাম ব্যবস্থাপনার প্রয়োজনীয়তা দূর করে, @scope বড় প্রকল্পে CSS এর সাথে যুক্ত ভয় কমাতে পারে।
মৌলিক ফাংশন
শুরু করতে, যোগ করুন @scope আপনার CSS-এ একটি নিয়ম তৈরি করুন এবং একটি রুট নির্বাচক রাখুন যাতে শৈলীগুলির সুযোগ থাকবে:
@scope () {
/* Styles scoped to the */
}
সুতরাং, উদাহরণস্বরূপ, যদি আমরা শৈলীর পরিধি প্রসারিত করতে চাই
@scope (nav) {
a { /* Link styles within nav scope */ }
a:active { /* Active link styles */ }
a:active::before { /* Active link with pseudo-element for extra styling */ }
@media (max-width: 768px) {
a { /* Responsive adjustments */ }
}
}
এটি, নিজেই, একটি যুগান্তকারী বৈশিষ্ট্য নয়। যাইহোক, একটি দ্বিতীয় যুক্তি তৈরি করার সুযোগ যোগ করা যেতে পারে নিম্ন সীমাসুযোগের শুরু এবং শেষ বিন্দুগুলিকে কার্যকরভাবে সংজ্ঞায়িত করা।
/* Any `a` element inside `ul` will not have the styles applied */
@scope (nav) to (ul) {
a {
font-size: 14px;
}
}
এই অনুশীলন বলা হয় ডোনাট স্কোপিংএবং DOM কাঠামোর সাথে শক্তভাবে আবদ্ধ অনুরূপ, অত্যন্ত নির্দিষ্ট নির্বাচকদের একটি সিরিজ সহ একাধিক পদ্ধতি ব্যবহার করা যেতে পারে, :not ছদ্ম-নির্বাচক, বা একটি নির্দিষ্ট শ্রেণীর নাম উল্লেখ করা মধ্যে উপাদান
এই অন্যান্য দৃষ্টিভঙ্গি সত্ত্বেও, @scope পদ্ধতিটি আরও সংক্ষিপ্ত। আরও গুরুত্বপূর্ণ, ক্লাসের নাম পরিবর্তন হলে বা অপব্যবহার করা হলে বা এইচটিএমএল কাঠামো পরিবর্তন করা হলে এটি ভাঙা শৈলীর ঝুঁকি রোধ করে। এখন যে @scope বেসলাইনটি সামঞ্জস্যপূর্ণ, আমাদের আর সমাধানের প্রয়োজন নেই!
আমরা একটি “স্টাইল ফিগার আট” তৈরি করতে বেশ কয়েকটি চূড়ান্ত সীমানার সাথে এই ধারণাটিকে আরও এগিয়ে নিতে পারি:
এটিকে আন-হ্যান্ডেলড সংস্করণের সাথে তুলনা করুন @scope নিয়ম যেখানে বিকাশকারীকে তাদের ডিফল্ট স্টাইলগুলি “রিসেট” করতে হবে:
main a {
font-size: 14px;
}
main p {
line-height: 16px;
color: darkgrey;
}
main aside a,
main nav a {
font-size: inherit; /* or whatever the default should be */
}
main aside p,
main nav p {
line-height: inherit; /* or whatever the default should be */
color: inherit; /* or a specific color */
}
নিম্নলিখিত উদাহরণ দেখুন. আপনি কি লক্ষ্য করেছেন যে কিছু নেস্টেড নির্বাচকদের লক্ষ্য করা এবং অন্যদের ছাড় দেওয়া কত সহজ?
কলম দেখুন [@scope example [forked]](https://codepen.io/smashingmag/pen/wBWXggN) ব্লেক লুন্ডকুইস্ট দ্বারা।
এমন একটি পরিস্থিতি বিবেচনা করুন যেখানে ওয়েব উপাদানগুলির মধ্যে স্লট করা সামগ্রীতে অনন্য শৈলী প্রয়োগ করা প্রয়োজন৷ একটি ওয়েব কম্পোনেন্টে কন্টেন্ট স্লট করার সময়, সেই বিষয়বস্তু ছায়া DOM-এর অংশ হয়ে যায়, কিন্তু তবুও মূল নথি থেকে শৈলী উত্তরাধিকারসূত্রে পাওয়া যায়। বিষয়বস্তুটি কোন ওয়েব উপাদানে রাখা হয়েছে তার উপর নির্ভর করে, বিকাশকারী বিভিন্ন শৈলী প্রয়োগ করতে চাইতে পারেন:
Jane Doe
Jane Doe
এই উদাহরণে, বিকাশকারী চাইতে পারেন
@scope (team-roster) {
user-card {
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
user-card img {
border-radius: 50%;
width: 40px;
height: 40px;
}
}
আরো লাভ
অতিরিক্ত উপায় আছে @scope এটি ইউটিলিটি বা জাভাস্ক্রিপ্ট-জেনারেট করা ক্লাসের নামগুলি অবলম্বন না করেই ক্লাস পরিচালনার প্রয়োজনীয়তা দূর করতে পারে। যেমন, @scope সহজ হওয়ার সম্ভাবনা খুলে দেয় যেকোনো নির্বাচকের টার্গেট বংশধরশুধু ক্লাসের নাম নয়:
/* Only div elements with a direct child button are included in the root scope */
@scope (div:has(> button)) {
p {
font-size: 14px;
}
}
তারা এবং নেস্ট করা যেতে পারেএকটি সুযোগের মধ্যে একটি সুযোগ তৈরি করা:
@scope (main) {
p {
font-size: 16px;
color: black;
}
@scope (section) {
p {
font-size: 14px;
color: blue;
}
@scope (.highlight) {
p {
background-color: yellow;
font-weight: bold;
}
}
}
}
এছাড়াও, অভিভাবক সুযোগ সহজেই উল্লেখ করা যেতে পারে @scope নিয়ম:
/* Applies to elements inside direct child `section` elements of `main`, but stops at any direct `aside` that is a direct chiled of those sections */
@scope (main > section) to (:scope > aside) {
p {
background-color: lightblue;
color: blue;
}
/* Applies to ul elements that are immediate siblings of root scope */
:scope + ul {
list-style: none;
}
}
@scope এট-রুলও একটি নতুন পরিচয় দেয় নৈকট্য CSS স্পেসিফিকেশন রেজোলিউশনের মাত্রা। প্রথাগত CSS-এ, যখন দুটি নির্বাচক একই উপাদানের সাথে মিলে যায়, তখন উচ্চতর নির্দিষ্টতার সাথে নির্বাচক জয়ী হয়। সঙ্গে @scopeযখন দুটি উপাদানের একই সুনির্দিষ্টতা থাকে, তখন যার স্কোপ রুট মিলিত উপাদানের কাছাকাছি থাকে সে বিজয়ী হয়। এটি একটি উপাদানের নির্দিষ্টতা ম্যানুয়ালি বাড়িয়ে নেটিভ শৈলীগুলিকে ওভাররাইড করার প্রয়োজনীয়তা দূর করে, কারণ ভিতরের উপাদানগুলি স্বাভাবিকভাবেই বাইরের উপাদান শৈলীগুলি প্রতিস্থাপন করে।
উপসংহার
ইউটিলিটি-প্রথম CSS ফ্রেমওয়ার্ক, যেমন Tailwind, প্রোটোটাইপিং এবং ছোট প্রকল্পের জন্য ভাল কাজ করে। যাইহোক, যখন কয়েকটি বিকাশকারীর সাথে জড়িত বড় প্রকল্পগুলিতে ব্যবহার করা হয়, তখন তাদের সুবিধাগুলি দ্রুত হ্রাস পায়।
ফ্রন্ট-এন্ড ডেভেলপমেন্ট বছরের পর বছর ধরে ক্রমশ জটিল হয়ে উঠেছে, এবং CSS এর ব্যতিক্রম নয়। কখন @scope নিয়মটি সবকিছু ঠিক করতে যাচ্ছে না, এটি জটিল টুলিংয়ের প্রয়োজন কমাতে পারে। যখন কৌশলগত শ্রেণির নামকরণের জায়গায় বা ব্যবহার করা হয়, @scope রক্ষণাবেক্ষণযোগ্য CSS লেখাকে সহজ এবং আরও মজাদার করে তুলতে পারে।
আরও পড়া
(GG, YK)
