বিইএম এবং আধুনিক সিএসএস নির্বাচকদের সাথে ক্যাসকেড টেমিং

বিইএম ফ্রন্ট-এন্ড বিকাশের জগতে আপাতদৃষ্টিতে সমস্ত কৌশলের মতো, একটি BEM বিন্যাসে CSS লেখা মেরুকরণ হতে পারে। তবে এটি - অন্তত আমার টুইটার বুদ্বুদে - একটি ভাল-পছন্দ করা CSS পদ্ধতিগুলির মধ্যে একটি৷

ব্যক্তিগতভাবে, আমি মনে করি BEM ভাল, এবং আমি মনে করি আপনার এটি ব্যবহার করা উচিত। কিন্তু আমি এটাও বুঝতে পারি কেন আপনি নাও পারেন।

BEM সম্পর্কে আপনার মতামত নির্বিশেষে, এটি বেশ কয়েকটি সুবিধা প্রদান করে, সবচেয়ে বড় হল এটি CSS ক্যাসকেডে নির্দিষ্টতার সংঘর্ষ এড়াতে সাহায্য করে। এর কারণ, যদি সঠিকভাবে ব্যবহার করা হয়, BEM বিন্যাসে লেখা যেকোনো নির্বাচকদের একই নির্দিষ্টতা স্কোর থাকা উচিত (0,1,0) আমি বছরের পর বছর ধরে প্রচুর বৃহৎ-স্কেল ওয়েবসাইটের জন্য CSS-এর আর্কিটেক্ট করেছি (ভাবুন সরকার, বিশ্ববিদ্যালয় এবং ব্যাঙ্ক), এবং এটি এই বৃহত্তর প্রকল্পগুলিতে রয়েছে যেখানে আমি খুঁজে পেয়েছি যে BEM সত্যিই উজ্জ্বল। CSS লেখা অনেক বেশি মজাদার যখন আপনি আত্মবিশ্বাসী হন যে আপনি যে স্টাইল লিখছেন বা সম্পাদনা করছেন তা সাইটের অন্য কোনো অংশকে প্রভাবিত করছে না।

প্রকৃতপক্ষে ব্যতিক্রম রয়েছে যেখানে নির্দিষ্টতা যোগ করা সম্পূর্ণরূপে গ্রহণযোগ্য বলে মনে করা হয়। যেমন: the :hover এবং :focus ছদ্ম ক্লাস। যারা একটি নির্দিষ্টতা স্কোর আছে 0,2,0. আরেকটি হল ছদ্ম উপাদান — যেমন ::before এবং ::after - যার একটি নির্দিষ্ট স্কোর আছে 0,1,1. যদিও এই নিবন্ধের বাকি অংশের জন্য, ধরা যাক আমরা অন্য কোন নির্দিষ্টতা হামাগুড়ি দিতে চাই না। 🤓

কিন্তু আমি সত্যিই এখানে আপনাকে BEM-এ বিক্রি করতে আসিনি। পরিবর্তে, আমি আধুনিক CSS নির্বাচকদের পাশাপাশি কীভাবে এটি ব্যবহার করতে পারি সে সম্পর্কে কথা বলতে চাই — ভাবুন :is(), :has(), :where(), ইত্যাদি — এমনকি লাভ অধিক নিয়ন্ত্রণ ক্যাসকেড.

আধুনিক সিএসএস নির্বাচকদের সম্পর্কে এটি কী?

সার্জারির CSS সিলেক্টর লেভেল 4 স্পেক উপাদান নির্বাচন করার জন্য আমাদের কিছু শক্তিশালী নতুন (ইশ) উপায় দেয়। আমার প্রিয় কিছু অন্তর্ভুক্ত :is(), :where(), এবং :not(), যার প্রত্যেকটি সমস্ত আধুনিক ব্রাউজার দ্বারা সমর্থিত এবং আজকাল প্রায় যেকোনো প্রকল্পে ব্যবহার করা নিরাপদ৷

