airbnb/css
Css
This project is a CSS architecture framework and style guide providing formal coding standards for CSS and Sass. It establishes a structured approach to naming conventions, property organization, and selector management to ensure consistency across large-scale projects.
The framework focuses on decoupling visual styles from JavaScript behavior through specific naming prefixes and utilizes a block element modifier system for component naming. It defines strict guidelines for Sass usage, emphasizing the efficient application of variables and mixins to prevent bloated output and complex dependency chains.
The standards cover the management of style specificity by limiting selector depth and restricting the use of ID selectors. It also defines requirements for stylesheet formatting, including uniform indentation, spacing, and the logical ordering of property declarations.
Features
- CSS Architecture Patterns - Provides a comprehensive architecture for structuring and maintaining large-scale CSS codebases.
- CSS Component Naming - Implements a structured block element modifier system for component naming to ensure consistency across large-scale projects.
- Sass Coding Standards - Provides formal coding standards for Sass usage, including variable casing and syntax to prevent complex dependency chains.
- Naming Conventions - Establishes standardized class naming systems to ensure reusability and decouple styles from behavior.
- Component - Uses structured naming for components to create reusable style classes aligned with HTML markup.
- Behavioral Hook Decoupling - Decouples visual styles from JavaScript behavior using distinct naming prefixes for behavioral hooks.
- Behavior-Style Decoupling - Separates visual presentation from behavioral logic using specific naming prefixes for JavaScript hooks.
- Sass Abstractions - Utilizes Sass mixins and variables to create reusable style abstractions and prevent bloated CSS output.
- Optimization Guidelines - Establishes guidelines for the efficient application of variables and mixins to prevent bloated CSS output.
- Sass Coding Standards - Sets strict guidelines for Sass variables, mixins, and nesting to prevent unpredictable stylesheet bloat.
- BEM-Based Naming - Implements a formal BEM methodology to ensure a clear relationship between HTML markup and CSS styles.
- Code Style and Formatting - Provides strict formatting rules for indentation, line breaks, and spacing to ensure uniform stylesheet structure.
- Structural Organization Guidelines - Provides standards for organizing property declarations and nested selectors to improve maintainability.
- Nesting Depth Limits - Prevents high specificity and restrictive styles by limiting Sass nesting depth and banning ID selectors.
- Stylesheet Maintainability Standards - Defines property organization and formatting rules to maintain a consistent and readable structure across teams.
- Property Declaration Ordering - Organizes CSS declarations by grouping standard properties before mixins and nested selectors for better readability.
- CSS Specificity Management - Controls selector depth and restricts ID usage to manage CSS specificity and prevent style conflicts.
- CSS Style Guides - Airbnb's official style guide for writing clean CSS.
- CSS Styling Libraries - Style guide for consistent CSS development.
- HTML and CSS - Style guide for writing consistent and maintainable CSS.
- Platform and API Guidelines - Reasonable approach to CSS and Sass styling.
- Style Guides - Standardized CSS and Sass style guide.
- Web Development Guides - CSS style conventions used by Airbnb.
