এটি 2023, কিন্তু আমাদের এখনও CSS-এ নেস্টেড শৈলী সম্পর্কে কথা বলতে হবে

প্রায় 15 বছরের অভিজ্ঞতার সাথে ফ্রন্টএন্ড ডেভেলপার হিসাবে, আমি সরাসরি ওয়েব ডেভেলপমেন্টের বিবর্তন প্রত্যক্ষ করেছি। আমার জন্য, FTP এর মাধ্যমে পরিবর্তিত ফাইলগুলি আপলোড করার দিন থেকে (হ্যাঁ, GitHub 15 বছর আগে চালু হয়েছিল, কিন্তু আমি এটি শুধুমাত্র 2011 সালে আবিষ্কার করেছি) প্রতিক্রিয়াশীল ইন্টারফেস, UI লাইব্রেরি এবং সরাসরি তৈরি করা ওয়েবসাইটগুলির আধুনিক যুগে অনেক দূর এগিয়েছি ফিগমা।

তবুও, আমি এখনও এমন প্রকল্পগুলির মুখোমুখি হই যা নেস্টেড শৈলী নিয়োগ করে যেমন:

 .some-class ul li div a { /* some style */ }

অথবা,

 #nav .nav-link svg { /* some style */ }

এটি জঘন্য মনে হতে পারে, কিন্তু এই ধরনের কোডিং অনুশীলনগুলি মিলিয়ন মিলিয়ন ডলারের, দ্রুত বর্ধনশীল প্রকল্প থেকে শুরু করে নম্র স্টার্টআপ পর্যন্ত সবকিছুকে পরিব্যাপ্ত করে।

আসুন জেনে নেই কেন এই পদ্ধতিটি সমস্যা তৈরি করতে পারে।

নেস্টেড শৈলীর দ্বন্দ্ব

গভীরভাবে নেস্টেড শৈলীগুলি প্রায়শই শৈলীর দ্বন্দ্বের দিকে নিয়ে যায়, বিশেষ করে যদি আপনার একটি বড় প্রকল্প থাকে। CSS, একটি ক্যাসকেডিং স্টাইল শীট হিসাবে, ক্যাসকেড নিচে এবং তাদের নির্দিষ্টতার উপর নির্ভর করে উপাদানগুলিতে প্রযোজ্য। গভীরভাবে নেস্টেড শৈলীগুলি তাদের নির্দিষ্টতার কারণে অনিচ্ছাকৃতভাবে অন্যান্য শৈলীকে ওভাররাইড করতে পারে।

এই উদাহরণ বিবেচনা করুন:

 .some-class ul li div a { color: red; } ... .some-class a { color: blue; }

আপনি আশা করতে পারেন .some-class সমস্ত লিঙ্ক নীল হবে। যাইহোক, প্রথম নিয়মের বৃহত্তর সুনির্দিষ্টতার কারণে, একটি ul > li > div মধ্যে থাকা যেকোনো লিঙ্ক লাল হবে, নীল নয়। এটি অপ্রত্যাশিত ভিজ্যুয়াল অসঙ্গতি এবং প্রচুর সময় নষ্ট করতে পারে ডিবাগিং।

নির্দিষ্টতার জটিলতা

কেন গভীর বাসা বাঁধতে সমস্যা হতে পারে তা বোঝার জন্য CSS-এ নির্দিষ্টতার ধারণা (বা শৈলীর 'ওজন') বোঝা গুরুত্বপূর্ণ। নির্দিষ্টতা নির্ধারণ করে যে কোন সিএসএস নিয়ম প্রযোজ্য হবে যদি একাধিক নিয়ম একটি একক উপাদানের জন্য প্রতিযোগিতা করে। এটি নির্বাচকদের ধরন এবং পরিমাণের উপর ভিত্তি করে গণনা করা হয়।

চার-বিভাগের ওজন সিস্টেমের উপর ভিত্তি করে নির্দিষ্টতা গণনা করা হয়:

