ভূমিকা / পটভূমি: সিএসএস উপাদান
তুলনামূলকভাবে বড় ওয়েবসাইটের জন্য আমরা SASS এর সাথে কাজ করছি এবং উপাদানগুলিতে CSS পরিচালনা করার চেষ্টা করছি। উপাদানগুলির মূল ধারণাটি হ'ল একটি ডিওএমএমে কনটেইনার উপাদানগুলির চেয়ে পৃথক পৃথক যেকোন উপাদান দেখতে পাওয়া উচিত।
সুতরাং, আমরা এই জাতীয় জিনিসগুলি এড়াতে চাই (SASS):
// User picture component.
.user-picture {
img {..}
}
// Override user picture for the frontpage.
body.page-front .user-picture img {..}পরিবর্তে, আমরা যদি চাই যে ব্যবহারকারীর ছবিটি প্রথম পৃষ্ঠায় অন্যরকম দেখায়, তবে এটির একটি আলাদা উপাদান থাকতে হবে। যেমন SASS উত্তরাধিকার সহ, বা একটি মিশ্রণ সহ:
// User picture component.
.user-picture {
img {..}
}
// User picture on frontpage.
.user-picture-front {
@extend .user-picture;
img {..}
}তারপরে আমাদের সম্মুখ পৃষ্ঠায় এইচটিএমএল সমন্বিত করতে হবে, যাতে এটি ব্যবহারকারীর চিত্রের বিভিন্ন সংস্করণ ব্যবহার করে।
এ পর্যন্ত সব ঠিকই. আমি সিএসএস উপাদানগুলি সম্পর্কে আমার বর্তমান বোঝার উদাহরণ হিসাবে উপরের পোস্ট করেছি posted
প্রশ্ন: সংশোধক শ্রেণি - ভাল অনুশীলন?
এখন আমরা একটি সমস্যার মধ্যে চলেছি: কিছু পৃষ্ঠাগুলির একটি গা dark় (কালো) পটভূমি রয়েছে এবং তাই পাঠ্য, সীমানা এবং স্টাফটি সাদা হওয়া দরকার।
এটি কোনওভাবে উপাদানগুলির বাইরে চলে যায়: একই উপাদানটির ডিফল্ট হিসাবে গা dark় পাঠ্য থাকা উচিত, তবে সাদা পাঠ্য যদি এটি অন্ধকার পটভূমির ধারকটির মধ্যে থাকে।
সুতরাং আমরা এই দুর্দান্ত ধারণা আছে:
// Generic modifier class for all dark-background containers.
.white-on-black {
// Generic text color change.
color: white !important;
}
// Component.
.my-component {
border: 1px solid blue;
// Special for white-on-black.
.white-on-black & {
border-color: yellow;
}
}সুতরাং আমাদের কাছে একটি বাহ্যিক "সংশোধক" বা "প্রসঙ্গ" শ্রেণি রয়েছে white-on-blackযা অভ্যন্তরীণ উপাদানগুলি কীভাবে প্রদর্শিত হয় তা সংশোধন করে।
অনুপ্রেরণা হ'ল উপাদানটি নিজেই ডিওএম-তে আরও একটি পাত্রে উপাদানটির পটভূমির জন্য দায়বদ্ধ নয়।
এইটা কাজ করে. অন্ধকার ব্যাকগ্রাউন্ড ধারকটির মধ্যে যদি আমাদের একটি সাদা ব্যাকগ্রাউন্ড ধারক থাকে তবেই কেবল সমস্যা। কিন্তু এটি একপাশে, এটি ঠিক কাজ করে।
উপাদানগুলি একে অপরের থেকে স্বতন্ত্র রাখার চেষ্টা করার পটভূমি সহ, এটি কি আর্কিটেকচারালিভাবে একটি ভাল অনুশীলন কিনা তা প্রশ্ন।
বিকল্পের জন্য আলাদা উপাদান থাকতে হবে, যেমন my-component-on-dark-bg, যা উত্তরাধিকার সূত্রে প্রাপ্ত হয় my-componentএবং পাঠ্য এবং সীমানার জন্য আলাদা রঙ থাকে। তবে এখানে (উদাহরণস্বরূপ পিএইচপি) কোডটি যা উপাদানটি এইচটিএমএল উত্পাদন করে তা বাইরের সম্পর্কে জানতে হবে, একটি গা a় বিজি ব্যবহৃত হয়েছে কিনা। ধরে নিই যে পিএইচপি কোড যা উপাদানকে রেন্ডার করে তা পিএইচপি কোড থেকে পৃথক যা কনটেইনারটি সরবরাহ করে। যা এখনও ম্যানেজযোগ্য, তবে উপরে বর্ণিত হিসাবে এটি কোনও সংশোধক শ্রেণীর সাথে প্যাটার্নের পক্ষে যুক্তি হতে পারে।
মন্তব্য
আমরা আসলে আমাদের প্রকল্পের নির্দিষ্ট উপসর্গ সহ সিএসএসের ক্লাসগুলির উপসর্গ করছি। আমি কেবল সরলতার জন্য এটি এখানে রেখেছি, এবং কারণ এটি কোনটিরই ব্যবসা নয় যে আমি কোন প্রকল্পে কাজ করছি :) :)