Class নামকরণের নিয়ম ১

class এর ধরন

Utility class

নির্দিষ্ট সংমিশ্রণে তৈরি CSS property গুলোর একটি class, যা প্রজেক্টের element গুলোতে সার্বজনীনভাবে প্রয়োগ করা যেতে পারে।

স্বাভাবিকভাবে, সব utility class গুলোই global class । আর, utility class এর ধারণা হল এমন যে, একটি class যা প্রজেক্টের ভেতরে গ্লোবাল CSS property গুলো প্রয়োগ করতে সহায়তা করে।

উদাহরণস্বরূপ, আমরা প্রজেক্ট জুড়ে সচরাচর ব্যবহৃত background color গুলি সংগঠিত এবং পরিচালনা করতে সহায়তা করার জন্য, আমাদের Client-First স্টার্টার প্রজেক্টে background-color-gray নামে একটি utility class যোগ করেছি।

আমরা পুরো প্রজেক্ট জুড়ে সমন্বিত typography sizing কে সংগঠিত এবং পরিচালনা করতে সহায়তা করার জন্য, আমাদের Client-First স্টার্টার প্রজেক্টে font-size-large নামে একটি utility class যোগ করেছি ।

Utility class এর class name এর মধ্যে কোন underscore ব্যবহার করবেন না।

Custom class

একটি নির্দিষ্ট component, page, element এর group বা single element এর জন্য custom class তৈরি করা হয়েছে।

আমরা এটিকে "custom" class বলি কারণ, এটি আমাদের প্রজেক্টে থাকা utility class গুলির বাইরে তৈরি করা হয়েছে। যখন element এ utility class গুলি ব্যবহার করা যায় না অথবা ব্যবহার করা উচিত না, তখন custom class গুলি তৈরি করা উচিত। ঐ element এ এই class টি হবে custom class ।

উদাহরণস্বরূপ,  header_background-layer হলো প্রজেক্টের গ্লোবাল Header গুলোর একটি নির্দিষ্ট element কে style করার জন্য তৈরি একটি class ।

উদাহরণস্বরূপ,  testimonial-slider_headshot হলো testimonial slide এর একটি নির্দিষ্ট element কে style করার জন্য তৈরি একটি class ।

Client-First এ, custom class গুলির class name এ underscore ব্যবহার করা হয়।

Global class

class এর একটি শ্রেণীবিন্যাস। global class প্রজেক্টের সমগ্র জায়গায় ব্যবহারের জন্য নির্ধারিত। utility class এবং custom class উভয়ই global class হতে পারে।

পুরো প্রজেক্ট জুড়ে সমন্বিত থাকবে, এমন style গুলোকে global class প্রয়োগ করে। global class একটি নির্দিষ্ট স্থানের জন্য নয়।

"Global" অর্থ সর্বত্র এবং প্রজেক্টের যে কোন জায়গায়।

সমস্ত utility class গুলো global class আর utility class গুলি স্বাভাবিকভাবেই গ্লোবাল হয়।

উদাহরণস্বরূপ, আমাদের margin এবং padding class গুলি গ্লোবাল utility class এবং margin-large এর margin value হলো 3rem। যখন আমরা সেই মানটিকে 4rem -এ আপডেট করি, তখন margin-large ব্যবহার করে এমন প্রতিটি উদাহরণ 4rem-এ আপডেট হবে।

margin-large হলো একটি গ্লোবাল নিয়ন্ত্রণকারী যা পুরো প্রজেক্ট জুড়ে আমাদের margin এবং padding value পরিবর্তন করে। আমরা আমাদের প্রজেক্টে প্রভাবশালী, বৈশ্বিক পরিবর্তন করতে পারবো, যখন গ্লোবাল utility class গুলোকে আমরা সঠিকভাবে ব্যবহার করতে পারবো।

Global class গুলো utility class গুলিতে সীমাবদ্ধ নয়। যে কোনও ধরণের class এর মত global class গুলো এখন আরও স্পষ্টভাবে সংজ্ঞায়িত করা হয়, যার উদ্দেশ্য হলো সাইটের সব জায়গায় style এর গ্লোবাল ব্যবস্থাপনা করা।

Client-First v2 এ, আমরা global class হিসাবে custom class এর ব্যবহারকে উৎসাহিত করি এবং আরও ভালভাবে ব্যাখ্যা করি।

