কিভাবে Nordhealth ওয়েব উপাদানে কাস্টম বৈশিষ্ট্য ব্যবহার করে

ডিজাইন সিস্টেম এবং কম্পোনেন্ট লাইব্রেরিতে কাস্টম প্রপার্টি ব্যবহার করার সুবিধা।

David Darnes

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

আমরা কিভাবে ওয়েব কম্পোনেন্ট তৈরি করি

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

import {html, css, LitElement} from 'lit';

export class SimpleGreeting extends LitElement {
  static styles = css`:host { color: blue; font-family: sans-serif; }`;

  static properties = {
    name: {type: String},
  };

  constructor() {
    super();
    this.name = 'there';
  }

  render() {
    return html`
Hey ${this.name}, welcome to Web Components!
`;
  }
}
customElements.define('simple-greeting', SimpleGreeting);

কিন্তু ওয়েব কম্পোনেন্টস সম্পর্কে সবচেয়ে আকর্ষণীয় জিনিস হল যে তারা প্রায় বিদ্যমান জাভাস্ক্রিপ্ট ফ্রেমওয়ার্কের সাথে কাজ করে, এমনকি কোন ফ্রেমওয়ার্কের সাথে কাজ করে না। একবার মূল জাভাস্ক্রিপ্ট প্যাকেজটি পৃষ্ঠায় উল্লেখ করা হলে, একটি ওয়েব কম্পোনেন্ট ব্যবহার করা অনেকটা নেটিভ এইচটিএমএল উপাদান ব্যবহার করার মতো। এটি একটি নেটিভ এইচটিএমএল এলিমেন্ট নয় এমন একমাত্র আসল টেল-টেল চিহ্ন হল ট্যাগগুলির মধ্যে সামঞ্জস্যপূর্ণ হাইফেন, যা ব্রাউজারকে বোঝানোর জন্য একটি মানক যে এটি একটি ওয়েব উপাদান।

// TODO: DevSite - Code sample removed as it used inline event handlers

ছায়া DOM শৈলী এনক্যাপসুলেশন

অনেকটা একইভাবে নেটিভ এইচটিএমএল উপাদানগুলির একটি ছায়া DOM থাকে, তাই ওয়েব উপাদানগুলিও থাকে। ছায়া DOM হল একটি উপাদানের মধ্যে নোডের একটি লুকানো গাছ। এটি কল্পনা করার সর্বোত্তম উপায় হল আপনার ওয়েব ইন্সপেক্টর খুলুন এবং "শ্যাডো ডম ট্রি দেখান" বিকল্পটি চালু করুন। একবার আপনি এটি সম্পন্ন করার পরে, পরিদর্শকের মধ্যে একটি নেটিভ ইনপুট উপাদান দেখার চেষ্টা করুন - আপনার কাছে এখন সেই ইনপুটটি খুলতে এবং এর মধ্যে থাকা সমস্ত উপাদান দেখতে পাবেন৷ এমনকি আপনি আমাদের ওয়েব কম্পোনেন্টগুলির মধ্যে একটি দিয়ে এটি চেষ্টা করতে পারেন-এর ছায়া DOM দেখতে আমাদের কাস্টম ইনপুট উপাদান পরিদর্শন করার চেষ্টা করুন।

Shadow DOM-এর একটি সুবিধা (বা ত্রুটি, আপনার দৃষ্টিভঙ্গির উপর নির্ভর করে) হল স্টাইল এনক্যাপসুলেশন। আপনি যদি আপনার ওয়েব কম্পোনেন্টের মধ্যে CSS লেখেন, তাহলে সেই স্টাইলগুলি ফাঁস হতে পারে না এবং মূল পৃষ্ঠা বা অন্যান্য উপাদানগুলিকে প্রভাবিত করতে পারে না; তারা সম্পূর্ণরূপে উপাদান মধ্যে অন্তর্ভুক্ত করা হয়. উপরন্তু, প্রধান পৃষ্ঠা বা মূল ওয়েব কম্পোনেন্টের জন্য লেখা CSS আপনার ওয়েব কম্পোনেন্টে লিক করতে পারে না।

