Episode 1 — Fundamentals / 1.10 — CSS Architecture and Project Structure
1.10 — Exercise Questions: CSS Architecture & Project Structure
Practice questions for all five subtopics in Section 1.10. Mix of naming drills, architecture design, and DevTools challenges. Try each without reopening the lesson files first.
How to use this material (instructions)
- Read lessons in order —
README.md, then1.10.a→1.10.ein sequence. - Answer closed-book first — write an answer (bullets or short paragraphs), then compare to the matching lesson.
- Hands-on DevTools — use the Elements panel, Computed styles, and Layout inspectors where indicated.
- Redo misses — retry the next day; mark weak subtopics.
- Interview prep — pair with
1.10-Interview-Questions.md.
1.10.a — BEM Naming Convention (Q1–Q10)
Q1. What does BEM stand for, and what problem does it solve?
Q2. Write the BEM class names for a search form with: the form itself, an input field, a submit button, and a "compact" modifier on the form. (Hint: 4 classes minimum.)
Q3. Your teammate wrote .card__body__title. Why is this wrong in BEM? What should it be?
Q4. True or false: a BEM modifier class should be applied without the base class. Explain.
Q5. Convert this nested CSS into flat BEM selectors:
.nav ul li a.active { color: red; }
Q6. Write SASS using & that compiles to: .alert, .alert--error, .alert__icon, .alert__message.
Q7. Name three problems that arise when a team uses no naming convention (just random class names).
Q8. Briefly describe OOCSS and how it differs from BEM.
Q9. Briefly describe ITCSS and explain what the "inverted triangle" refers to.
Q10. You need a navigation bar component with these parts: the bar, a logo area, a menu list, menu items, links, and an "active" state on a link. Write all BEM class names.
(Hint: .nav, .nav__logo, .nav__menu, .nav__item, .nav__link, .nav__link--active)
1.10.b — Component-Based CSS (Q11–Q20)
Q11. Define "component" in the context of CSS architecture in one sentence.
Q12. What are the three layers of a component's public API? Give an example of each for a .modal component.
Q13. Explain the single responsibility principle for CSS components. Give an example of a violation and how to fix it.
Q14. Why should a .card component not set width: 33% or margin-bottom: 2rem?
Q15. What is style leakage? Name two CSS patterns that cause it.
Q16. You have a page with a .sidebar and a .card inside it. Someone wrote .sidebar h3 { font-size: 0.9rem; }. Explain the leakage risk and suggest a BEM fix.
Q17. Compare CSS Modules and BEM as scoping strategies. Give one advantage of each.
Q18. What does <style scoped> do in Vue, and how does the browser enforce the scoping?
Q19. You are composing a pricing page. List four independent components you might use and how they nest together.
Q20. Why is component documentation (a style guide) useful even for small teams?
1.10.c — Utility vs Component Classes (Q21–Q32)
Q21. Define "utility class" and give four examples.
Q22. Write the HTML for a blue button using (a) component classes and (b) utility classes.
Q23. List three things utility classes can do that inline style attributes cannot.
Q24. A teammate argues "Tailwind is just inline styles." Give a counter-argument with at least two concrete points.
Q25. Name two scenarios where utility-first CSS wins over component classes.
Q26. Name two scenarios where component classes win over utility-first CSS.
Q27. What does @apply do in Tailwind CSS? When should you use it, and when should you avoid it?
Q28. Explain the hybrid approach to CSS architecture. What goes in component classes vs utility classes?
Q29. Compare Tailwind CSS, Bootstrap, and Tachyons in terms of philosophy (one sentence each).
Q30. How does Tailwind keep the CSS bundle small despite having thousands of utility classes?
(Hint: PurgeCSS / content scanning in the config.)
Q31. A design system team is building a button component that will be consumed by 20 different apps. Should they use utility classes or a component class for the button's public API? Justify your answer.
Q32. Convert these utility classes into a single component class — what declarations would the class contain?
<div class="flex items-center gap-4 p-4 bg-white rounded-lg shadow-md">
1.10.d — Real-World Folder Structure (Q33–Q42)
Q33. List the seven folders in the 7-1 SASS pattern and describe the purpose of each in one sentence.
Q34. Why should abstracts/ (variables, mixins) be imported before all other folders in the main entry file?
Q35. What does the underscore prefix (_button.scss) signify in SASS?
Q36. A project has 30+ components. Would you use a flat or nested folder structure? Why?
Q37. Draw a simple folder tree for a small marketing site (< 5 pages) using plain CSS (no SASS).
Q38. Explain why import order matters in a CSS project. What breaks if you import components before base resets?
Q39. How does CSS Modules change where component styles live compared to the 7-1 pattern?
Q40. In a Tailwind CSS project, which of the 7-1 folders are typically unnecessary? What replaces them?
Q41. What is a main.scss (or index.scss) entry file, and why is having a single entry point valuable?
Q42. Your team is starting a new Next.js project with React. Propose a CSS file organisation strategy and justify it (CSS Modules, Tailwind, styled-components, or another approach).
1.10.e — Debugging with DevTools (Q43–Q52)
Q43. You wrote .card__title { color: blue; } but the title is black. Describe the DevTools steps to find out why.
Q44. What does a struck-through declaration in the Styles panel mean?
Q45. You see a horizontal scrollbar on your page. Describe a CSS one-liner you can apply in DevTools to find the overflow culprit. Why use outline instead of border?
Q46. How do you inspect :hover styles without keeping your mouse on the element?
Q47. What is the Computed panel, and when is it more useful than the Styles panel?
Q48. Hands-on: Open any website → select a flex container → find the flex badge. What information does the flex inspector overlay show?
Q49. Hands-on: Open DevTools → Rendering → enable Layout Shift Regions. Reload a news site. Where do blue flashes appear and why?
Q50. Describe how you would use the Performance panel to identify an element causing expensive repaints. What colour represents paint operations in the timeline?
Q51. Your z-index: 9999 element is still hidden behind another. Name two possible causes and how you would diagnose each in DevTools.
Q52. A flex item overflows its container despite the container being display: flex. What default property value is likely causing this, and what is the fix?
(Hint: min-width: auto on flex items.)
Answer Hints
| Q | Hint |
|---|---|
| Q2 | .search-form, .search-form__input, .search-form__button, .search-form--compact |
| Q5 | .nav__link, .nav__link--active |
| Q14 | Layout is the parent's job — components should be width-agnostic |
| Q23 | Media queries, pseudo-classes, design-token constraints |
| Q30 | Tailwind scans your source files and removes unused classes at build time |
| Q34 | Variables and mixins must be defined before any file that uses them |
| Q44 | Overridden by a rule with higher specificity or later source order |
| Q45 | * { outline: 1px solid red; } — outline doesn't affect layout |
| Q51 | Missing position value; or parent creates a different stacking context |
| Q52 | min-width: auto → fix with min-width: 0 or overflow: hidden |