উদাহরণসরূপ, faq_item একটি গ্লোবাল custom class হতে পারে । ওয়েবসাইট জুড়ে আমাদের  অনেকগুলি FAQ বিভাগ রয়েছে এবং পুরো প্রজেক্ট জুড়ে FAQ item গুলি পরিচালনা করতে  faq_item ব্যবহৃত হয়।

উদাহরণসরূপ, header_content একটি গ্লোবাল custom class হতে পারে । আমাদের প্রজেক্টে প্রতিটি page এ একটি Header component রয়েছে। এই class টি পুরো প্রজেক্ট জুড়ে এই content wrapper কাস্টমাইজেশন কে গ্লোবালভাবে পরিচালনা করে।

Combo class

combo class হলো base class এর একটি ধরণ । একটি combo class, base class থেকে style গুলো পায় এবং এর উপরে আরও style যুক্ত করে।

আমরা "base class" কে আমাদের combo class এ, stack করা combo class এর তালিকার প্রথম class হিসাবে সংজ্ঞায়িত করি। আমরা অনন্য বৈচিত্র্য তৈরি করতে base class এর উপর আরো class যুক্ত করি।

অনন্য বৈচিত্র্য দেয় এমন যুক্ত class টি is- নামক class prefix ব্যবহার করে।

stacked combo class টি কেবল তখনই কাজ করবে যখন এর আগের base class গুলোর সাথে মিলিত হবে। নীচের ভিডিওতে, বুঝতে হবে যে  is-blue একা কাজ করে না। এটি কেবল সংযোজন হিসাবে base button class এ কাজ করে।

custom অথবা utility base class থেকে combo class তৈরি করা যেতে পারে। উপরের উদাহরণে button is-blue , একটি combo class হিসাবে utility class প্রদর্শন করে।
‍

আমরা custom class এর জন্য একটি combo class ও তৈরি করতে পারি। উদাহরণস্বরূপ,  header_content is-home । আর এটি header_content custom class এর একটি ধরণ।

-is prefix

আমরা Client-First-এ is- prefix দিয়ে combo class সংজ্ঞায়িত করি। যখন আমরা is- দেখি, তখন আমরা জানি যে, এই class টি একটি base class এর উপর combo class হিসাবে তৈরি করা হয়েছে।

class গুলোকে deep stack করবেন না

Client-First এর একটি সার্বজনীন নিয়ম রয়েছে - deep stack করবেন না ।

Deep stack — অনেক class একটি element এর উপরে 'stacked' করা বা স্তুপাকারে সাজানো হয়।

Deep stacking — একটি element এর উপরে অনেকগুলি class কে stack করার ক্রিয়া।

এটি Client-First দ্বারা তৈরি একটি শব্দ,যা stacked class গুলির সমস্যাগুলো ঠিক করার জন্য Webflow Designer এ ব্যবহৃত হয়েছে।

Client-First, Webflow তে deep stacking করার কৌশলটি সুপারিশ করে না।

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

Client-First এ, আমরা এই জাতীয় deep stacking class গুলো এড়াতে চাই। আমরা docs জুড়ে deep stacking এড়ানো সম্পর্কে পড়ব।

এখানে কারণগুলোর একটি Quick list রয়েছে:

যে কারণগুলোর জন্য আমরা deep stack করি না

Designer styles panel এ style গুলি পুনরায় সাজানোর অক্ষমতা।

Webflow তে stacked class গুলোর উপর আমাদের স্বাধীনভাবে নিয়ন্ত্রণ নেই। আমরা Designer -এর অভ্যন্তরে তাদের পুনরায় সাজানো বা সঠিকভাবে পরিচালনা করতে অক্ষম। যদি আমাদের stacked list এর class গুলি পরিবর্তন বা অপসারণ এর প্রয়োজন হয়, তবে পূর্ববর্তী class গুলিতে প্রবেশ করার আগে আমাদের list থেকে সমস্ত class সরিয়ে ফেলতে হবে।

নীচের ক্ষেত্রে, আপনি দেখতে পারেন যে, আমরা যদি text weight কে text-weight-medium থেকে text-weight-bold এ পরিবর্তন করতে চাই, তবে আমাদের কিছু class কে remove করতে হবে:

