Easy concepts in CSS & Design Systems, page 3
Design System Adoption: A Product, Not a Project
Treat your design system like a product with users (your teams), not a one-off project. This is crucial when launching a new system to ensure teams actually use it. The biggest footgun is assuming 'if you build it, they will come.'
CSS Nesting: Grouping Related Styles
CSS nesting groups related styles like folders for files. Instead of repeating parent selectors, you write child rules inside the parent. This is great for component-based styling, but over-nesting creates specificity headaches that are hard to override.
Fix Ragged Text Lines with `text-wrap: balance`
Fix awkward text wrapping in headings. text-wrap: balance tells the browser to make each line roughly the same length, improving readability. Use it for short text blocks like titles, but know it's limited to a few lines due to performance costs.
The `inert` Attribute: Making UI Sections Unreachable
The inert attribute makes a part of the DOM non-interactive and inaccessible. It's like a glass pane over a UI section: you can see it, but can't click, focus, or use a screen reader on it. Use it for off-screen menus or inactive dialogs.
We are hiring for this. Every open role lists the topics its interview covers, so you can prepare for the real thing rather than guessing.
See open roles