শৈলীর এই এনক্যাপসুলেশন আমাদের কম্পোনেন্ট লাইব্রেরিতে একটি সুবিধা। এটি আমাদের আরও একটি গ্যারান্টি দেয় যে কেউ যখন আমাদের উপাদানগুলির একটি ব্যবহার করে, তখন মূল পৃষ্ঠায় প্রয়োগ করা শৈলী নির্বিশেষে এটি আমাদের ইচ্ছামত দেখাবে। এবং আরও নিশ্চিত করতে, আমরা all: unset; আমাদের সমস্ত ওয়েব কম্পোনেন্টের রুট বা "হোস্ট"-এ।

:host {
  all: unset;
  display: block;
  box-sizing: border-box;
  text-align: start;
  /* ... */
}

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

সেখানেই CSS কাস্টম প্রপার্টি আসে।

CSS কাস্টম বৈশিষ্ট্য

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

:root {
  --n-color-accent: rgb(53, 89, 199);
  /* ... */
}

.n-color-accent-text {
  color: var(--n-color-accent);
}

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

var() ফাংশন ব্যবহার করে কাস্টম প্রপার্টিগুলিকে উত্তরাধিকারী করার এই ক্ষমতা হল কিভাবে আমরা আমাদের ওয়েব কম্পোনেন্টের শ্যাডো DOM-এর মাধ্যমে বিদ্ধ করি এবং আমাদের কম্পোনেন্ট স্টাইল করার সময় ডেভেলপারদের আরও সূক্ষ্ম কন্ট্রোল করতে দিন।

নর্ড ওয়েব কম্পোনেন্টে কাস্টম বৈশিষ্ট্য

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

:root {
  --n-space-m: 16px;
  --n-space-l: 24px;
  /* ... */
  --n-color-background: rgb(255, 255, 255);
  --n-color-border: rgb(216, 222, 228);
  /* ... */
}

এই টোকেন মানগুলি তখন আমাদের উপাদানগুলির মধ্যে উল্লেখ করা হয়। কিছু ক্ষেত্রে, আমরা সরাসরি CSS সম্পত্তিতে মান প্রয়োগ করব, কিন্তু অন্যদের জন্য, আমরা আসলে একটি নতুন প্রাসঙ্গিক কাস্টম সম্পত্তি সংজ্ঞায়িত করব এবং তাতে মান প্রয়োগ করব।

:host {
  --n-tab-group-padding: 0;
  --n-tab-list-background: var(--n-color-background);
  --n-tab-list-border: inset 0 -1px 0 0 var(--n-color-border);
  /* ... */
}

.n-tab-group-list {
  box-shadow: var(--n-tab-list-border);
  background-color: var(--n-tab-list-background);
  gap: var(--n-space-s);
  /* ... */
}

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

.n-tab-group-list::before {
  /* ... */
  padding-inline-start: var(--n-tab-group-padding);
}

.n-tab-group-list::after {
  /* ... */
  padding-inline-end: var(--n-tab-group-padding);
}

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

:host([padding="l"]) {
  --n-tab-group-padding: var(--n-space-l);
}

কিন্তু সবচেয়ে শক্তিশালী সুবিধা হল যে যখন আমরা একটি উপাদানে এই প্রাসঙ্গিক কাস্টম বৈশিষ্ট্যগুলিকে সংজ্ঞায়িত করি, তখন আমরা আমাদের প্রতিটি উপাদানের জন্য এক ধরণের কাস্টম CSS API তৈরি করি, যা সেই উপাদানটির ব্যবহারকারী দ্বারা ট্যাপ করা যেতে পারে।

<nord-tab-group label="Title">
  <!-- ... -->
</nord-tab-group>

<style>
  nord-tab-group {
    --n-tab-group-padding: var(--n-space-xl);
  }
</style>

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

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

আরও কাস্টম বৈশিষ্ট্য গ্রহণ