1. ইনলাইন শৈলী
2. আইডি
3. শ্রেণী, গুণাবলী এবং ছদ্ম-শ্রেণী
4. উপাদান এবং ছদ্ম-উপাদান

এখানে, নিয়ম বিবেচনা করুন:

 body #content .data img:hover { /* some style */ }

নির্দিষ্টতা হল 0 1 2 2 । এটি একটি আইডি ( #সামগ্রী ), দুটি শ্রেণী ( .ডেটা এবং :হোভার ), এবং দুটি উপাদান ( বডি এবং img )।

এখন, নিয়ম বিবেচনা করুন:

 #nav .nav-link svg { /* some style */ }

এখানে নির্দিষ্টতা হল 0 1 1 1 । এটি একটি আইডি ( #nav ), একটি ক্লাস ( .nav-link ), এবং একটি উপাদান ( svg )।

প্রথাগত দশমিক সংখ্যার মতো নির্দিষ্টতা "ক্যারি-ওভার" সিস্টেমে কাজ করে না। উদাহরণস্বরূপ, 0 1 0 11 এর নির্দিষ্টতার সাথে একটি নির্বাচক 0 1 1 1 এর নির্দিষ্টতার সমান নয় যদিও একটি দশমিক পদ্ধতিতে, 11 এবং 1+1 সমতুল্য হবে।

অবশেষে, সার্বজনীন নির্বাচক ( * ), সংযোজক ( + , > , ~ , ' ') এবং নেগেশান সিউডো-ক্লাস ( :not() ) নির্দিষ্টতার উপর কোন প্রভাব ফেলে না। :not() আর্গুমেন্টের ভিতরে, যাইহোক, নির্বাচকদের যথারীতি গণনা করা হয়।

ভিজ্যুয়াল শিক্ষার্থীদের জন্য, আমি CSS নির্দিষ্টতা সম্পর্কে এই ভিডিওটি সুপারিশ করছি।

CSS নির্দিষ্টতা বোঝা এবং এটি কীভাবে গণনা করা হয় তা আপনাকে আরও ভাল, আরও অনুমানযোগ্য CSS লিখতে এবং স্টাইলগুলি প্রত্যাশিত হিসাবে প্রয়োগ না হলে সমস্যাগুলি ডিবাগ করতে দেয়।

!important নিয়ম এবং নির্দিষ্টতা

কখনও কখনও, বিকাশকারীরা !important নিয়ম ব্যবহার করে যখন CSS নির্দিষ্টতা দ্বন্দ্বের সাথে সমস্যার সম্মুখীন হয়। এই নিয়মটি একটি CSS সম্পত্তিকে অত্যন্ত নির্দিষ্ট করে তোলে, যার অর্থ এটি প্রায় অন্য যেকোনো ঘোষণাকে ওভাররাইড করবে।

উদাহরণ স্বরূপ:

 #nav .nav-link svg { color: blue; } .nav-link svg { color: red !important; }

আইডি নির্বাচকের কারণে প্রথম নিয়মে উচ্চতর নির্দিষ্টতা থাকা সত্ত্বেও, দ্বিতীয় নিয়মে !important কারণে svg এর রঙ লাল হবে।

অত্যধিক ব্যবহারের ঝুঁকি !গুরুত্বপূর্ণ

যদিও !important একটি দ্রুত সমাধান হতে পারে, এটি ব্যাপকভাবে ব্যবহার করার পরামর্শ দেওয়া হয় না৷ অতিরিক্ত ব্যবহার রক্ষণাবেক্ষণযোগ্যতা, পূর্বাভাসযোগ্যতা এবং কর্মক্ষমতা প্রভাবিত করতে পারে। বৃহত্তর প্রকল্পগুলিতে, !important এর অত্যধিক ব্যবহার প্রায়ই CSS নির্দিষ্টতা পরিচালনার সাথে একটি সংগ্রাম নির্দেশ করে। !important এর অবলম্বন করার পরিবর্তে, আপনার CSS রিফ্যাক্টরিং এবং অতিরিক্ত নির্দিষ্ট নির্বাচকদের ব্যবহার কমাতে সময় বিনিয়োগ করা প্রায়শই ভাল।

আপনি এখনই আপনার পণ্য পরীক্ষা করতে পারেন 🙂। আমি আমার চেক করেছি:

যদিও !important একটি লোভনীয় দ্রুত সমাধান হতে পারে; এটি একটি বাদাম ফাটতে একটি স্লেজহ্যামার ব্যবহার করার মতো। একটি আরও রক্ষণাবেক্ষণযোগ্য পদ্ধতি হল আপনার নির্বাচকদের যতটা সম্ভব সহজ এবং যতটা সম্ভব সমতল রাখা, যা ভবিষ্যতে আপনার CSS বোঝা, পরিচালনা এবং প্রসারিত করা সহজ করে তোলে। এবং মনে রাখবেন, একটি !important যুদ্ধ জয়ের সর্বোত্তম উপায় হল প্রথম স্থানে একটি শুরু করা নয়।

সিএসএস ট্রি ট্র্যাভার্সিং

গভীরভাবে নেস্টেড শৈলীর সাথে আরেকটি সমস্যা হল ব্রাউজার রেন্ডারিং-এ কর্মক্ষমতা প্রভাব। যখন একটি ব্রাউজার একটি উপাদানে শৈলী প্রয়োগ করে, তখন এটি কী নির্বাচক (আমাদের উদাহরণে, a এবং svg ) দিয়ে শুরু করে ডান থেকে বামে DOM অতিক্রম করে এবং এটি একটি মিল খুঁজে না পাওয়া বা শীর্ষে না পৌঁছানো পর্যন্ত পূর্বপুরুষের মধ্য দিয়ে চলে। স্টাইলটি যত বেশি নেস্ট করা হবে, এই ট্রাভার্সালটি তত বেশি সময় নেয়, সম্ভাব্যভাবে কার্যক্ষমতাকে প্রভাবিত করে এবং বড় আকারের প্রকল্পগুলিতে পৃষ্ঠা লোডের সময় ধীর করে দেয়।

যখন আপনি একটি CSS নিয়ম নির্দিষ্ট করেন, যেমন:

 .some-class ul li a { /* some style */ }

আপনি গাছের নিচ থেকে ( a ট্যাগ থেকে) শুরু করে এবং গাছের মধ্য দিয়ে ( li , ul , এবং .some-class মাধ্যমে) এই নিয়মটি কল্পনা করতে পারেন।

ব্রাউজার প্রথমে সমস্ত (আমি বলতে চাচ্ছি) a উপাদানের সন্ধান করবে, তারপর এটি পরীক্ষা করবে যে এই a li উপাদানগুলির মধ্যে রয়েছে কিনা। এর পরে, এটি পরীক্ষা করবে যে এই li উপাদানগুলি ul ভিতরে আছে কিনা এবং সবশেষে, এই ul গুলি .some-class এর ক্লাস সহ একটি উপাদানের ভিতরে আছে কিনা তা পরীক্ষা করবে।

এইভাবে ব্রাউজারগুলি সিএসএস নির্বাচকদের পড়ে এবং জটিল নির্বাচকরা পৃষ্ঠার রেন্ডারিংকে ধীরগতির দিকে নিয়ে যেতে পারে। ব্রাউজারটিকে প্রতিটি উপাদানের জন্য একাধিক চেক করতে হবে এটি নির্দিষ্ট নিয়মের সাথে খাপ খায় কিনা তা দেখতে। নিয়ম যত গভীর হবে, ব্রাউজারকে তত বেশি চেক করতে হবে, যা কর্মক্ষমতাকে প্রভাবিত করতে পারে।

বৃহত্তর প্রকল্পগুলিতে CSS পরিচালনার জন্য আরও ভাল অনুশীলন

CSS মডিউল

CSS মডিউলগুলি আপনাকে পৃথক মডিউলগুলিতে CSS লিখতে দেয়, যা আপনি যে উপাদানটিতে কাজ করছেন তার জন্য স্থানীয়ভাবে স্কোপ করা হয়। এর মানে হল যে একটি CSS মডিউলের স্টাইলগুলি শুধুমাত্র সেই নির্দিষ্ট মডিউলের জন্য প্রযোজ্য এবং পৃষ্ঠার অন্যান্য উপাদানগুলিকে ফাঁস বা প্রভাবিত করবে না।

স্টাইল এনক্যাপসুলেশন নিশ্চিত করতে কীভাবে CSS মডিউল হ্যাশড ক্লাসের নাম ব্যবহার করে তা দেখুন। আপনি যখন CSS মডিউল ব্যবহার করছেন, তখন আপনার CSS ফাইলে যে শ্রেণীর নামগুলি আপনি সংজ্ঞায়িত করবেন তা কম্পাইলের সময় হ্যাশ করা হবে। এই হ্যাশ একটি অনন্য ক্লাস নাম তৈরি করে যা আপনার উপাদানের সাথে মিলে যায়। আসুন একটি উদাহরণ দেখে নেওয়া যাক:

ধরুন আপনার কাছে একটি CSS মডিউল সংজ্ঞায়িত হয়েছে:

 /* Button.module.css */ .button { color: white; background-color: blue; }

এবং আপনি এটিকে আপনার কম্পোনেন্টে এভাবে ব্যবহার করুন (আমি styles পরিবর্তে স্টাইল অবজেক্টকে s হিসাবে আমদানি করতে পছন্দ করি — একটি দ্রুত টিপ যা টাইপ করার সময় বাঁচায় এবং কোডিং দক্ষতা বাড়ায়):

 import React from 'react'; import s from './Button.module.css'; const Button = () => { return ( <button className={s.button}>Click me</button> ); }; export default Button;

যখন আপনার অ্যাপ্লিকেশন কম্পাইল করা হয়, তখন আপনার রেন্ডার করা এইচটিএমএল দেখতে এরকম কিছু হতে পারে:

 <button class="Button_button__3FQ9Z">Click me</button>

এই ক্ষেত্রে, Button_button__3FQ9Z হল হ্যাশ করা ক্লাসের নাম যা আপনার CSS মডিউল থেকে তৈরি করা হয়েছে। মনে রাখবেন যে হ্যাশের সঠিক গঠন এবং দৈর্ঘ্য আপনার প্রকল্প কনফিগারেশনের উপর ভিত্তি করে পরিবর্তিত হতে পারে।

এই অনন্য শ্রেণীর নামটি নিশ্চিত করে যে আপনি Button.module.css এ যে শৈলীগুলি সংজ্ঞায়িত করেছেন তা শুধুমাত্র এই বোতামটিতে প্রযোজ্য এবং আপনার অ্যাপ্লিকেশনের অন্য কোনো উপাদানকে প্রভাবিত করবে না। এটি নিশ্চিত করে যে অন্য কোন শৈলী এই বোতামটিকে প্রভাবিত করতে পারে না যদি না তারা স্পষ্টভাবে হ্যাশড শ্রেণীর নাম লক্ষ্য করে। শৈলীর এই এনক্যাপসুলেশন সিএসএস মডিউলের অন্যতম প্রধান সুবিধা।

সিএসএস-ইন-জেএস লাইব্রেরি

CSS পরিচালনার আরেকটি জনপ্রিয় উপায় হল CSS-in-JS লাইব্রেরি ব্যবহার করা, যেমন স্টাইলড-কম্পোনেন্ট বা আবেগ । এই লাইব্রেরিগুলি আপনাকে সরাসরি আপনার জাভাস্ক্রিপ্টের মধ্যে আপনার CSS লিখতে দেয়, যার বেশ কিছু সুবিধা রয়েছে:

1. স্কোপড শৈলী : CSS মডিউলের মতো, শৈলীগুলিকে সংজ্ঞায়িত করা উপাদানের জন্য স্কোপ করা হয়।
2. গতিশীল শৈলী : আপনার উপাদানের প্রপস বা অবস্থার উপর ভিত্তি করে গতিশীল শৈলী তৈরি করা সহজ।
3. উন্নত বিকাশকারীর অভিজ্ঞতা : আপনি সরাসরি আপনার শৈলীতে JavaScript লজিক ব্যবহার করতে পারেন, এবং একটি উপাদানের সাথে সম্পর্কিত সবকিছু এক জায়গায় অবস্থিত, যা আপনার কোড বুঝতে এবং কাজ করা সহজ করে তুলতে পারে।

প্রতিক্রিয়া অ্যাপ্লিকেশনে আপনি কীভাবে স্টাইলযুক্ত উপাদানগুলি ব্যবহার করতে পারেন তার একটি উদাহরণ এখানে রয়েছে:

 import React from 'react'; import styled from 'styled-components'; const Button = styled.button` color: white; background-color: ${(props) => props.primary ? 'blue' : 'gray'}; `; const App = () => { return ( <div> <Button primary>Primary Button</Button> <Button>Secondary Button</Button> </div> ); }; export default App;

এই উদাহরণে, Button উপাদানটির গতিশীল শৈলী রয়েছে যা এর primary প্রপের উপর ভিত্তি করে পরিবর্তিত হয়।

বিইএম পদ্ধতি

আপনি যদি এমন কোনো জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের সাথে কাজ না করেন যা CSS মডিউল বা অনুরূপ সমর্থন করে, তবুও আপনি BEM (Block, Element, Modifier) এর মতো নামকরণ পদ্ধতি ব্যবহার করে কার্যকরভাবে আপনার CSS পরিচালনা করতে পারেন।

BEM মানে হল "ব্লক এলিমেন্ট মডিফায়ার" এবং এটি একটি পদ্ধতি যা আপনাকে CSS-এ পুনরায় ব্যবহারযোগ্য উপাদান এবং কোড শেয়ারিং তৈরি করতে সাহায্য করে। এখানে আপনি BEM ব্যবহার করে কীভাবে আপনার CSS গঠন করতে পারেন:

 /* Block */ .top-menu { } /* Element */ .top-menu__item { } /* Modifier */ .top-menu__item_active { }

BEM-এ, 'ব্লক' হল স্বতন্ত্র সত্তা যা নিজেই অর্থপূর্ণ, 'এলিমেন্ট' হল ব্লকের একটি অংশ যার কোনো স্বতন্ত্র অর্থ নেই এবং শব্দার্থগতভাবে এটির ব্লকের সাথে আবদ্ধ, এবং 'মোডিফায়ার' হল একটি পতাকা একটি ব্লক বা উপাদান যা চেহারা বা আচরণ পরিবর্তন করতে ব্যবহৃত হয়।

বিইএম-এর মতো সামঞ্জস্যপূর্ণ পদ্ধতি ব্যবহার করা আপনার সিএসএসকে বোঝা এবং বজায় রাখা সহজ করে তুলতে পারে, বিশেষ করে বড় প্রকল্পগুলিতে।

উপসংহারে

CSS মডিউল এবং CSS-in-JS লাইব্রেরি থেকে শুরু করে BEM-এর মতো নামকরণ পদ্ধতি পর্যন্ত বৃহত্তর প্রকল্পগুলিতে CSS পরিচালনা করার বিভিন্ন উপায় রয়েছে। চাবিকাঠি হল এমন একটি পদ্ধতির সন্ধান করা যা আপনার দল এবং প্রকল্পের সাথে ভালভাবে ফিট করে এবং এটি ধারাবাহিকভাবে প্রয়োগ করা। মনে রাখবেন, CSS লেখার জন্য কোড লেখার ক্ষেত্রে যতটা দক্ষ এবং পারফরম্যান্স হয় ঠিক ততটাই কোড লেখার বিষয়ে যা বোধগম্য এবং রক্ষণাবেক্ষণযোগ্য।

শুভ কোডিং!