CSS Architecture: Naming & Maintainability

8. Practice Problems

Every problem has a Show Answer button. Try to solve it yourself first, then compare.

1. Write the BEM class names for a "block" component with an "element" and a modifier that makes it stand out, following the pattern used in this lesson's card example.
   এই লেসনের card উদাহরণের প্যাটার্ন অনুসরণ করে একটি "block" কম্পোনেন্টের জন্য BEM ক্লাস নেইম লিখুন, সাথে একটি "element" এবং একটি modifier যা সেটিকে আলাদাভাবে চোখে পড়ার মতো করে তোলে।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: For an "alert" component: block .alert, element .alert__message, modifier .alert--danger. Used together: <div class="alert alert--danger"><p class="alert__message">...</p></div>

   একটি "alert" কম্পোনেন্টের জন্য: block .alert, element .alert__message, modifier .alert--danger। একসাথে ব্যবহার: <div class="alert alert--danger"><p class="alert__message">...</p></div>

2. Rewrite the selector #main .sidebar ul li a.link as a single, flat BEM-style class selector.
   #main .sidebar ul li a.link সিলেক্টরটিকে একটি একক, ফ্ল্যাট BEM-স্টাইলের ক্লাস সিলেক্টর হিসেবে পুনরায় লিখুন।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: .sidebar__link — a single class on the anchor itself, applied directly in the HTML: <a class="sidebar__link">. No need to describe the entire ancestor chain.

   .sidebar__link — অ্যাংকরে সরাসরি একটি ক্লাস বসানো হয়েছে HTML-এ: <a class="sidebar__link">। পুরো ancestor চেইন বর্ণনা করার দরকার নেই।

3. Build a runnable HTML + CSS "button" block with two modifiers: .btn--primary and .btn--outline, matching the naming style from this lesson.
   এই লেসনের নেমিং স্টাইল অনুসরণ করে একটি চালু-করার-যোগ্য HTML + CSS "button" block বানান, যাতে দুটি modifier থাকবে: .btn--primary ও .btn--outline।
   ✨ Show Answer (উত্তর দেখুন)

   ans3.html

   <button class="btn btn--primary">Save</button>
   <button class="btn btn--outline">Cancel</button>

   style.css

   .btn {
     padding: 0.6rem 1.2rem;
     border-radius: 6px;
     font-weight: 600;
     border: 1px solid transparent;
     cursor: pointer;
   }
   .btn--primary { background: #39b549; color: white; }
   .btn--outline { background: white; border-color: #39b549; color: #1f6e2a; }

   Run Copy
4. Explain, in your own words, why #header nav ul li a is considered "overly specific" and what problem it causes later.
   নিজের ভাষায় ব্যাখ্যা করুন, কেন #header nav ul li a-কে "অতিরিক্ত নির্দিষ্ট" ধরা হয় এবং এটি পরবর্তীতে কী সমস্যা তৈরি করে।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: It mixes an ID, three element tags, and a class into one very high-specificity selector. It only works if that exact HTML nesting never changes, and any future rule that needs to override it must be written even more specifically (or use !important), starting a specificity war.

   এটি একটি ID, তিনটি এলিমেন্ট ট্যাগ এবং একটি ক্লাসকে একসাথে মিশিয়ে খুব উচ্চ specificity-র একটি সিলেক্টর বানায়। এটি তখনই কাজ করে যখন এই ঠিক HTML nesting কখনো না বদলায়, আর ভবিষ্যতে এটিকে override করার প্রয়োজন হলে আরও নির্দিষ্ট সিলেক্টর (বা !important) লিখতে হয় — যা একটি specificity war শুরু করে।

5. List, in the correct order, the sections of a well-organized single stylesheet, as described in this lesson.
   এই লেসনে বর্ণিত একটি সুশৃঙ্খল একক stylesheet-এর সেকশনগুলো সঠিক ক্রমে তালিকা করুন।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: 1) Reset/base styles, 2) CSS variables, 3) Layout helpers, 4) Components, 5) Page-specific overrides, 6) Media queries.

   ১) Reset/base স্টাইল, ২) CSS ভ্যারিয়েবল, ৩) লেআউট হেল্পার, ৪) কম্পোনেন্ট, ৫) পেজ-নির্দিষ্ট override, ৬) মিডিয়া কোয়েরি।

