সিএসএস প্রিপ্রসেসর ব্যবহার করলে, যেমন লেস বা স্যাস, সেখানে ভেরিয়েবল ব্যবহারের সুযোগ থাকে। তবে, ভ্যারিয়েবলের নাম র‍্যান্ডমভাবে না না দিয়ে, গঠনমুলক ভাবে দেয়া সম্ভব। ১ ভেরিয়েবল নেম গুলো অর্গানাইজ করে দেয়া যায় ( প্রজেক্ট অনুসারে )। এতে প্রজেক্টে স্ট্রাকচার আসবে, বুঝতে সুবিধা হবে।

নামের সাজেশন

ধরেন প্রজেক্টের টেক্সট কালার ঠিক করতে একটি ভ্যারিয়েবল তৈরি করা হল। আপনি নাম দিলেন $text-color, কিন্তু আসলে $color-text নামকরণ করলে ভালো হত না? কিভাবে ডিসাইড করবেন? ভেবে নাম না রাখলে পরে প্রজেক্টের স্ট্রাকচারের ক্ষতি হয়। অনেক সময় আমরা ভুলেই যাই কোন প্রজেক্টে কি নিয়ম মেনে ভ্যারিয়েবলের নাম রাখা হয়েছিল। এতে পরে অনেক কনফিউশন ক্রিয়েট হয়।

এর জন্য আমাদের নামকরণের কিছু নিয়ম ঠিক করা দরকার। ভ্যারিয়েবলের নাম গ্রুপে গ্রুপে, একটার সাথে আরেকটার রিলেশন মিল রেখে করা উচিৎ। কাজ বুঝে সেই অনুপাতে গ্রুপ করা যায়, বা ইলিমেন্ট বুঝে। (বাম থেকে ডানে - ইত্যাদি)।

যদি চারটা ভ্যারিয়েবল চার ভিন্ন রকম বর্ডার কালার এর জন্য হয়, তবে প্রতিটার নাম বর্ডার দিয়ে শুরু হওয়া উচিৎ। এতে পরে পড়ে বুঝতে সুবিধা হবে। গ্রুপিং করে রাখলে নাম, পরে পড়ে বুঝতে সুবিধা হয়।

জেনেরিক নামের পরিবর্তে স্পেসিফিক নাম

ধরি স্যাসে কালার প্যালেট ঠিক করতে কিছু ভ্যারিয়েবল সেট করেছেন। ব্রুল এর শেড দিয়ে প্যালেট হলে, ভ্যারিয়েবলের নাম এমন হতে পারেঃ

$blue;
$dark-blue;
$medium-blue;
$darkest-blue;
$light-blue;
$lightest-blue;

জেনেরিক ভাবে শুরু হলেও , এখন প্রতি নাম ব্লু দিয়ে শুরু হচ্ছে। আরও স্কেসিফিকভাবে নাম রাখা যায়।

$blue;
$blue-dark;
$blue-darkest;
$blue-light;
$blue-lightest;

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

হিন্টিং এর উদাহরণ

বড় প্রজেক্টে কাজ করার জন্য কালারের ভ্যারিয়েবল এমন গ্রুপে গ্রুপ ভাগ করে নিলে অনেক সুবিধা।

// OK
$border-color;
$dark-border-color;
$light-color-border;
$highlight;
$link;
$link-dark;
$text;
$color-text;
$link-color-light;
$lightest-text-color;

// Better
$color-border;
$color-border-dark;
$color-border-light;

$color-highlight;

$color-link;
$color-link-dark;
$color-link-light;

$color-text;
$color-text-light;
$color-text-lightest;

ধরেন, বর্ডার কালার ঠিক করতে একটি ভ্যারিয়েবল দরকার। border: 1px solid $colo টাইপ করা শুরু করলেই, এডিটর আগে থকে ডিফাইন করা ভ্যারিয়েবল সাজেস্ট করবে।

হয়ত প্রজেক্টে অনেক কালার আছে, কিন্তু আমার বর্ডার কালারটাই দরকার। আমি আগে থেকেই আমার বর্ডারের কালার প্রিডিফাইন করে রাখতে পারি। এভাবেঃ পরে কোড করার সময় জাস্ট border: 1px solid $color-border লিখে দিলেই হল। যেটা ব্যবহার করতে চাই, সেটা সাজেশন থেকে সিলেক্ট করে নিলেই হল!

কোদ হিন্টিং না চাইলেও, এই উপায়ে নামকরণ করা ইফেক্টিভ। ভ্যারিয়েবল একটার সাথে আরেকটার রিলেশন সহজেই একটা নামের প্রিফিক্স দিয়ে ঠিক করে দেয়া যায়।

পরিশেষ

এই পদ্ধতিতে নামরকরন করলে, কোড পরবর্তীতে পড়ে বুঝতে অনেক সুবিধা হয়। সবার জন্যই এটা ভালো সমাধান!