সিএসএস নির্বাচকদের জন্য কমা কি?

কেন একটি সহজ কমা কোডিং সহজতর

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

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

হ্যাঁ, CSS ফাইলগুলি লম্বা হতে পারে। এটি সাইটের পারফরম্যান্স এবং ডাউনলোড গতি আসে যখন এটি একটি বড় সমস্যা নয়, এমনকি একটি দীর্ঘ CSS ফাইলটি খুব ছোট হতে পারে সম্ভবত, (এটি সত্যিই একটি টেক্সট নথি হয়) থেকে সম্ভবত। তবুও, পৃষ্ঠের গতিতে আসে যখন প্রতিটি সামান্য বিন্দু, তাই আপনি যদি আপনার স্টাইল শীট leaner করতে পারেন, এটি একটি ভাল ধারণা। এই যেখানে "কমা" আপনার শৈলী শীট খুব সহজে আসতে পারে!

Commas এবং CSS

আপনি বিস্মিত হতে পারে যে সিমাস নির্বাচক সিনট্যাক্সে কমা কী ভূমিকা পালন করে। বাক্য হিসাবে, কমা স্বচ্ছতা-কোড না-বিভাজকগুলিকে নয়। সিএসএস সিলেক্টরে কমা একই স্টাইলের মধ্যে একাধিক নির্বাচককে আলাদা করে।

উদাহরণস্বরূপ, কিছু CSS নীচে দেখুন।

th {color: red; }
td {color: red; }
p.red {color: red; }
div # firstred {color: red; }

এই সিনট্যাক্স দিয়ে, আপনি বলছেন যে আপনি ট্যাগ, টিডি ট্যাগ, ক্লাস লাল এর সাথে অনুচ্ছেদের ট্যাগ চান এবং আইডি দিয়ে ডিভি ট্যাগকে প্রথমে স্টাইলের রঙের লাল রাখার জন্য প্রথমেই বেছে নিন।

এই পুরোপুরি গ্রহণযোগ্য সিএসএস, কিন্তু এটি এই ভাবে লেখা দুটি উল্লেখযোগ্য অপূর্ণতা আছে:

• ভবিষ্যতে, আপনি যদি নীল রঙের এই বৈশিষ্ট্যগুলির ফন্টের রঙ পরিবর্তন করার সিদ্ধান্ত নেন, তাহলে আপনার স্টাইল শীট চারবার এই পরিবর্তনটি করতে হবে।
• এটি আপনার স্টাইল শীট অতিরিক্ত অতিরিক্ত অক্ষর যোগ করে যা আপনার প্রয়োজন নেই। এই 4 শৈলী overkill মত মনে নাও হতে পারে, কিন্তু যদি আপনি আপনার সমগ্র শৈলী শীট জুটি এই কাজ চালিয়ে যান, লাইন আপ যোগ করা হবে এবং যে শীট অনেক হবে, এটা প্রয়োজন তুলনায় অনেক বড়।

এই দুর্ঘটনাগুলি এড়াতে এবং আপনার CSS ফাইলকে স্ট্রিমলাইন করতে, আমরা কমা ব্যবহার করার চেষ্টা করব।

নির্বাচনকারীদের পৃথক করার জন্য কমা ব্যবহার করছেন

পরিবর্তে 4 পৃথক CSS নির্বাচক এবং 4 নিয়ম লেখার পরিবর্তে, আপনি একটি কমা দ্বারা পৃথক নির্বাচক আলাদা করে এই সমস্ত শৈলী এক নিয়ম সম্পত্তি মধ্যে একত্রিত করতে পারেন। এখানে কিভাবে তা করা হবে:

তম, টিডি, পি .ড, div # ফার্স্টেড {রঙ: লাল; }

কমা অক্ষর মূলত নির্বাচক ভিতরে "এবং" শব্দ হিসাবে কাজ করে। তাই এটি t এইচ ট্যাগ এবং td ট্যাগ এবং অনুচ্ছেদ ট্যাগের সাথে প্রযোজ্য হয় ক্লাসের লাল এবং আইডি দিয়ে div ট্যাগ প্রথমত। এটা ঠিক আগে আমরা ছিল, কিন্তু পরিবর্তে 4 সিএসএস নিয়ম প্রয়োজন, আমরা একাধিক নির্বাচক সঙ্গে একটি নিয়ম আছে এই কমা নির্বাচক মধ্যে কি হয়, এটি আমাদের একাধিক নির্বাচক নির্বাচন করতে পারবেন।

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

সিনট্যাক্স ভেরিয়েশন

কিছু লোক সিলেজকে নিজের পছন্দ অনুযায়ী প্রতিটি নির্বাচককে নিজের লাইন দিয়ে পৃথক করে তুলতে পছন্দ করে। এটি কিভাবে করা হবে তা হল:

ম,
TD,
p.red,
DIV আছে # firstred
{
লাল রং;
}

লক্ষ্য করুন যে আপনি প্রতিটি নির্বাচক পর একটি কমা স্থাপন এবং তারপর "নির্বাণ" ব্যবহার করে তার নিজস্ব লাইন সম্মুখের পরবর্তী নির্বাচক বিরতি। আপনি চূড়ান্ত নির্বাচক পরে একটি কমা যোগ করবেন না।

আপনার নির্বাচকমণ্ডলীর মধ্যে কমা ব্যবহার করে, আপনি ভবিষ্যতে আরও সহজে আপডেট করতে আরও কমপ্যাক্ট স্টাইলশীট তৈরি করবেন এবং এটি আজকে পড়া সহজ!

জনিফার ক্রাইনিনের মূল রচনা 5/8/17 এ জেরেমি গিরিড দ্বারা সম্পাদিত