# csswizardry/css-guidelines

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/csswizardry-css-guidelines).**

3,648 stars · 871 forks

## Links

- GitHub: https://github.com/csswizardry/CSS-Guidelines
- awesome-repositories: https://awesome-repositories.com/repository/csswizardry-css-guidelines.md

## Description

CSS Guidelines is a comprehensive style guide and reference for writing maintainable, scalable, and modular CSS in large-scale web projects. It provides a set of professional standards for organizing stylesheets and implementing consistent naming patterns to improve long-term codebase health and reduce technical debt.

The project centers on a strict methodology for scoping classes to create isolated and predictable components, preventing style leakage between independent parts of a user interface. It emphasizes a flat selector hierarchy to avoid specificity conflicts and encourages the separation of structural layout from visual aesthetics. By organizing code into logical directory structures and applying single-responsibility design principles, the guidelines ensure that styles remain easy to update and override as a project grows.

These standards cover the foundational aspects of building reliable design systems, including the management of cascading layers and the implementation of consistent architectural patterns. The documentation serves as a central resource for teams aiming to establish predictable, high-quality styling conventions across complex interfaces.

## Tags

### Development Tools & Productivity

- [BEM Element Scoping](https://awesome-repositories.com/f/development-tools-productivity/markup-element-scoping/bem-element-scoping.md) — Uses BEM naming conventions to bind elements to blocks and prevent style leakage.

### Programming Languages & Runtimes

- [Flat CSS Class Selectors](https://awesome-repositories.com/f/programming-languages-runtimes/class-based-architecture/flat-css-class-selectors.md) — Enforces flat selector hierarchies to prevent specificity wars and simplify style overrides.

### Software Engineering & Architecture

- [BEM](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/coding-standards/naming-conventions/bem.md) — Implements the Block-Element-Modifier methodology to create isolated and predictable CSS components.
- [Single-Purpose CSS Classes](https://awesome-repositories.com/f/software-engineering-architecture/abstract-data-types/type-classes/naming-conventions/css-class/single-purpose-css-classes.md) — Encourages the use of single-purpose utility classes to maximize visual code reuse.
- [Frontend Architecture Best Practices](https://awesome-repositories.com/f/software-engineering-architecture/coding-best-practices/engineering-best-practices/frontend-architecture-best-practices.md) — Establishes professional standards for clean, predictable styles to reduce technical debt.
- [CSS Architecture Patterns](https://awesome-repositories.com/f/software-engineering-architecture/css-architecture-patterns.md) — Organizes stylesheets using consistent patterns to ensure scalability in large codebases.
- [Layout-Design Separation](https://awesome-repositories.com/f/software-engineering-architecture/software-architecture/architectural-patterns/modular-decoupled-design/structural-design-paradigms/separation-of-concerns/layout-design-separation.md) — Decouples structural layout logic from aesthetic skinning to improve design portability.
- [Web Development Standards](https://awesome-repositories.com/f/software-engineering-architecture/web-development-standards.md) — Sets professional guidelines for structuring CSS to ensure consistency across interfaces.

### Web Development

- [CSS Specificity Management](https://awesome-repositories.com/f/web-development/css-specificity-management.md) — Maintains flat selector hierarchies to prevent complex override conflicts during development.
- [Modern CSS Best Practices](https://awesome-repositories.com/f/web-development/modern-css-best-practices.md) — Implements modular styling patterns that allow interfaces to scale without breaking existing layouts.

### Part of an Awesome List

- [CSS Style Guides](https://awesome-repositories.com/f/awesome-lists/devtools/css-style-guides.md) — Provides a comprehensive reference for writing maintainable and modular CSS code.

### User Interface & Experience

- [Design System Foundations](https://awesome-repositories.com/f/user-interface-experience/design-system-foundations.md) — Builds a structured styling base to support the scaling of complex design systems.
- [Specificity Management Strategies](https://awesome-repositories.com/f/user-interface-experience/global-selector-overrides/specificity-management-strategies.md) — Provides strategies for managing specificity transitions from global to local scopes.
- [Stylesheet Maintainability Standards](https://awesome-repositories.com/f/user-interface-experience/stylesheet-maintainability-standards.md) — Provides standardized guidelines for organizing CSS to ensure long-term maintainability. ([source](https://github.com/csswizardry/css-guidelines#readme))
- [Visual-Structural Separations](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/style-encapsulations/visual-structural-separations.md) — Isolates visual style definitions from structural markup to prevent design breakage.
- [Cascade Layer Management](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/cascading-style-sheets/cascade-layer-management.md) — Uses CSS cascade layers to manage style priority and ensure global defaults are correctly overridden.