Description
An AI agent will hand you CSS that looks pixel-perfect in your browser and is quietly broken everywhere else: a card sized with a magic 340px that breaks the moment the text is longer, a fixed height that clips the content the day a note runs two lines, a dropdown buried under the header because the z-index escalated into a war nobody planned, an !important stacked on an !important to win a specificity fight, a layout that is flawless at 1440 pixels and unusable on a phone, gray-on-white body text that reads fine to you and fails a user who needs contrast. The screen at your window size shows the right pixels, so it looks done. CSS renders almost anything, because rendering proves the rule was parsed, not that the layout holds when the content, the viewport, or the font changes underneath it. Copying selector syntax does not help here, you are not the one typing the rules. What you lack is the reviewer’s mental model: what the cascade, the box model, and the layout engine are actually doing, so you can read a diff of agent-written CSS and know whether to ship it or send it back.
This book trains you to be the reviewer of vibe-coded CSS, not to memorize properties. It starts from a different premise than every other CSS book: the agent writes the styles, and your edge is understanding what that CSS really does so you can review it with judgment no linter has. You will learn how the cascade decides which rule wins and why specificity fights end in !important, what the box model counts as width and why padding surprises you, how normal flow, flexbox, and grid each place a box and where the agent reaches for the wrong one, what positioning and stacking contexts do to a menu that vanishes behind the header, why a fixed pixel breaks at the next screen size while relative units bend, how a layout that looks right at one viewport collapses at another, why a font that has not loaded shifts the whole page, and what makes color readable rather than merely present. You will learn all of it the way a reviewer needs it: by reading real stylesheets the agent would generate for one running interface, a dashboard called Kanso, and deciding what is good, what is plausible-but-fragile, and what to push back on. The progression moves from judging a single rule, to judging a component like the card or the toolbar, to judging how a whole responsive layout behaves under long content, small screens, and users who do not see the way you do. There is almost no syntax drill here, and a great deal about how CSS actually behaves, where it breaks, and the specific ways an agent’s styling goes quietly wrong. For engineers who are going to vibe-code their CSS either way and want to be the one who catches what the model missed.
Is this book for you?
This book is for: engineers who have decided to let an AI agent write their CSS (vibe-coding) and now own the part the agent cannot, which is judging whether the styling is correct, sturdy, responsive, and accessible at every screen a real user brings, and who refuse to spend months grinding selector rules and flexbox tutorials to get there.
What’s in this book
- Chapter 1: The day I stopped writing CSS and started reviewing it
- Chapter 2: Why the box is wider than the number you gave it
- Chapter 3: Why your two boxes won’t sit side by side
- Chapter 4: The row that looks perfect until one item gets long
- Chapter 5: How to build a real layout without a pile of nested divs
- Chapter 6: The menu that hides behind everything else
- Chapter 7: The magic 340 pixels that break on the next screen
- Chapter 8: It looks right on my laptop and collapses on a phone
- Chapter 9: Why the text is technically there but nobody can read it
- Chapter 10: The gray text that passes review and fails a real user
- Chapter 11: The animation that looks smooth and drops every frame
- Chapter 12: One color changed and forty files needed editing
- Chapter 13: The stylesheet nobody can touch without breaking something
- Chapter 14: Do I still need Sass now that CSS grew up?
