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 este o bibliotecă de normalizare și resetare CSS care oferă o bază standardizată pentru tipografie, controale de formular și layout-uri de elemente. Elimină inconsistențele implicite ale browserelor pentru a stabili o fundație predictibilă pentru designul web și aplicațiile moderne. Proiectul implementează un baseline CSS modern, concentrându-se pe fonturile de interfață de sistem și randarea consistentă pe diferite browsere web și sisteme de operare. Integrează un system-font stack pentru a asigura o tipografie consistentă și o randare rapidă pe diverse platforme. Stylesheet-ul acoperă capabilități de bază pentru layout și accesibilitate, inclusiv standardizarea modelului box-sizing și eliminarea stilizării specifice sistemului de operare din input-urile de formular. Aplică constrângeri responsive imaginilor și videoclipurilor pentru a preveni overflow-ul layout-ului și include mecanisme pentru a respecta preferințele la nivel de sistem pentru mișcare redusă.

Useful interpolated functions for CSS-in-JS

normalize.css for styled-components

Utility function for using breakpoints with styled-components 💅.