dropbox/css-style-guide
Css Style Guide
يوفر هذا المشروع إطار عمل شاملاً لتوحيد معمارية CSS وممارسات التطوير في تطبيقات الويب واسعة النطاق. يضع نهجاً مهيكلاً لإدارة أنماط التصميم، مما يضمن بقاء أوراق الأنماط قابلة للصيانة، وقابلة للتوسع، ومتسقة عبر قواعد الكود المعقدة.
تتمحور المنهجية حول استخدام اصطلاحات تسمية BEM (Block-Element-Modifier) لتنظيم مكونات واجهة المستخدم في وحدات مستقلة وقابلة لإعادة الاستخدام. ومن خلال فرض خصوصية محددة للمحددات (selector specificity) ونطاق قائم على مساحة الأسماء، يمنع إطار العمل تصادم الأسماء وتجاوزات الأنماط غير المقصودة. كما يعزز القدرة على التنبؤ من خلال ترتيب الخصائص الموحد ومعمارية ملفات نمطية تعزل منطق التصميم في مكونات ذات مسؤولية واحدة.
تعالج هذه المعايير التحديات الشائعة في صيانة الواجهة الأمامية من خلال تحديد قواعد واضحة لتنظيم أوراق الأنماط وإدارة تتابع الأنماط. توفر الوثائق مجموعة من أفضل الممارسات لهيكلة CSS لضمان الاتساق على المدى الطويل وتقليل التعقيد لفرق التطوير.
Features
- CSS Style Enforcement - Standardizes CSS architecture through consistent naming, file organization, and property ordering.
- CSS Architecture Patterns - Provides a structured methodology for organizing large-scale CSS codebases using modular file architectures and naming conventions.
- Block-Element-Modifier Standards - Provides a structured naming convention for CSS components using blocks, elements, and modifiers to ensure style isolation.
- Scalable Architecture Guides - Provides organizational strategies for maintaining scalable CSS architectures in large projects.
- Large-Scale Style Maintenance - Maintains frontend style consistency through strict rules on property ordering and selector specificity.
- Frontend Architecture Best Practices - Establishes best practices for component-level design and scope management to ensure consistency in large-scale web applications.
- BEM - Uses the BEM naming convention to organize UI components into independent and reusable units.
- Modular Stylesheet Architectures - Organizes stylesheets into modular, single-responsibility files to simplify navigation and maintenance.
- Selector Specificity Restrictions - Limits selector specificity by restricting ID usage and deep nesting to prevent unintended style overrides.
- Modular Styling - Organizes CSS into reusable blocks, elements, and modifiers to build predictable interfaces.
- Scoped Styles - Uses namespace-based scoping to categorize style rules and prevent side effects across large codebases.
- Property Declaration Ordering - Defines a standardized sequence for CSS property declarations to improve code readability and maintainability.
- Modern CSS Best Practices - Defines best practices for writing and organizing stylesheets to ensure consistency across development teams.
- BEM-Based Naming - Implements BEM naming conventions to create predictable and collision-resistant UI component styles.
- Web Development Guides - CSS architecture and styling standards from Dropbox.
