Clean and Scalable CSS Architecture (2023)

Explore applying object oriented principles to css for a cleaner, scalable architecture. Learn solid principles, dry, immutability, and separation of concerns with simple examples.

Explore how CSS specificity decides which rule applies by weighing ID, class, and type selectors, and visualize spikes in a specificity graph.

Explore the single responsibility principle in CSS architecture, showing how a class should have one reason to change, with modular, reusable button styles built from base, color, and size classes.

Apply the open-closed principle to css by keeping the base class simple and avoiding changes that affect many elements; use sass extend and mixes to extend without modifying the base.

Explore the Liskov substitution principle from SOLID, showing how base and subclass classes should behave identically and be swappable in CSS without breaking layout.

Apply the interface segregation principle by splitting base CSS classes into smaller, focused ones like movable and flyable. Adopt the single responsibility principle to keep base classes small and refactor-friendly.

Apply the dependency inversion principle to CSS by making modules depend on abstractions. Reduce coupling, ensure independence, and avoid descendent selectors that tie parent and child.

Explore decoupling CSS from HTML to improve reusability and maintainability by reducing specificity, avoiding deeply nested selectors, and applying loosely coupled classes to any element.

Apply the dry principle to prevent repeating CSS properties by grouping shared information, ensuring every discrete piece exists only once, for easier maintenance and a scalable stylesheet.

Explore immutability in CSS, showing how mutations from cascading styles cause unpredictable outcomes, and how applying single responsibility and controlled use of !important helps create predictable, decoupled styles.

Embrace separation of concerns by decoupling HTML, CSS, and JavaScript, using classes for styling and IDs for scripting to keep code maintainable and safe to modify.

Discover how to keep specificity low and apply object-oriented principles, solid principles, dry, immutability, and separation of concerns to CSS, with upcoming sections showing how popular methodologies implement these ideas.

Discover the core of object oriented CSS (OOCSS) by breaking down layouts into reusable CSS objects that embody the single responsibility principle, then apply them across pages.

Identify patterns and objects to reduce repetition by using a simple reusable 'media' object, an image on the left with content on the right, adaptable to icons, avatars, or videos.

Explore oocss concepts by separating structure from skin and container from content, use reusable structure and skin classes, and apply the single responsibility principle to decouple css from html.

Explore oocss standards to build reusable, scalable css by decoupling css from html, using classes instead of ids, and embracing separation of structure from skin and container from content.

Explore the bem methodology, including block, element, and modifier naming, to build reusable components with clear scope and scalable css architecture for front-end teams.

Discover how BEM provides a contextual, reusable CSS structure by composing blocks, elements, and modifiers with unique class names, ensuring readable, conflict-free styles.

Compare bem and oocss to explain why flat specificity matters, with a 0-1-0 graph and no nested selectors, and see how card__image stays in the card block to prevent overrides.

Explore the parallels between bem and oocss, learn to design reusable css modules or blocks, apply naming conventions, and keep a flat, dry, low-specificity architecture for scalable css.

Identify patterns and objects in your css by balancing blocks, elements, and modifiers to avoid overmodulizing, reuse blocks like cart and image, and keep components meaningful.

Explore the trade-offs between overmodulized code, BEM, OOCSS, and atomic CSS, weighing readability, context, and performance while comparing utility classes to traditional CSS architecture.

Explore ITCSS, or inverted triangle architecture, a structured, scalable CSS method not a library or framework but compatible with OOCSS and BEM, with or without a preprocessor, to manage specificity.

Learn to organize CSS with ITCSS, moving from generic to elements/base, object, components, and utilities in specificity order to prevent spiky graphs.

Explore the inverted triangle approach to clean, scalable CSS, focusing on increasing specificity, explicitness, and shrinking reach across a single stylesheet from line 1 to 5000, to prevent specificity wars.

Explore ITCSS folder structure and naming conventions, where main.scss imports all layer partials like _objects.media.scss, and class names use a layer prefix with hyphen and element naming for consistency.

Explore ITCSS flexibility and naming options like BEMIT to fit your stack, start with low-specificity generic selectors, then progressively add styles, and reduce stylesheet size for performance.