A comprehensive style guide for writing maintainable and scalable CSS and Sass code.
The Airbnb CSS/Sass Styleguide is a deprecated but influential set of best practices and conventions for writing clean, consistent, and scalable CSS and Sass. It provides detailed guidelines on formatting, naming, and architecture to improve code maintainability and team collaboration. The guide promotes a pragmatic, team-oriented approach that prioritizes readability and reusability.
Frontend developers and engineering teams working on large-scale web applications who need to establish or follow a shared CSS/Sass coding standard. It is particularly relevant for teams adopting component-based architectures and methodologies like OOCSS and BEM.
Developers choose this guide for its well-documented, battle-tested conventions from Airbnb's engineering practices, which help enforce consistency across teams. Its clear rules on formatting, selector discipline, and Sass usage reduce technical debt and make stylesheets easier to scale and maintain.
A mostly reasonable approach to CSS and Sass.
Open-Awesome is built by the community, for the community. Submit a project, suggest an awesome list, or help improve the catalog on GitHub.
Provides specific rules for indentation, spacing, and selector organization, such as using soft tabs and placing each selector on its own line, ensuring consistent code style across teams.
Encourages component-based thinking with a variant of BEM using PascalCased blocks, which works well with frameworks like React, as demonstrated in the ListingCard example.
Offers practical advice on syntax, variable naming with dashes, and avoiding problematic patterns like @extend, promoting DRY and maintainable code.
Recommends using .js- prefixed classes for behavior hooks, preventing conflicts between styling and functionality, as detailed in the JavaScript hooks section.
The repository is archived with no further updates or support, so it may not reflect current best practices or address newer CSS technologies like CSS Grid or CSS-in-JS.
Focuses heavily on traditional Sass and BEM without covering modern approaches such as utility-first frameworks, CSS Custom Properties, or layout techniques beyond basic formatting.
The strict rules on formatting and naming, like avoiding ID selectors and limiting nesting, might be too rigid for teams that prefer more adaptive or alternative coding styles.