csswizardry/CSS-Guidelines
CSS Guidelines
CSS Guidelines 是一个综合样式指南和参考，用于在大型 Web 项目中编写可维护、可扩展和模块化的 CSS。它提供了一套专业标准，用于组织样式表和实现一致的命名模式，以改善长期的代码库健康状况并减少技术债务。
该项目专注于一种严格的方法，用于限定类作用域以创建隔离且可预测的组件，防止样式在用户界面的独立部分之间泄漏。它强调扁平的选择器层级以避免特异性冲突，并鼓励将结构布局与视觉美学分离。通过将代码组织为逻辑目录结构并应用单一职责设计原则，该指南确保样式在项目增长时保持易于更新和覆盖。
这些标准涵盖了构建可靠设计系统的基础方面，包括级联层的管理和一致架构模式的实现。该文档作为旨在在复杂界面中建立可预测、高质量样式约定的团队的中心资源。
Features
- BEM Element Scoping - Uses BEM naming conventions to bind elements to blocks and prevent style leakage.
- Flat CSS Class Selectors - Enforces flat selector hierarchies to prevent specificity wars and simplify style overrides.
- BEM - Implements the Block-Element-Modifier methodology to create isolated and predictable CSS components.
- CSS Specificity Management - Maintains flat selector hierarchies to prevent complex override conflicts during development.
- CSS Style Guides - Provides a comprehensive reference for writing maintainable and modular CSS code.
- Single-Purpose CSS Classes - Encourages the use of single-purpose utility classes to maximize visual code reuse.
- Frontend Architecture Best Practices - Establishes professional standards for clean, predictable styles to reduce technical debt.
- CSS Architecture Patterns - Organizes stylesheets using consistent patterns to ensure scalability in large codebases.
- Layout-Design Separation - Decouples structural layout logic from aesthetic skinning to improve design portability.
- Web Development Standards - Sets professional guidelines for structuring CSS to ensure consistency across interfaces.
- Design System Foundations - Builds a structured styling base to support the scaling of complex design systems.
- Specificity Management Strategies - Provides strategies for managing specificity transitions from global to local scopes.
- Stylesheet Maintainability Standards - Provides standardized guidelines for organizing CSS to ensure long-term maintainability.
- Visual-Structural Separations - Isolates visual style definitions from structural markup to prevent design breakage.
- Cascade Layer Management - Uses CSS cascade layers to manage style priority and ensure global defaults are correctly overridden.
- Modern CSS Best Practices - Implements modular styling patterns that allow interfaces to scale without breaking existing layouts.
