Detailed explanation
OOCSS, SMACSS, and ITCSS are approaches to organising CSS so that styles remain reusable, predictable, and maintainable as a project grows. Unlike BEM, which primarily provides a component-oriented naming convention, these methodologies emphasise different architectural decisions: separating responsibilities, categorising rules, or ordering stylesheet layers. They are conventions rather than browser features, and they can be combined with BEM. Interviewers usually look for an understanding of the problem each approach solves, not just the expansion of its acronym.
OOCSS, or Object-Oriented CSS, treats recurring visual patterns as reusable objects. Its two central principles are separating structure from skin and separating content from its container. For example, `.btn { padding: 10px 20px; border-radius: 4px; }` defines shared structure, while `.btn-primary { background: blue; color: white; }` supplies a visual treatment. An element uses both classes to combine those responsibilities. Container independence means avoiding rules such as `.sidebar .btn` when the same button should behave consistently elsewhere. This reduces duplication, although excessive abstraction can produce too many small classes with unclear responsibilities.
SMACSS, or Scalable and Modular Architecture for CSS, groups rules into five categories. Base covers element defaults, such as body typography; Layout defines major page regions; Module contains reusable interface pieces; State describes conditions such as expanded or disabled; and Theme supplies alternative visual treatments. A card can therefore be a module while `.is-collapsed` represents its current state. These categories guide where rules belong and how they interact; they do not require a particular framework or a rigid file-per-category setup.
ITCSS, or Inverted Triangle CSS, orders styles from broad-reaching, low-specificity foundations towards narrower, more explicit rules. Its common layers are Settings, Tools, Generic, Elements, Objects, Components, and Utilities. Settings and Tools commonly contain preprocessor variables and mixins that emit no CSS themselves. Later layers progressively style reusable structures and concrete components. This organisation discourages specificity escalation, but does not change the cascade: a later low-specificity selector does not automatically beat an earlier higher-specificity selector. CSS cascade layers can make layer precedence explicit, but are separate from ITCSS.
Key points to remember
- OOCSS separates structure from skin and makes reusable objects independent of their containers.
- SMACSS categorises rules as Base, Layout, Module, State, and Theme.
- ITCSS commonly uses Settings, Tools, Generic, Elements, Objects, Components, and Utilities.
- These methodologies organise CSS; they do not alter browser cascade or specificity rules.
- BEM naming can coexist with OOCSS reuse principles, SMACSS categories, or ITCSS layering.
Common mistakes candidates make
- Treating these approaches as mutually exclusive frameworks or mandatory naming syntaxes.
- Assuming later ITCSS files automatically override earlier rules regardless of specificity.
- Describing OOCSS only as structure-versus-skin separation and ignoring container independence.
Likely follow-up questions
How can BEM and ITCSS be used together?
Use ITCSS to organise the stylesheet architecture and BEM to name classes within components. For example, `.card__title` can live in the Components layer while shared layout objects live in Objects.
How does SMACSS distinguish a module from a state?
A module is a reusable interface unit, such as a navigation menu. A state describes a condition of that unit, such as `.is-open`, and should be scoped appropriately when its styling is module-specific.
Is ITCSS the same as CSS @layer?
No: ITCSS is an architectural convention, whereas `@layer` is a browser-supported cascade mechanism. For normal declarations within the same origin, later layers take precedence over earlier layers before selector specificity is considered; important declarations reverse layer order.
Interview tip: Explain each methodology through one concrete component, then distinguish reuse principles, rule categories, and stylesheet ordering.