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 est un outil de nettoyage et d'optimisation CSS pour pipelines de build, conçu pour réduire la taille finale des feuilles de style. Il fonctionne comme un outil de « tree shaking » qui analyse les fichiers HTML et JavaScript pour identifier et supprimer les sélecteurs CSS inutilisés. L'outil optimise les payloads CSS en effectuant une analyse statique du contenu pour détecter quels styles sont réellement utilisés dans le balisage. Il utilise des expressions régulières pour trouver des noms de classes potentiels sans exécuter de code et emploie une transformation AST basée sur PostCSS pour supprimer en toute sécurité les règles inutilisées. Le projet offre des capacités d'automatisation du build frontend, permettant d'intégrer la suppression des styles inutilisés directement dans les bundlers de modules et les task runners. Il inclut également un filtre de liste blanche personnalisée pour préserver les sélecteurs essentiels, indépendamment de leur détection lors de l'analyse du contenu.

loadCSS est un chargeur CSS asynchrone et un injecteur de feuilles de style non bloquant. Il fournit une implémentation technique pour charger des feuilles de style sans bloquer le processus de rendu du navigateur afin de maintenir une interface utilisateur réactive. Le projet implémente un pattern de chargement CSS spécifique pour détecter quand les feuilles de style asynchrones ont fini de charger à travers différents navigateurs web. Cela permet l'exécution de fonctions de rappel uniquement après qu'une feuille de style a été entièrement chargée pour assurer un comportement visuel cohérent. L'outil couvre l'insertion programmatique de feuilles de style, l'injection dynamique basée sur la logique de l'application et la détection de chargement de feuilles de style. Il gère la manière dont les styles sont demandés pour optimiser la performance frontend.

cssnano est un outil de compression et de minification CSS qui réduit la taille des fichiers et l'empreinte gzip des feuilles de style. Il opère comme un optimiseur de pipeline de build et un transformateur de code qui supprime les espaces et les commentaires tout en raccourcissant les couleurs et les dégradés vers leurs représentations les plus compactes. L'outil utilise une architecture de plugins modulaire et des niveaux d'optimisation basés sur des préréglages pour équilibrer l'intensité de la compression avec la compatibilité des navigateurs. Il permet d'ajuster la sortie en fonction d'une liste cible de navigateurs supportés pour garantir que les styles minifiés restent compatibles dans différents environnements. Le projet s'intègre dans les pipelines PostCSS et les bundlers de modules, fournissant à la fois une interface en ligne de commande et des capacités d'automatisation pour l'intégration dans les processus de build. Cela permet de réduire la taille totale en octets et la latence réseau grâce à des workflows de minification CSS automatisés.

North est une méthodologie de conception web responsive et un framework d'architecture CSS basé sur Sass. Il fournit un système pour construire des interfaces utilisateur mobile-first utilisant des grilles fluides et des techniques d'amélioration progressive pour assurer une expérience cohérente à travers différentes capacités de navigateur et tailles d'écran. Le projet dispose d'un système de nommage CSS standardisé qui utilise des mixins Sass pour générer par programmation des noms de classes, distinguant les composants, les mises en page et les états. Il fonctionne également comme un outil de scaffolding de projet frontend, fournissant un générateur pour amorcer de nouveaux environnements avec des feuilles de style et des task runners préconfigurés. Au-delà du style, le framework couvre une large surface des standards de développement web, y compris l'implémentation HTML sémantique avec des métadonnées RDFa et l'audit d'accessibilité web. Il intègre une stratégie de conception axée sur le contenu et un flux de travail frontend agile pour coordonner la transition de l'architecture de l'information et des personas d'utilisateurs vers des composants prêts pour la production. Le système inclut des outils pour automatiser le nommage CSS et le scaffolding de modèles de projet afin d'accélérer la configuration initiale.

Ceci est une extension Webpack utilisée pour extraire le CSS des fichiers JavaScript vers des feuilles de style autonomes pour les builds de production. Il fonctionne comme un bundler CSS et un optimiseur d'assets qui sépare les styles des bundles de scripts pour permettre un chargement parallèle et prévenir les flashs de contenu non stylisé. Le projet fournit des utilitaires pour générer des exports de modules JavaScript qui mappent les définitions de style locales aux composants d'application. Il implémente également la gestion de thèmes dynamique en chargeant conditionnellement différentes variantes CSS via des requêtes de ressources et prend en charge le cache navigateur à long terme via l'utilisation de noms de fichiers avec hash de contenu. Les domaines de capacité couvrent l'optimisation des performances frontend via le chargement asynchrone des styles à la demande et les optimisations de rendu côté serveur, incluant l'inlining de style et la prévention des balises en double. L'outil prend également en charge un workflow de développement avec hot module replacement pour des mises à jour de style instantanées. Le plugin s'intègre dans le pipeline de build Webpack et fournit des options de configuration pour les motifs de noms de fichiers de sortie et des hooks de cycle de vie pour personnaliser la génération des balises link de style.

Ce projet est un template d'application mobile multiplateforme et un boilerplate TypeScript conçu pour initialiser des applications React Native avec l'écosystème Expo. Il propose une architecture préconfigurée avec une structure de dossiers standardisée pour accélérer le développement initial. Le template se distingue par une architecture orientée fonctionnalités et une suite d'automatisation complète. Il intègre le routage basé sur les fichiers pour la navigation, un kit d'UI mobile orienté utilitaires pour le stylisme, et une couche de gestion d'état serveur pour la récupération et la mise en cache des données d'API distantes. La configuration inclut un pipeline CI/CD mobile utilisant GitHub Actions et EAS pour automatiser la construction, les tests et la distribution des binaires d'application. Le périmètre fonctionnel couvre la validation de formulaires basée sur des schémas, le stockage local chiffré pour la persistance des sessions, et la localisation multilingue avec validation des fichiers de traduction. Il intègre également des outils de contrôle qualité, notamment des git hooks pour le linting et la vérification de types, ainsi que des tests unitaires et end-to-end automatisés.

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

analyze-css