লেখার সময় আমরা আসলে আমাদের ডকুমেন্টেশনে এই প্রাসঙ্গিক কাস্টম বৈশিষ্ট্যগুলি প্রকাশ করি না; যাইহোক, আমরা পরিকল্পনা করি যাতে আমাদের বৃহত্তর উন্নয়ন দল এই বৈশিষ্ট্যগুলি বুঝতে এবং লাভ করতে পারে। আমাদের উপাদানগুলি একটি ম্যানিফেস্ট ফাইলের সাথে npm-এ প্যাকেজ করা হয়, যাতে সেগুলি সম্পর্কে জানার মতো সবকিছু রয়েছে৷ যখন আমাদের ডকুমেন্টেশন সাইট স্থাপন করা হয় তখন আমরা ম্যানিফেস্ট ফাইলটিকে ডেটা হিসাবে ব্যবহার করি, যা Eleventy এবং এর গ্লোবাল ডেটা বৈশিষ্ট্য ব্যবহার করে করা হয়। আমরা এই ম্যানিফেস্ট ডেটা ফাইলে এই প্রাসঙ্গিক কাস্টম বৈশিষ্ট্যগুলি অন্তর্ভুক্ত করার পরিকল্পনা করছি৷

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

<nord-divider></nord-divider>

<section>
  <nord-divider></nord-divider>
   <!-- ... -->
</section>

<style>
  nord-divider {
    --n-divider-color: var(--n-color-status-danger);
  }

  section {
    padding: var(--n-space-s);
    background: var(--n-color-surface-raised);
  }
  
  section nord-divider {
    --n-divider-color: var(--n-color-status-success);
  }
</style>

আপনাকে সরাসরি কম্পোনেন্টে কাস্টম প্রপার্টি মান সেট করতে হবে কারণ আমরা কম্পোনেন্ট হোস্ট সিলেক্টরের মাধ্যমে একই উপাদানে সেগুলিকে সংজ্ঞায়িত করছি। গ্লোবাল ডিজাইনের টোকেনগুলি যা আমরা সরাসরি উপাদানটিতে ব্যবহার করি, এই সমস্যার দ্বারা প্রভাবিত না হয়ে সরাসরি চলে যায় এবং এমনকি মূল উপাদানগুলিতেও আটকানো যেতে পারে। কিভাবে আমরা উভয় বিশ্বের সেরা পেতে পারি?

ব্যক্তিগত এবং পাবলিক কাস্টম বৈশিষ্ট্য

প্রাইভেট কাস্টম প্রপার্টি হল এমন কিছু যা Lea Verou দ্বারা একত্রিত করা হয়েছে , যা কম্পোনেন্টে একটি প্রাসঙ্গিক "ব্যক্তিগত" কাস্টম প্রপার্টি কিন্তু ফলব্যাক সহ একটি "পাবলিক" কাস্টম প্রপার্টিতে সেট করা হয়েছে।

:host {
  --_n-divider-color: var(--n-divider-color, var(--n-color-border));
  --_n-divider-size: var(--n-divider-size, 1px);
}

.n-divider {
  border-block-start: solid var(--_n-divider-size) var(--_n-divider-color);
  /* ... */
}

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

<nord-divider></nord-divider>

<section>
  <nord-divider></nord-divider>
   <!-- ... -->
</section>

<style>
  nord-divider {
    --n-divider-color: var(--n-color-status-danger);
  }

  section {
    padding: var(--n-space-s);
    background: var(--n-color-surface-raised);
    --n-divider-color: var(--n-color-status-success);
  }
</style>

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

আমি আশা করি আপনি এই অন্তর্দৃষ্টি পেয়েছেন যে আমরা কীভাবে CSS কাস্টম বৈশিষ্ট্য সহ ওয়েব উপাদানগুলি ব্যবহার করি। আপনি কি মনে করেন তা আমাদের জানান এবং আপনি যদি নিজের কাজে এই পদ্ধতিগুলির যেকোনো একটি ব্যবহার করার সিদ্ধান্ত নেন, আপনি আমাকে Twitter @DavidDarnes- এ খুঁজে পেতে পারেন। আপনি টুইটারে Nordhealth @NordhealthHQ এবং আমার দলের বাকি সদস্যদেরও খুঁজে পেতে পারেন, যারা এই ডিজাইন সিস্টেমকে একত্রিত করতে এবং এই নিবন্ধে উল্লিখিত বৈশিষ্ট্যগুলি কার্যকর করার জন্য কঠোর পরিশ্রম করেছেন: @Viljamis , @WickyNilliams এবং @eric_habich ।

ড্যান ক্রিশ্চিয়ান পাদুরেসের নায়কের ছবি