নিম্ন ব্রেকপয়েন্টের লেভেলে , সম্পাদনা করার সময় এই সমস্যাটি চরম হয়ে ওঠে। বেস ব্রেকপয়েন্ট গুলির বাইরে, ব্রেকপয়েন্টগুলো সম্পাদনা করার সময় আমরা আরও কম পরিমানে সম্পাদনার জন্য প্রয়োজনীয় নিয়ন্ত্রণ পাই।

ধীর গতির কর্মধারা। ছোট ছোট পরিবর্তনের জন্য অনেকগুলো ধাপ প্রয়োজন হয়

উপরের কর্মধারা টি সময় সাপেক্ষ। যদি, এটি আমাদের কর্মধারা তে নিয়মিত অনুশীলন হয়, তবে এটি আমাদের build এবং রক্ষণাবেক্ষণের সময়কে আরও দীর্ঘ করে তুলবে।

প্রশিক্ষণের উন্নত শিক্ষার পথ

আমরা বিশ্বাস করি যে, deep stacking আমাদের আরো কঠিন শেখার পথের দিকে পরিচালিত করে। class গুলি কী করে এবং কীভাবে সেগুলো পরিচালনা করতে হয় তা বোঝার গভীর প্রয়োজনীয়তা রয়েছে।

Webflow তে CSS দ্রুত লেখা

Webflow Style panel এর মাধ্যমে CSS দ্রুত এবং দক্ষভাবে লেখা যায়। আমরা নতুন class তৈরি করতে পারি এবং দৃশ্যমানভাবে class এ CSS properties যুক্ত করতে পারি। এই প্রক্রিয়াটি Webflow তে খুব দ্রুত হয়, এবং আমরা Client-First এ এটির সুবিধা গ্রহণ করি।

CSS ফাইলের আকার সংরক্ষণ করা খুব উল্লেখযোগ্য কোন বিষয় নয় ...

আমরা যখন কোন প্রজেক্টে global class ব্যবহার করি, তখন আমরা আমাদের CSS ফাইলের আকার হ্রাস করতে পারি। তাই বলে আমরা বিশ্বাস করি না যে, এই ছোট CSS saving গুলো Webflow এর অভ্যন্তরে custom class তৈরির সুবিধাগুলিকে ছাড়িয়ে যায়।

deep stacking সম্পর্কে পরে আরও জানুন:

Class নামকরণের নিয়ম ২ -এ এই পয়েন্টগুলির প্রতিটির একটি সম্পূর্ণ ব্যাখ্যা রয়েছে।

custom class এর ব্যবহার

Custom class গুলি Client-First এর মধ্যে একটি শক্তিশালী এবং প্রস্তাবিত পদ্ধতি।

আমরা এই উদ্দেশ্যেগুলোর জন্য custom class ব্যবহার করিঃ

1. নির্দিষ্ট element গুলোর জন্য সহজ সম্পাদনা। আমরা আমাদের প্রজেক্টের নির্দিষ্ট element এবং component গুলিতে দ্রুত অনন্য পরিবর্তন করতে পারি, যদি আমরা সংগঠিত custom class সিস্টেম ব্যবহার করি।
2. আমাদের প্রজেক্টের সর্বত্র utility class এর ব্যবহার এড়ানোর জন্য। Utility class সিস্টেমগুলি শক্তিশালী, তবে পুরো প্রজেক্ট তৈরি করতে ব্যবহার করা উচিত নয়। যখন Webflow Developer হিসেবে utility class ব্যবহার করা আমাদের কাজকে আরও জটিল করে তোলে, তখন আমরা custom class তৈরি করতে উৎসাহিত করি। একটি utility class ব্যবহার করার একটি স্পষ্ট সুবিধা থাকা উচিত।
3. Deep stacking এড়ানোর জন্য। Deep stacking একটি custom class দিয়ে প্রতিস্থাপন করা যেতে পারে।

Background গঠনবিন্যাস সম্পর্কিত উদাহরণ

উদাহরণস্বরূপ, আমরা একটি component এর background গঠনবিন্যাস style করতে চাই।

আমরা তিনটি stacked class দিয়ে আমাদের background গঠনবিন্যাস style করতে পারি। উদাহরণস্বরূপ,  background-absolute + fit-size + opacity-low । এই তিনটি class একত্রিত হয়ে আমাদের প্রয়োজনীয় style এর সংমিশ্রণ দেয়।

