সিমান্টিক বনাম প্রিমিটিভ টোকেন
সিমান্টিক টোকেন এমন ডিজাইন টোকেন যার নাম দেওয়া হয় তার কাজ অনুসারে, ধারণ করা মান অনুসারে নয় - যেমন --color-red-600-এর বদলে --color-text-danger। এটি সাধারণত একটি প্রিমিটিভ টোকেনকে নির্দেশ করে, ফলে ভিতরের মান বদলালেও ব্যবহারকারী কোডের কোনো নাম বদলাতে হয় না।
দুটি স্তর
পরিণত টোকেন ব্যবস্থার বেশিরভাগেই অন্তত দুটি স্তর থাকে।
প্রিমিটিভ টোকেন (যাকে র, গ্লোবাল বা কোর টোকেনও বলা হয়) প্রকৃত মানগুলো ধরে রাখে। এদের নাম হয় বর্ণনামূলক:
--red-600: #DC2626;
--blue-500: #2563EB;
--space-4: 16px;সিমান্টিক টোকেন ধরে রাখে ওই মানগুলো কোথায় ব্যবহৃত হবে সেই সিদ্ধান্ত। এদের নাম হয় ভূমিকা অনুযায়ী:
--color-text-danger: var(--red-600);
--color-action-primary: var(--blue-500);
--space-card-padding: var(--space-4);কম্পোনেন্ট সিমান্টিক স্তরকে নির্দেশ করে। প্রায় কিছুই সরাসরি কোনো প্রিমিটিভকে নির্দেশ করা উচিত নয়।
এই পরোক্ষতা কেন পোষায়
রিব্র্যান্ডিং আর নতুন করে লেখা থাকে না। --color-action-primary কোথায় নির্দেশ করছে তা বদলান, সব বোতাম সঙ্গে বদলাবে। কম্পোনেন্টগুলো যদি --blue-500 নির্দেশ করত, তবে প্রতিটি কম্পোনেন্ট আলাদা করে বদলাতে হতো, আর যেগুলো অ্যাকশনের সঙ্গে সম্পর্কহীন কারণে নীল ব্যবহার করত সেগুলো ভেঙে যেত।
থিম সম্ভব হয়। ডার্ক মোড মানে একই সিমান্টিক নামগুলো ভিন্ন প্রিমিটিভকে নির্দেশ করা। সিমান্টিক স্তর না থাকলে নতুন করে নির্দেশ করার মতো কিছুই থাকে না।
কোড নিজের অর্থ বলে। --color-text-danger পাঠককে জানায় মানটি কেন সেখানে আছে। --red-600 কিছুই জানায় না, আর সেটা সবচেয়ে বেশি বাধে যখন কাউকে সিদ্ধান্ত নিতে হয় এটি বদলানো নিরাপদ কি না।
চেনা ভুল
দলগুলো সিমান্টিক স্তর এড়িয়ে যায় কারণ প্রথম দিনে সেটিকে আমলাতন্ত্র মনে হয়, যখন রং এগারোটি আর সবাই মনে রাখে কোনটি কীসের জন্য।
খরচটা দেখা দেয় প্রথম রিব্র্যান্ডে, প্রথম ডার্ক মোডে, বা প্রথম অ্যাক্সেসিবিলিটি পর্যালোচনায় — আর ততদিনে প্রিমিটিভগুলো শত শত জায়গায় নির্দেশিত। পরে সিমান্টিক স্তর বসানো যান্ত্রিক কিন্তু ক্লান্তিকর কাজ, যা কেউ সময়সূচিতে রাখে না।
তৃতীয় স্তর
বড় ব্যবস্থাগুলো কম্পোনেন্ট-স্তরের টোকেন যোগ করে: --button-primary-background নির্দেশ করে --color-action-primary-কে, যা নির্দেশ করে --blue-500-কে।
কম্পোনেন্টের সত্যিই আলাদা হওয়ার দরকার হলে এটি কাজে লাগে, আর দরকার না হলে কেবল পরোক্ষতার খরচ থাকে। দুই স্তরই সঠিক ডিফল্ট; তৃতীয়টি যোগ করুন যখন সত্যিকারের একটি ক্ষেত্র আসে, আগেভাগে নয়।
Flash DSM এখানে কোথায়
তৈরি করা ব্যবস্থাগুলোতে দুটি স্তরই আগে থেকেই থাকে: প্রিমিটিভ স্কেল, আর সেগুলোকে নির্দেশ করা টেক্সট, ব্যাকগ্রাউন্ড, বর্ডার ও স্ট্যাটাসের সিমান্টিক ভূমিকা — হালকা ও গাঢ় দুই মোডেই।