Awesome GitHub RepositoriesCSS Styling Libraries

styled-components is a CSS-in-JS styling library and tool for React components. It provides a cross-platform UI styling API and a dynamic theme management system to maintain consistent design tokens and encapsulate visual logic, preventing global scope conflicts. The library utilizes a unified interface that works across both web environments and native mobile frameworks. It enables the definition of styles using JavaScript and TypeScript template literals, allowing CSS to be bound directly to components. The system supports dynamic prop-based styling, style inheritance, and the creation of

CSS Modules is a build-time tool that transforms local class names into unique, collision-resistant identifiers. By scoping styles to specific components during the compilation phase, it ensures that visual definitions remain isolated and prevents naming conflicts within web applications. The project functions as a frontend build plugin that integrates with module bundlers to manage style dependencies and assets. It generates a JavaScript object mapping that links original local class names to their transformed global counterparts, allowing developers to reference styles programmatically with

styled-system is a prop-based styling library and CSS-in-JS theme system. It functions as a design token orchestrator that maps component properties to a central theme, allowing developers to change element appearances by passing style properties directly to components instead of writing separate stylesheets. The library features a responsive style prop engine that enables the creation of fluid layouts. This is achieved by using shorthand arrays to adjust styles across different screen breakpoints, ensuring visual arrangements adapt to various screen sizes. The system covers a wide range of

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

Clarity is a scalable, accessible, customizable, open source design system built with web components. Works with any JavaScript framework, built for enterprises, and designed to be inclusive.

Object-Oriented CSS (OOCSS) is a CSS methodology and framework that structures stylesheets around reusable, composable classes. Its core principle is separating layout and structure from visual design, allowing the same structural classes to work with different visual treatments. The approach encourages styling elements based on their own properties rather than their location in the DOM, making components portable across different contexts. The methodology is built on class composition, where complex visual patterns are created by combining multiple single-purpose CSS classes on a single elem

Farm is a Rust-based web build tool and development server that compiles JavaScript, TypeScript, CSS, HTML, and static assets into optimized bundles. It uses a module-graph-based bundling approach with persistent module-level caching, enabling near-instant builds and sub-20ms hot module replacement during development. The tool processes assets based on file extensions, handling CSS, Sass, Less, PostCSS, HTML, and images as first-class modules without requiring JavaScript transformation. Farm distinguishes itself through its Vite-compatible plugin system, accepting Vite, Rollup, and Unplugin p

sanitize.css est une bibliothèque de normalisation et de reset CSS qui fournit une base standardisée pour la typographie, les contrôles de formulaire et les mises en page. Elle supprime les incohérences par défaut des navigateurs pour établir une fondation prévisible pour le design web et les applications modernes. Le projet implémente une base CSS moderne se concentrant sur les polices d'interface système et un rendu cohérent sur différents navigateurs web et systèmes d'exploitation. Il intègre une pile de polices système pour assurer une typographie cohérente et un rendu rapide sur diverses plateformes. La feuille de style couvre des capacités essentielles de mise en page et d'accessibilité, incluant la standardisation du modèle box-sizing et la suppression des styles spécifiques aux systèmes d'exploitation sur les entrées de formulaire. Elle applique des contraintes responsives aux images et vidéos pour éviter les débordements de mise en page et inclut des mécanismes pour respecter les préférences système concernant la réduction des mouvements.

Useful interpolated functions for CSS-in-JS

normalize.css for styled-components

Utility function for using breakpoints with styled-components 💅.