এই background গঠনবিন্যাস এর জন্য একাধিক class stack করার পরিবর্তে, আমরা  services-item_background-texture নামে একটি custom class তৈরি করতে পারি। class টি স্পষ্টভাবে বলে যে, এই class টি "একটি texture বা গঠনবিন্যাস এর জন্য যা কোন services item এর background image এ রয়েছে" ।

আমরা এখন stacked class গুলি পুনরায় সংগঠিত করার পরিবর্তে দ্রুত এবং আরও অবাধে এই custom class এ সম্পাদনা করতে পারি। যদি আমাদের একটি অনন্য styling এর প্রয়োজন হয়, তবে আমাদের কাছে সেই অনন্য styling টি গ্রহণ করার জন্য একটি custom class প্রস্তুত রয়েছে।

Traditional CSS development

Traditional CSS development এ, stacked class সমাধান একটি উত্তম সমাধান হতে পারে। stacked class গুলিতে হাতে লেখার জন্য কম CSS এর প্রয়োজন হবে, যা আরো দ্রুততম development এর দিকে পরিচালিত করবে।

যাইহোক, এটি Traditional CSS development নয়। এটি Webflow আর Client-First হল Webflow -র জন্য বিশেষভাবে তৈরি নীতিগুলির একটি সংগ্রহ।

Webflow তে, আমরা বিশ্বাস করি যে, deep stacked class এর তালিকা পরিচালনার চেয়ে, কোনও element এর custom class এর styles তৈরি ও পরিচালনা করতে কম সময় এবং কম প্রচেষ্টা লাগে।

Class নামকরণের নিয়ম ২ -এ Custom class তৈরির একটি সম্পূর্ণ ব্যাখ্যা রয়েছে।

নামকরণের নিয়ম

class এর জন্য স্পষ্ট এবং নির্দিষ্ট নাম তৈরি করুন।

একজন Webflow Developer কে, ক্লায়েন্ট কে বা অন্য কেউ class এর নামের উপর ভিত্তি করে class টি কী করছে তা বোঝা উচিত, এমনকি যদি তারা Client-First সম্পর্কে আগে কখন না শুনেও থাকে।

নামকরণের মানসিকতা

Client-First নামকরণ নিয়মের লক্ষ্য

• আমাদের ওয়েবসাইট পরিচালনা করার জন্য একজন non-technical ব্যক্তিকে ক্ষমতায়ন করুন।
• আমাদের class এর নামকরণে স্পষ্ট, তথ্যবহুল এবং বর্ণনামূলক হোন।
• পাঠককে সেই class এর উদ্দেশ্য সম্পর্কে যতটা সম্ভব প্রেক্ষাপট দিন।
• একটি class এর নাম পড়ুন এবং এর উদ্দেশ্য কী তা জানুন।
• কোনও সংক্ষিপ্তবিবরণ নেই, কোনও shorthand নেই, কোনও বিভ্রান্তি নেই।
• ওয়েবসাইটের সাথে সেই class এর সম্পর্ককে যতটা সম্ভব প্রেক্ষাপট দিন।
• সংগঠনের কৌশলগুলির উপর ভিত্তি করে নাম তৈরি করুন।
• Style panel এর অভ্যন্তরে বিদ্যমান class গুলি অনুসন্ধান করতে keyword গুলি ব্যবহার করুন।
• একটি class এর উদ্দেশ্য তার নামের উপর ভিত্তি করে কল্পনা করুন।

class এর নামকরণের সময় নিজেকে জিজ্ঞাসা করা প্রশ্নগুলি

class এর নাম কে বলতে হবে তারা কী করছে। একটি class এর জন্য একটি নাম তৈরি করার সময়, আমরা এই প্রশ্নগুলি ভাবতে পারি:

• "এই class এ কী করা হচ্ছে এই প্রজেক্টে ?"
• "প্রজেক্টে এই class এর উদ্দেশ্য কী ?"
• "প্রজেক্টে এই class টি কীসের জন্য দায়ী, তা আমি কীভাবে সর্বাধিক প্রেক্ষাপট এ দিতে পারি ?"

একটি class এর নাম কে এই প্রশ্নের উত্তর দিতে হবে।

একজন Webflow Developer কে, ক্লায়েন্ট কে বা বিপণনকারীকে class নামের উপর ভিত্তি করে class টি কী করছে তা বুঝতে সক্ষম হওয়া উচিত, এমনকি যদি তারা Client-First সম্পর্কে আগে কখনো নাও শুনে থাকে।

