Prepare CSS interview answers on the cascade, box model, Flexbox, Grid, overflow and responsive layouts with an original card-width debugging exercise. Start with the question, explain the mechanism, and then state an assumption or tradeoff. The scenarios below are original practice examples, not questions supplied by an employer.
How do you explain the cascade?
The cascade determines which applicable declaration wins through rules involving origin, importance, layers and other ordering considerations. Specificity matters within the relevant comparison, but 'the most specific selector always wins' is incomplete. Inspect the computed style and the competing rules in browser tools. Explain the actual reason one declaration wins rather than adding an important flag whenever a style is unexpected.
How does box-sizing affect an element's width?
With the content-box model, a declared width refers to content and padding and borders add to the outer size. With border-box, the declared width includes padding and borders, while margins remain outside. Work through a numerical example before proposing a fix. A layout problem attributed to the parent may actually come from the child's width calculation and additional spacing.
When would you choose Flexbox or Grid?
Flexbox is useful for arranging and distributing items along a primary axis. Grid supports coordinated two-dimensional layouts. Use the relationships in the design to choose, and combine them when appropriate. Avoid presenting the choice as a rule that one technology is for small screens and the other for desktops. Explain alignment, wrapping and sizing requirements for the actual component.
How do you investigate horizontal overflow?
Find the element extending beyond the available width and inspect its content, minimum sizing, padding and positioning. Long unbroken text, a fixed width or a flex item that cannot shrink can cause overflow. Hiding overflow everywhere can conceal content rather than solve the layout. Propose a fix that preserves readability and interaction, and test unusually long content as well as normal examples.
What makes a responsive layout reliable?
Choose breakpoints based on when content stops working well, and test a range of widths and input lengths. Prefer flexible sizing where it fits the design and retain an understandable source order. Visual rearrangement should not create a confusing keyboard or reading sequence. Check zoom, long labels and translated text. A screenshot at one desktop width is not enough to establish that the component responds correctly.
Worked example
Original width exercise: a content-box card has a declared width of 300 pixels, padding of 20 pixels on each side and one-pixel borders. Its outer width is 342 pixels before margins. In a 320-pixel container that can cause overflow. With border-box and the same declared width, padding and borders fit within 300 pixels.
Changing the box model may address that case, but it does not solve every overflow. Add a long unbroken identifier and inspect whether the content can wrap or shrink. Keep the identifier readable or provide an appropriate wrapping strategy rather than simply clipping it.
Practice plan
Calculate the worked example's width, then explain a fix and its effect on content space. Build a two-column card layout and test a narrow viewport, a long heading and keyboard order. Rehearse how you would use computed styles to find a cascade conflict before modifying a selector.
Use Cluegent during preparation to review your own answer: ask for one incorrect assumption and one follow-up question, then respond again without suggestions. Check current plans before choosing a subscription. Follow the employer's rules during the actual interview.
Sources checked
These official references support the guide. Product details and technical documentation can change; check the linked source for current information.
Where Cluegent helps
Cluegent supports permitted live workflows with transcript context, typed prompts, screenshot-aware answers, resume context, custom response behavior, quick action buttons, and a private desktop overlay. It is most useful when you already understand the subject and need help staying structured under pressure.
Frequently asked questions
Does border-box include margins?
No. It includes padding and borders in the declared size, while margins remain outside.
Should I hide all horizontal overflow?
First identify the cause. Hiding it can conceal useful content or controls rather than make the layout work.