Awesome GitHub RepositoriesCSS Architecture Patterns

This project is a curated knowledge base and technical reference for professional web styling. It serves as a comprehensive guide to modern CSS best practices, focusing on techniques that leverage native browser capabilities to create efficient, maintainable, and scalable stylesheets. The collection emphasizes the use of declarative style logic and modern layout engines to replace brittle, imperative approaches. By prioritizing native pseudo-class state management, logical property mapping, and relative unit scaling, the guide demonstrates how to build responsive interfaces that remain consis

This project is a software engineering style guide and a curated collection of architectural patterns and coding standards. It provides a multi-language coding standard to ensure maintainable software across Ruby, Python, JavaScript, and Swift. The project establishes a development workflow specification for version control, continuous integration, and peer review to maintain a linear project history. It also includes a web accessibility framework based on ARIA and WCAG standards, using design tokens and semantic HTML patterns to build inclusive interfaces. The guides cover a broad range of

This project is a comprehensive collection of frontend development best practices and standards. It provides guides for writing semantic HTML, efficient CSS, and functional JavaScript to improve overall web performance and accessibility. The repository establishes frameworks for modern CSS architecture, focusing on specificity management and the use of Flexbox and Grid for predictable layouts. It outlines patterns for functional JavaScript programming, emphasizing the use of pure functions and composition to reduce execution time and dependency bloat. The guidelines cover several core capabi

CSS Layout is a pure CSS pattern library that provides pre-built layout components for common page structures, implemented entirely with CSS using flexbox and grid. The collection focuses on reusable, encapsulated components that handle overlapping elements, vertical centering, sticky footers, and classic page layouts without requiring any JavaScript for rendering or interactivity. The library offers a range of practical layout implementations including centered navigation menus, element stacking techniques, holy grail page layouts, and responsive grid systems. Each pattern is built as a self

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 dependen

Idiomatic CSS is a CSS style guide and architecture standard designed to ensure the creation of consistent and maintainable styles. It provides a set of standardized rules and conventions for writing idiomatic CSS code, functioning as both a formatting specification and a general guide for style organization. The project focuses on CSS preprocessor best practices, specifically providing guidelines to manage nesting depth and selector specificity to avoid complex cascades. It further distinguishes itself through structured documentation patterns and component sectioning to improve the long-ter

Get BEM to all people in simplest way

North هي منهجية تصميم ويب متجاوبة وإطار عمل معمارية CSS يعتمد على Sass. توفر نظاماً لبناء واجهات مستخدم تعتمد على الجوال أولاً باستخدام شبكات مرنة وتقنيات التحسين التدريجي لضمان تجربة متسقة عبر قدرات المتصفح وأحجام الشاشات المختلفة. يتميز المشروع بنظام تسمية CSS قياسي يستخدم Sass mixins لتوليد أسماء الفئات برمجياً، مع التمييز بين المكونات، والتخطيطات، والحالات. كما يعمل كأداة لهيكلة مشاريع الواجهة الأمامية، حيث يوفر مولداً لتهيئة بيئات جديدة باستخدام أوراق أنماط ومشغلات مهام مهيأة مسبقاً. بعيداً عن التنسيق، يغطي إطار العمل مساحة واسعة من معايير تطوير الويب، بما في ذلك تنفيذ HTML الدلالي مع بيانات RDFa الوصفية وتدقيق إمكانية الوصول للويب. يدمج استراتيجية تصميم تركز على المحتوى وسير عمل مرن للواجهة الأمامية لتنسيق الانتقال من هندسة المعلومات وشخصيات المستخدم إلى مكونات جاهزة للإنتاج. يتضمن النظام أدوات لأتمتة تسمية CSS وهيكلة قوالب المشاريع لتسريع الإعداد الأولي.

هذا المشروع عبارة عن منهج تعليمي متقدم لـ CSS يتكون من ملفات أولية ومشاريع نهائية. يوفر مجموعة من التنفيذات الواقعية ومعرض مشاريع مصمم لإتقان تقنيات التخطيط والتصميم الحديثة. يركز المنهج على نهج نمطي لأوراق الأنماط باستخدام متغيرات Sass والمعمارية. يؤكد على اتفاقية تسمية المعدل-العنصر-الكتلة (BEM) لإنشاء CSS قابل للصيانة وإعادة الاستخدام. تغطي المادة عدة مجالات قدرات أساسية، بما في ذلك تصميم الويب المتجاوب باستخدام CSS Grid، وFlexbox، واستعلامات الوسائط. كما تتضمن تطوير تأثيرات الحركة من خلال إطارات CSS الرئيسية والانتقالات، بالإضافة إلى دمج رسومات المتجهات القابلة للتوسع والصور المحسنة لتصميم الواجهة الأمامية.

هذا المشروع عبارة عن دليل شامل وخارطة طريق لتطوير الواجهات الأمامية (Front-end)، مصمم لمساعدة المهندسين على إتقان المهارات والمعايير المهنية المطلوبة لتطوير الويب الحديث. يعمل كمرجع تقني لإتقان HTML وCSS وJavaScript، ويوفر مسارات تعلم مهيكلة وخارطة للكفاءات المهنية اللازمة للانتقال من مبتدئ إلى مهندس ويب محترف. يعمل المورد كدليل مصنف ونظرة عامة على نظام JavaScript البيئي. حيث يفهرس أطر العمل والمكتبات والأدوات القياسية في الصناعة، ويقدم توصيات محددة لإدارة الحالة، وأطر عمل CSS، ومولدات المواقع الساكنة. يغطي الدليل طيفاً واسعاً من كفاءات الهندسة، بما في ذلك معمارية واجهة المستخدم، وتحسين أداء الويب، وتدقيق إمكانية الوصول. كما يوفر توجيهات حول أتمتة البناء، واستراتيجيات النشر، واختيار أدوات المطورين لسير العمل المهني.

