# dropbox/css-style-guide

**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/dropbox-css-style-guide).**

1,216 stars · 83 forks · NOASSERTION

## Links

- GitHub: https://github.com/dropbox/css-style-guide
- awesome-repositories: https://awesome-repositories.com/repository/dropbox-css-style-guide.md

## Description

This project provides a comprehensive framework for standardizing CSS architecture and development practices in large-scale web applications. It establishes a structured approach to managing design patterns, ensuring that stylesheets remain maintainable, scalable, and consistent across complex codebases.

The methodology centers on the use of block-element-modifier naming conventions to organize user interface components into independent, reusable units. By enforcing flat selector specificity and namespace-based scoping, the framework prevents naming collisions and unintended style overrides. It further promotes predictability through standardized property ordering and a modular file architecture that isolates design logic into single-responsibility components.

These standards address common challenges in frontend maintenance by defining clear rules for organizing stylesheets and managing style cascades. The documentation provides a set of best practices for structuring CSS to ensure long-term consistency and reduce complexity for development teams.

## Tags

### Software Engineering & Architecture

- [CSS Style Enforcement](https://awesome-repositories.com/f/software-engineering-architecture/coding-convention-specifications/css-style-enforcement.md) — Standardizes CSS architecture through consistent naming, file organization, and property ordering. ([source](https://github.com/dropbox/css-style-guide#readme))
- [CSS Architecture Patterns](https://awesome-repositories.com/f/software-engineering-architecture/css-architecture-patterns.md) — Provides a structured methodology for organizing large-scale CSS codebases using modular file architectures and naming conventions.
- [Block-Element-Modifier Standards](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/coding-standards/naming-conventions/component-naming/block-element-modifier-standards.md) — Provides a structured naming convention for CSS components using blocks, elements, and modifiers to ensure style isolation.
- [Scalable Architecture Guides](https://awesome-repositories.com/f/software-engineering-architecture/scalable-architecture-guides.md) — Provides organizational strategies for maintaining scalable CSS architectures in large projects.
- [Frontend Architecture Best Practices](https://awesome-repositories.com/f/software-engineering-architecture/coding-best-practices/engineering-best-practices/frontend-architecture-best-practices.md) — Establishes best practices for component-level design and scope management to ensure consistency in large-scale web applications.
- [BEM](https://awesome-repositories.com/f/software-engineering-architecture/development-methodologies/engineering-best-practices/code-craftsmanship-standards/coding-standards/naming-conventions/bem.md) — Uses the BEM naming convention to organize UI components into independent and reusable units.
- [Modular Stylesheet Architectures](https://awesome-repositories.com/f/software-engineering-architecture/modular-stylesheet-architectures.md) — Organizes stylesheets into modular, single-responsibility files to simplify navigation and maintenance.

### Development Tools & Productivity

- [Large-Scale Style Maintenance](https://awesome-repositories.com/f/development-tools-productivity/large-scale-codebase-analysis/large-scale-style-maintenance.md) — Maintains frontend style consistency through strict rules on property ordering and selector specificity.

### User Interface & Experience

- [Selector Specificity Restrictions](https://awesome-repositories.com/f/user-interface-experience/css-selectors/selector-specificity-restrictions.md) — Limits selector specificity by restricting ID usage and deep nesting to prevent unintended style overrides.
- [Modular Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/co-located-style-imports/modular-styling.md) — Organizes CSS into reusable blocks, elements, and modifiers to build predictable interfaces.
- [Scoped Styles](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/scoped-styles.md) — Uses namespace-based scoping to categorize style rules and prevent side effects across large codebases.

### Web Development

- [Property Declaration Ordering](https://awesome-repositories.com/f/web-development/css-property-management/property-declaration-ordering.md) — Defines a standardized sequence for CSS property declarations to improve code readability and maintainability.
- [Modern CSS Best Practices](https://awesome-repositories.com/f/web-development/modern-css-best-practices.md) — Defines best practices for writing and organizing stylesheets to ensure consistency across development teams.
- [BEM-Based Naming](https://awesome-repositories.com/f/web-development/syntax-conventions/bem-based-naming.md) — Implements BEM naming conventions to create predictable and collision-resistant UI component styles. ([source](https://github.com/dropbox/css-style-guide/blob/master/README.md))

### Part of an Awesome List

- [Web Development Guides](https://awesome-repositories.com/f/awesome-lists/devtools/web-development-guides.md) — CSS architecture and styling standards from Dropbox.