The evolution of CSS tooling—from BEM and OOCSS to CSS-in-JS and Tailwind—has largely focused on how to organize complexity. We treat CSS as a bucket to be filled with instructions, resulting in architectures that grow horizontally alongside our component libraries. However, the most resilient systems are not built by managing complexity; they are built by strictly limiting the scope of what the stylesheet is permitted to touch.

The failure of most CSS architectures stems from the assumption that the stylesheet is the source of truth for all visual state. When we allow CSS to dictate layout positioning, element lifecycle, or business logic, we create a brittle coupling between the document structure and the presentation layer. To build a sustainable [[architecture](/blog/modern-chrome-extension-engineering-master-manifest-v3-isolated-contexts-and-zero-crash-architecture)](/blog/built-a-tool-to-turn-cloud-architecture-ideas-into-diagrams), we must first define the ‘negative space’—the responsibilities that CSS should explicitly relinquish to the host application logic or the browser’s native layout engine.

The Fallacy of Global Layout Control

One of the most common anti-patterns in enterprise CSS is the use of absolute positioning or rigid structural overrides defined at the component level. When a component defines its own placement within a parent container, it ceases to be reusable. It becomes a ‘fixed’ dependency, breaking as soon as the design system evolves.

CSS should never be responsible for the ‘where’ of an element. It should only be responsible for the ‘how’—the aesthetics, typography, and spacing properties that are intrinsic to the component itself. By offloading layout responsibility to specialized layout components (such as a ‘Grid’ or ‘Stack’ utility), you isolate the structural concerns from the visual ones.

Decoupling Position from Appearance

Consider the difference between a ‘Card’ component and a ‘List’ layout. A card should know how to render a border, a shadow, and internal padding. It should not know about its margin-top or its display property within a flex container. By stripping away layout properties, you enable the component to be placed anywhere in the application without side effects.

.card {
  /* Good: Intrinsic properties */
  border: 1px solid #ccc;
  padding: 1rem;
  border-radius: 4px;
}

/* Bad: Extrinsic layout properties */
.card {
  margin-top: 20px;
  width: 300px;
}

CSS Should Not Manage Application State

With the rise of pseudo-classes like :checked or :target, it has become tempting to use CSS to drive complex application state. While this is performant, it creates a ‘black box’ where the UI state is hidden from the framework’s reconciliation logic. If your JavaScript cannot query the state of a component because it is locked behind a CSS checkbox hack, you have traded maintainability for a negligible performance gain.

If a developer has to inspect the stylesheet to understand why a UI element is hidden or visible, the architecture has failed.

The Principle of Least Privilege in Styles

Applying the principle of least privilege to CSS means that every component should have the minimum number of style rules required to function. If a rule does not directly contribute to the visual identity of the component, it does not belong there. This includes overrides, ‘quick fixes’, and structural hacks.

• Eliminate ‘margin-bottom’ on child elements; use parent containers to manage spacing.
• Avoid using CSS for business logic; keep display toggles in the application state.
• Strictly separate ‘layout’ utilities from ‘theme’ or ‘component’ styles.
• Favor composition over deep inheritance chains.

Conclusion

The best CSS architecture is one that effectively says ‘no’. By drawing hard lines around what CSS is allowed to do—restricting it to visual presentation rather than structural management—you create a system that is predictable, modular, and resilient to change. Engineering excellence in this domain is not about mastering the latest selector syntax, but about maintaining the discipline to keep the presentation layer thin and focused.