rscss is a CSS architecture framework and design system specification used to organize stylesheets. It provides a methodology for defining reusable components and their child elements through a consistent naming standard and component-based file partitioning. The system emphasizes a flat nesting hierarchy to prevent specificity conflicts and deep selector nesting. It utilizes a visual variant pattern that applies appearance variations to components via prefixed classes and a utility class specification for implementing global helper classes for layout adjustments. The framework covers the br

CSS Guidelines هو دليل أسلوب ومرجع شامل لكتابة CSS قابلة للصيانة، وقابلة للتوسع، ومعيارية في مشاريع الويب واسعة النطاق. يوفر مجموعة من المعايير المهنية لتنظيم أوراق الأنماط وتنفيذ أنماط تسمية متسقة لتحسين صحة قاعدة الكود على المدى الطويل وتقليل الديون التقنية. يركز المشروع على منهجية صارمة لتحديد نطاق الفئات لإنشاء مكونات معزولة ويمكن التنبؤ بها، مما يمنع تسرب الأنماط بين الأجزاء المستقلة لواجهة المستخدم. وهو يؤكد على تسلسل هرمي مسطح للمحددات لتجنب تعارضات الخصوصية ويشجع على فصل التخطيط الهيكلي عن الجماليات المرئية. من خلال تنظيم الكود في هياكل دليل منطقية وتطبيق مبادئ التصميم ذات المسؤولية الواحدة، تضمن المبادئ التوجيهية بقاء الأنماط سهلة التحديث والتجاوز مع نمو المشروع. تغطي هذه المعايير الجوانب الأساسية لبناء أنظمة تصميم موثوقة، بما في ذلك إدارة طبقات التتالي وتنفيذ أنماط معمارية متسقة. تعمل الوثائق كمرجع مركزي للفرق التي تهدف إلى إنشاء اتفاقيات تصميم متسقة وعالية الجودة عبر واجهات معقدة.

يوفر هذا المشروع منهجية لتنظيم وتحديد نطاق وتسمية الأنماط لضمان أوراق أنماط قابلة للصيانة والتوسع في تطبيقات الويب الكبيرة. يعمل كنهج مهيكل لإدارة الأنماط القائمة على المكونات، مما يمنع تصادم مساحة الاسم العالمية ويبسط صيانة قاعدة الكود على المدى الطويل من خلال مجموعة من مبادئ التصميم الراسخة. تعتمد المعمارية على التغليف الصارم القائم على مساحة الاسم، حيث يتم بادئة جميع أسماء الفئات بمعرفات مكونات فريدة لضمان العزل المرئي بين الوحدات. يفرض استراتيجية محدد فئة فقط لتجنب مخاطر الصيانة المرتبطة بمحددات العناصر أو المعرفات، مع استخدام محددات الجمع بين الأطفال لتقييد تطبيق النمط على الأحفاد المباشرين ومنع التسرب المرئي غير المقصود إلى المكونات المتداخلة. تعزز المنهجية التطوير المعياري من خلال تجميع الأصول ذات الصلة، مثل الأنماط والنصوص البرمجية والاختبارات، في أدلة واحدة لكل مكون. كما تتضمن أنماطاً لتغليف أنماط الطرف الثالث داخل تعريفات محلية، مما يتيح دمج أنظمة التصميم الخارجية مع الحفاظ على التحكم في اصطلاحات التسمية المحلية وتفاصيل التنفيذ. يتم فرض تعيين واحد لواحد صارم بين مساحات أسماء المكونات وملفات المصدر لضمان الاكتشاف القابل للتنبؤ وتبسيط إعادة الهيكلة مع نمو المشروع.

يوفر هذا المشروع إطار عمل شاملاً لتوحيد معمارية CSS وممارسات التطوير في تطبيقات الويب واسعة النطاق. يضع نهجاً مهيكلاً لإدارة أنماط التصميم، مما يضمن بقاء أوراق الأنماط قابلة للصيانة، وقابلة للتوسع، ومتسقة عبر قواعد الكود المعقدة. تتمحور المنهجية حول استخدام اصطلاحات تسمية BEM (Block-Element-Modifier) لتنظيم مكونات واجهة المستخدم في وحدات مستقلة وقابلة لإعادة الاستخدام. ومن خلال فرض خصوصية محددة للمحددات (selector specificity) ونطاق قائم على مساحة الأسماء، يمنع إطار العمل تصادم الأسماء وتجاوزات الأنماط غير المقصودة. كما يعزز القدرة على التنبؤ من خلال ترتيب الخصائص الموحد ومعمارية ملفات نمطية تعزل منطق التصميم في مكونات ذات مسؤولية واحدة. تعالج هذه المعايير التحديات الشائعة في صيانة الواجهة الأمامية من خلال تحديد قواعد واضحة لتنظيم أوراق الأنماط وإدارة تتابع الأنماط. توفر الوثائق مجموعة من أفضل الممارسات لهيكلة CSS لضمان الاتساق على المدى الطويل وتقليل التعقيد لفرق التطوير.