Awesome GitHub RepositoriesCSS Optimization

Layui is a web UI component library, frontend layout framework, and CSS asset optimizer. It provides a collection of pre-styled visual elements and layout patterns used to build browser-native web interfaces. The framework enables the composition of structured web pages through standardized design assets and CSS components. It includes tools for compressing stylesheets and resolving imports to improve loading speeds across different web browsers. The library covers web UI development and frontend layout composition, facilitating rapid interface prototyping by assembling functional frontends

PostCSS is a CSS post-processor and abstract syntax tree transformation tool that parses stylesheets into a structured tree for programmatic analysis and modification. It functions as a plugin-driven pipeline where JavaScript plugins can modify, insert, or delete nodes to transform styles. The project provides a framework for building a custom plugin ecosystem to extend the CSS language with non-standard features such as loops, conditionals, and shorthand properties. It supports multi-syntax parsing through pluggable parsers and stringifiers, allowing it to process various style formats and c

Linaria is a zero-runtime CSS-in-JS library and static CSS generator. It evaluates JavaScript expressions at build time to extract styles from tagged template literals into standalone, static CSS files, removing the need for a runtime style injection engine. The library distinguishes itself by mapping component props to CSS custom properties, enabling dynamic styling and runtime property updates without regenerating stylesheets. It utilizes a build-time evaluation engine to resolve interpolations and a hashing system to generate scoped class names that prevent style collisions. The project c

Critical is a tool for extracting and inlining the minimum CSS required to render above-the-fold content. It identifies the styles necessary for the initial visible portion of a page to reduce render-blocking requests and improve page load speed. The project generates resolution-specific stylesheets to optimize the initial paint across different device dimensions. It includes a utility to rebase asset URLs within extracted styles, ensuring that images and fonts load correctly when stylesheets are moved to different directories or content delivery networks. The tool provides a command-line in

PurifyCSS is a CSS unused style remover and payload optimizer that analyzes HTML and templates to identify and delete unused CSS selectors from stylesheets. It functions as a frontend build automation tool that integrates into development pipelines to automatically strip redundant styles and minify assets during the compilation phase. The tool provides specific optimization for single page applications, identifying and removing redundant CSS while ensuring necessary styles are preserved across dynamic views and states. The utility covers a range of capabilities including static content analy

Uncss is a build pipeline CSS optimizer and optimization tool designed to remove unused styles from stylesheets. It analyzes HTML files to identify and strip selectors that do not match any elements in the markup, reducing the final stylesheet size and overall web page weight. The tool functions as a DOM-based CSS analyzer that can simulate runtime document states. It provides mechanisms to preserve required selectors through the use of literal names, regular expressions, and specialized CSS comment markers to ensure styles triggered by user interactions are not deleted. The project supports

StyleX is a type-safe CSS-in-JS library and atomic CSS compiler that transforms JavaScript style definitions into optimized static CSS and type-safe class names. It functions as a multi-framework styling tool, generating standard CSS assets compatible with various JavaScript UI frameworks and server components. The system includes a CSS design token system and theme engine for managing shared constants and composing visual schemes. It allows for the creation of light, dark, and custom themes through variable overrides and token inheritance. The project covers component styling through object

PurgeCSS هو أداة لتنقية وتحسين ملفات CSS ضمن خط أنابيب البناء (build-pipeline)، مصممة لتقليل الحجم النهائي لملفات التنسيق. يعمل كأداة "هز شجري" (tree shaking) تقوم بمسح ملفات HTML وJavaScript لتحديد وإزالة المحددات (selectors) غير المستخدمة من ملفات CSS. تعمل الأداة على تحسين حمولات CSS من خلال إجراء تحليل ثابت للمحتوى لاكتشاف الأنماط المستخدمة فعلياً في الترميز. تستخدم مطابقة الأنماط القائمة على التعبيرات النمطية (regex) للعثور على أسماء الفئات المحتملة دون تنفيذ الكود، وتوظف تحويل AST القائم على PostCSS لحذف القواعد غير المستخدمة بأمان. يوفر المشروع قدرات لأتمتة بناء الواجهة الأمامية، مما يسمح بدمج إزالة الأنماط غير المستخدمة مباشرة في مجمعات الوحدات (module bundlers) ومشغلات المهام. كما يتضمن مرشح قائمة بيضاء (whitelist) مخصص للحفاظ على المحددات الأساسية بغض النظر عما إذا تم اكتشافها أثناء مسح المحتوى.

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

cssnano is a CSS compression tool and minifier that reduces the file size and gzip footprint of stylesheets. It operates as a build pipeline optimizer and code transformer that removes whitespace and comments while shortening colors and gradients into their smallest possible representations. The tool uses a modular plugin architecture and preset-based optimization levels to balance compression intensity with browser compatibility. It allows for the adjustment of output based on a target list of supported browsers to ensure minified styles remain compatible across different environments. The

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

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

هذا المشروع عبارة عن قالب لتطبيقات الجوال متعددة المنصات وboilerplate بلغة TypeScript، مصمم لتسريع بناء تطبيقات React Native باستخدام نظام Expo. يوفر المشروع بنية برمجية مهيأة مسبقاً مع هيكل مجلدات قياسي لتسريع مرحلة التطوير الأولية. يتميز القالب ببنية مشروع قائمة على الميزات (feature-based) ومجموعة أدوات أتمتة شاملة. يتضمن توجيهاً (routing) يعتمد على الملفات للتنقل، ومجموعة أدوات واجهة مستخدم (UI kit) للموبايل تعتمد على الأدوات المساعدة (utility-first) للتنسيق، وطبقة لإدارة حالة الخادم لجلب وتخزين بيانات API عن بُعد. يتضمن الإعداد خط أنابيب CI/CD للموبايل باستخدام GitHub Actions وEAS لأتمتة عمليات البناء والاختبار وتوزيع ملفات التطبيق الثنائية. تغطي القدرات الأوسع للمشروع التحقق من صحة النماذج (schema-based form validation)، والتخزين المحلي المشفر للحفاظ على الجلسات، والتعريب متعدد اللغات مع التحقق من ملفات الترجمة. كما يدمج أدوات لفرض الجودة، بما في ذلك git hooks للتدقيق (linting) وفحص الأنواع (type checks)، بالإضافة إلى اختبارات الوحدات (unit testing) والاختبارات الشاملة (end-to-end UI testing).

astroturf lets you write CSS in your JavaScript files without adding any runtime layer, and with your existing CSS processing pipeline.

analyze-css