:is() এবং :where() তারা নির্দিষ্টতা প্রভাবিত কিভাবে ব্যতীত মূলত একই জিনিস. বিশেষ করে, :where() সবসময় একটি নির্দিষ্টতা স্কোর আছে 0,0,0. হ্যাঁ, এমনকি :where(button#widget.some-class) কোন নির্দিষ্টতা নেই। এদিকে, এর নির্দিষ্টতা :is() সর্বোচ্চ সুনির্দিষ্টতার সাথে তার আর্গুমেন্ট তালিকার উপাদান। সুতরাং, ইতিমধ্যেই আমাদের কাছে দুটি আধুনিক নির্বাচকের মধ্যে একটি ক্যাসকেড-বিবাদের পার্থক্য রয়েছে যেগুলির সাথে আমরা কাজ করতে পারি।

অবিশ্বাস্যভাবে শক্তিশালী :has() রিলেশনাল সিউডো-ক্লাসও হয় দ্রুত ব্রাউজার সমর্থন অর্জন (এবং তখন থেকে CSS এর সবচেয়ে বড় নতুন বৈশিষ্ট্য গ্রিড, আমার মতে). যাইহোক, লেখার সময়, ব্রাউজার সমর্থন করে :has() এখনো উৎপাদনে ব্যবহারের জন্য যথেষ্ট ভালো নয়।

লেমে আমার বিইএম-এ সেই সিউডো-ক্লাসগুলির মধ্যে একটিকে আটকে রাখুন এবং…

/* ❌ specificity score: 0,2,0 */
.something:not(.something--special) {
  /* styles for all somethings, except for the special somethings */
}

উফফফ! যে নির্দিষ্টতা স্কোর দেখুন? মনে রাখবেন, বিইএম-এর সাথে আমরা আদর্শভাবে চাই যে আমাদের নির্বাচকদের সবার একটি নির্দিষ্ট স্কোর থাকুক 0,1,0। কেন 0,2,0 খারাপ? এই একই উদাহরণ বিবেচনা করুন, প্রসারিত:

.something:not(.something--special) {
  color: red;
}
.something--special {
  color: blue;
}

যদিও দ্বিতীয় নির্বাচক সোর্স অর্ডারে শেষ, প্রথম নির্বাচকের উচ্চতর নির্দিষ্টতা (0,2,0) জয়, এবং রং .something--special উপাদান সেট করা হবে red. অর্থাৎ, ধরে নিচ্ছি যে আপনার BEM সঠিকভাবে লেখা হয়েছে এবং নির্বাচিত উপাদানটিতে উভয়ই রয়েছে .something বেস ক্লাস এবং .something--special HTML এ এটিতে মডিফায়ার ক্লাস প্রয়োগ করা হয়েছে।

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

ডাঙ। তাই এখন কি?

আমি কি সম্পর্কে বলছিলাম মনে রাখবেন :where() এবং সত্য যে এর নির্দিষ্টতা শূন্য? আমরা আমাদের সুবিধার জন্য এটি ব্যবহার করতে পারি:

/* ✅ specificity score: 0,1,0 */
.something:where(:not(.something--special)) {
  /* etc. */
}

এই নির্বাচকের প্রথম অংশ (.something) এর স্বাভাবিক নির্দিষ্টতা স্কোর পায় 0,1,0. কিন্তু :where() — এবং এর ভিতরে সবকিছু — এর একটি নির্দিষ্টতা আছে 0, যা নির্বাচকের নির্দিষ্টতাকে আর বাড়ায় না।

:where() আমাদের বাসা বাঁধতে দেয়

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

.card { ... }

.card--featured {
  /* etc. */  
  .card__title { ... }
  .card__title { ... }
}

.card__title { ... }
.card__img { ... }

এই উদাহরণে, আমরা একটি .card উপাদান. যখন এটি একটি "বৈশিষ্ট্যযুক্ত" কার্ড (ব্যবহার করে .card--featured ক্লাস), কার্ডের শিরোনাম এবং ছবি ভিন্নভাবে স্টাইল করা প্রয়োজন। কিন্তু, আমরা যেমন এখন জেনে রাখুন, উপরের কোডটি একটি নির্দিষ্টতা স্কোর তৈরি করে যা আমাদের সিস্টেমের বাকি অংশের সাথে অসঙ্গতিপূর্ণ।

একজন ডাই-হার্ড স্পেসিফিকিটি নর্ড এর পরিবর্তে এটি করতে পারে:

.card { ... }
.card--featured { ... }
.card__title { ... }
.card__title--featured { ... }
.card__img { ... }
.card__img--featured { ... }

এটা এত খারাপ না, তাই না? সত্যি বলতে, এটি সুন্দর সিএসএস।

যদিও এইচটিএমএল এর একটি খারাপ দিক আছে। অভিজ্ঞ BEM লেখকরা সম্ভবত ক্লাঙ্কি টেমপ্লেট লজিক সম্পর্কে বেদনাদায়কভাবে সচেতন যা শর্তসাপেক্ষে একাধিক উপাদানে মডিফায়ার ক্লাস প্রয়োগ করার জন্য প্রয়োজন। এই উদাহরণে, HTML টেমপ্লেট শর্তসাপেক্ষে যোগ করতে হবে --featured তিনটি উপাদানে সংশোধক শ্রেণী (.card, .card__title, এবং .card__img) যদিও বাস্তব জগতের উদাহরণে সম্ভবত আরও বেশি। যে অনেক if বিবৃতি।

সার্জারির :where() নির্বাচক আমাদেরকে অনেক কম টেমপ্লেট লজিক লিখতে সাহায্য করতে পারে — এবং বুট করার জন্য কম BEM ক্লাস — নির্দিষ্টতার মাত্রা যোগ না করেই।

.card { ... }
.card--featured { ... }

.card__title { ... }
:where(.card--featured) .card__title { ... }

.card__img { ... }
:where(.card--featured) .card__img { ... }

এখানে একই জিনিস কিন্তু সাসে (ট্রেলিং নোট করুন ampersands):

.card { ... }
.card--featured { ... }
.card__title { 
  /* etc. */ 
  :where(.card--featured) & { ... }
}
.card__img { 
  /* etc. */ 
  :where(.card--featured) & { ... }
}

শিশুর বিভিন্ন উপাদানে মডিফায়ার ক্লাস প্রয়োগ করার ক্ষেত্রে আপনার এই পদ্ধতিটি বেছে নেওয়া উচিত কিনা তা ব্যক্তিগত পছন্দের বিষয়। কিন্তু অন্তত :where() আমাদের এখন পছন্দ দেয়!

নন-বিইএম এইচটিএমএল সম্পর্কে কী?

আমরা একটি নিখুঁত পৃথিবীতে বাস না. কখনও কখনও আপনাকে HTML এর সাথে মোকাবিলা করতে হবে যা আপনার নিয়ন্ত্রণের বাইরে। উদাহরণস্বরূপ, একটি তৃতীয় পক্ষের স্ক্রিপ্ট যা এইচটিএমএল ইনজেক্ট করে যা আপনাকে স্টাইল করতে হবে। সেই মার্কআপটি প্রায়শই BEM ক্লাসের নাম দিয়ে লেখা হয় না। কিছু ক্ষেত্রে এই শৈলীগুলি আইডি ছাড়া ক্লাস ব্যবহার করে না!

আরেকবার, :where() আমাদের পিছনে আছে. এই সমাধানটি কিছুটা হ্যাকি, কারণ আমাদের DOM গাছের আরও উপরে একটি উপাদানের শ্রেণী উল্লেখ করতে হবে যা আমরা জানি যে বিদ্যমান।

/* ❌ specificity score: 1,0,0 */
#widget {
  /* etc. */
}