অর্থবহ নাম এবং Keywords

একটি শক্তিশালী keyword আমাদের এই class/element টি কী করছে তার প্রেক্ষাপট সম্পর্কে ধারণা দেয়। আমাদের নামকরণে যতটা সম্ভব বর্ণনামূলক হওয়া উচিত যা আমাদের সুগঠিত থাকতে সহায়তা করবে।

Keywords এবং স্পষ্ট নামকরণ Client-First এর গভীর মূল ধারণা। প্রতিটি class নামের একটি অর্থবহ উদ্দেশ্য পূরণ করা উচিত। আমাদের উচিত পরবর্তী ব্যক্তি, যিনি প্রজেক্টে প্রবেশ করেন তাকে class এর উদ্দেশ্য সম্পর্কে যতটা সম্ভব পরিচয় করিয়ে দেওয়া।

class এর নামের মধ্যে Keyword গুলি সাধারণ থেকে নির্দিষ্ট হয়

উদাহরণ হিসাবে text-size-large দেখা যাক।

এই class এর নামের মধ্যে সবচেয়ে সাধারণ keyword হল text । এই শব্দটি আমাদের বলে যে class টি একটি text element এর সাথে সম্পর্কিত।

size আমাদের বলে যে আমরা text এর আকার কাস্টমাইজেশন করছি। "size" শব্দটি আরও নির্দিষ্ট কারণ, এটি text এর একটি নির্দিষ্ট CSS property  — ^font-size র সাথে সম্পর্কিত।

সবশেষে large আছে, যা আমাদের text size এর মান সম্পর্কে আরও নির্দিষ্ট তথ্য দেয়। এটি একটি বড় text size ।

লক্ষ্য করুন, আমরা class টিকে large-size-text বলছি না। যদিও এটি  text-size-large এর মত সমানভাবে স্পষ্ট হতে পারে, যখন আমরা একটি সাধারণ-থেকে-নির্দিষ্ট class নামকরণের নিয়ম অনুসরণ করি, তখন Client-First এ আমাদের উল্লেখযোগ্য সুবিধা রয়েছে। আমরা আরও বোধশক্তিসম্পন্ন class অনুসন্ধান এবং ফোল্ডারগুলি সুগঠিত করে সাজাতে পারি। এই সম্পর্কে আমরা আরও জানতে পারব পুরো docs/ডকুমেন্টেশন জুড়ে।

উদাহরণ হিসেবে, team-list_headshot-wrapper নামের একটি custom class এর ব্যবহার দেখা যাক।

ফোল্ডারের নামটি  team-list_ , যা আমাদের বলে যে এই element টি team page বা একটি team section এর সাথে সম্পর্কিত এবং এটি একটি list আর "Team list" হল নির্দিষ্ট element গুলির ধারণকারী গ্রুপ এর নাম।

headshot আরও সুনির্দিষ্ট হয়ে উঠছে এবং আমাদের বলছে যে এটি team list এর মধ্যে headshot element এর সাথে সম্পর্কিত।

wrapper টি আরও সুনির্দিষ্ট হয়ে উঠছে এবং আমাদের বলছে যে এটি headshot কে আবদ্ধ করছে ।

class এর নাম team-list_headshot-wrapper পাঠযোগ্য এবং যৌক্তিক। এমনকি যদি ব্যবহারকারী এর পিছনের CSS বুঝতে নাও পারে। ব্যবহারকারী বুঝতে পারবেন যে এই class টি সম্পাদনা করা team list এর headshot গুলির সাথে সম্পর্কিত। এটি পরবর্তী ব্যক্তির জন্য একটি চমৎকার ইঙ্গিত যিনি প্রজেক্টে প্রবেশ করবেন।

এখন আমাদের headshot wrapper এর ভিতরে আরও elements যুক্ত করার কথা কল্পনা করুন। আমরা একটি সাধারণ থেকে নির্দিষ্ট নামকরণের নিয়ম এর সাথে খুব সংগঠিত থাকতে পারি।

team-list_headshot-wrapper
team-list_headshot-image
team-list_headshot-texture-layer
team-list_headshot-background

team list এর জন্য class এর list টি, আমাদের প্রজেক্টের ভেতরে খুব সুগঠিত এবং যৌক্তিক। এই নামকরণের নিয়ম টি আমাদের Folders feature এ খুব ভালভাবে একীভূত করে।