6. Write two utility classes, .mt-1 and .text-center, that could be reused across an entire site.
   দুটি utility class লিখুন, .mt-1 এবং .text-center, যা পুরো সাইট জুড়ে পুনর্ব্যবহার করা যাবে।
   ✨ Show Answer (উত্তর দেখুন)

   ans6.html

   <p class="mt-1 text-center">Centered paragraph with small top margin.</p>

   style.css

   .mt-1 { margin-top: 0.5rem; }
   .text-center { text-align: center; }

   Run Copy
7. Explain why a component class like .card should never be named after its location on the page, such as .homepage-box.
   ব্যাখ্যা করুন কেন .card-এর মতো একটি কম্পোনেন্ট ক্লাসের নাম কখনো পেজের অবস্থান অনুযায়ী দেওয়া উচিত নয়, যেমন .homepage-box।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: Location-based names make a component impossible to reuse elsewhere without confusion — using .homepage-box on a profile page reads as wrong even if it's visually correct. Naming after what the component is (.card) keeps it portable to any page.

   অবস্থান-ভিত্তিক নাম একটি কম্পোনেন্টকে অন্য কোথাও বিভ্রান্তি ছাড়া পুনর্ব্যবহার করা অসম্ভব করে তোলে — একটি প্রোফাইল পেজে .homepage-box ব্যবহার করলে তা দৃষ্টিগতভাবে ঠিক থাকলেও পড়তে ভুল মনে হয়। কম্পোনেন্টটি কী তার ভিত্তিতে নাম দিলে (.card) সেটি যেকোনো পেজে বহনযোগ্য থাকে।

8. Given a "modal" block with a close button element and an "open" state modifier, write all three BEM class names.
   একটি "modal" block, একটি close বাটন element, এবং একটি "open" অবস্থার modifier দেওয়া থাকলে — তিনটি BEM ক্লাস নেইম লিখুন।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: .modal (block), .modal__close (element), .modal--open (modifier). Combined in HTML: <div class="modal modal--open"><button class="modal__close">×</button></div>

   .modal (block), .modal__close (element), .modal--open (modifier)। HTML-এ একসাথে: <div class="modal modal--open"><button class="modal__close">×</button></div>

9. A teammate wrote div.container > div.row > div.col > p { color: red; }. Identify what's wrong architecturally and suggest a BEM-friendly fix.
   একজন সহকর্মী div.container > div.row > div.col > p { color: red; } লিখেছে। এখানে আর্কিটেকচারগতভাবে কী ভুল, এবং BEM-বান্ধব একটি সমাধান বলুন।
   ✨ Show Answer (উত্তর দেখুন)

   Answer: It targets a specific nesting path instead of a reusable class, so it breaks if the HTML structure changes and cannot be reused elsewhere. Fix: add a direct class to the paragraph, e.g. .col__warning { color: red; }, and apply it in the HTML.

   এটি পুনর্ব্যবহারযোগ্য ক্লাসের বদলে একটি নির্দিষ্ট nesting পথকে টার্গেট করে, তাই HTML গঠন বদলালে এটি ভেঙে যায় এবং অন্য কোথাও পুনর্ব্যবহার করা যায় না। সমাধান: প্যারাগ্রাফে সরাসরি একটি ক্লাস যোগ করুন, যেমন .col__warning { color: red; }, এবং HTML-এ সেটি প্রয়োগ করুন।

10. Explain when it makes sense to split one CSS file into several files, and give one concrete signal from this lesson.
    কখন একটি CSS ফাইলকে একাধিক ফাইলে ভাগ করা যুক্তিসঙ্গত, তা ব্যাখ্যা করুন এবং এই লেসন থেকে একটি স্পষ্ট সংকেত উল্লেখ করুন।
    ✨ Show Answer (উত্তর দেখুন)

    Answer: Split once a file grows past a few hundred lines with clearly separate concerns, or once multiple developers edit the same file often (causing merge conflicts). A concrete signal: reusable components emerging that deserve their own file, e.g. components.css.

    একটি ফাইল কয়েকশো লাইন ছাড়িয়ে গেলে এবং স্পষ্টভাবে আলাদা অংশে ভাগ হলে, অথবা একাধিক ডেভেলপার একই ফাইল ঘনঘন সম্পাদনা করলে (merge conflict তৈরি হয়) তখন ভাগ করা উচিত। একটি স্পষ্ট সংকেত: পুনর্ব্যবহারযোগ্য কম্পোনেন্ট তৈরি হওয়া, যেগুলোর নিজস্ব ফাইল প্রাপ্য, যেমন components.css।