/* ✅ specificity score: 0,1,0 */
.page-wrapper :where(#widget) {
  /* etc. */
}

একটি অভিভাবক উপাদান উল্লেখ করা যদিও একটু ঝুঁকিপূর্ণ এবং সীমাবদ্ধ বোধ করে। যদি সেই অভিভাবক শ্রেণীর পরিবর্তন হয় বা কোন কারণে সেখানে না থাকে? একটি ভাল (কিন্তু সম্ভবত সমানভাবে হ্যাকি) সমাধান ব্যবহার করা হবে :is() পরিবর্তে. মনে রাখবেন, এর নির্দিষ্টতা :is() এর নির্বাচক তালিকার সবচেয়ে নির্দিষ্ট নির্বাচকের সমান।

সুতরাং, একটি শ্রেণী উল্লেখ করার পরিবর্তে আমরা জানি (বা আশা!) এর সাথে বিদ্যমান :where(), উপরের উদাহরণের মতো, আমরা একটি তৈরি শ্রেণী উল্লেখ করতে পারি এবং ট্যাগ।

/* ✅ specificity score: 0,1,0 */
:is(.dummy-class, body) :where(#widget) {
  /* etc. */
}

চির-বর্তমান body আমাদের নির্বাচন করতে সাহায্য করবে #widget উপাদান, এবং উপস্থিতি .dummy-class একই ভিতরে ক্লাস :is() দেয় body নির্বাচক একটি ক্লাস হিসাবে একই নির্দিষ্টতা স্কোর (0,1,0)… এবং এর ব্যবহার :where() নিশ্চিত করে যে নির্বাচক এর চেয়ে বেশি নির্দিষ্ট কিছু পান না।

এটাই!

এইভাবে আমরা আধুনিক সুনির্দিষ্টতা-ব্যবস্থাপনার বৈশিষ্ট্যগুলিকে কাজে লাগাতে পারি৷ :is() এবং :where() বিইএম ফরম্যাটে সিএসএস লেখার সময় আমরা যে নির্দিষ্টতার সংঘর্ষ প্রতিরোধের পাশাপাশি সিউডো-ক্লাসগুলি পাই। এবং খুব দূর ভবিষ্যতে নয়, একদা :has() ফায়ারফক্স সমর্থন লাভ করে (এটি বর্তমানে লেখার সময় একটি পতাকার পিছনে সমর্থিত) আমরা সম্ভবত এটির নির্দিষ্টতা পূর্বাবস্থায় ফিরিয়ে আনতে :where() এর সাথে যুক্ত করতে চাই।

আপনি বিইএম নামকরণে সর্বোত্তম যান বা না করুন, আমি আশা করি আমরা একমত হতে পারি যে নির্বাচক নির্দিষ্টতায় ধারাবাহিকতা থাকা একটি ভাল জিনিস!