What are the two principles of OOCSS?

WHAT THIS TESTS This probes whether you think of CSS in terms of reusable, composable objects rather than one-off page styles. OOCSS is foundational thinking behind later methodologies, so it reveals architectural maturity even at a junior level.

A GOOD ANSWER COVERS The two core principles are separate structure from skin, and separate container from content. Structure means the invisible layout scaffolding: dimensions, padding, margins, overflow, positioning. Skin means the visual paint: colors, backgrounds, borders, gradients, shadows, typography accents. Keeping them in distinct classes lets you apply one skin to many structures or restyle a component by swapping its skin class. The second principle, container from content, means a component should look the same regardless of its parent; styles attach to the object's own class, not to where it happens to live, so a button or media object is portable anywhere.

COMMON WRONG ANSWERS Defining a single class that mixes layout and color, forcing duplication when you need the same look in a new layout. Styling elements based on their location, like styling all headings inside a sidebar, which breaks reuse when the component moves. Confusing OOCSS with BEM; BEM is a naming scheme, OOCSS is a structuring philosophy.

LIKELY FOLLOW-UPS How does separating container from content reduce specificity problems? How does OOCSS relate to BEM or SMACSS? What are downsides, such as many classes in markup? How does the media object pattern illustrate OOCSS?

ONE CONCRETE EXAMPLE You define a structural class that sets a card's flex layout and padding, and a separate skin class that sets background, border, and shadow. A success card and a warning card reuse the same structure class while applying different skin classes, so layout logic lives in one place and only the paint differs between variants.