30 open-source projects similar to dropbox/css-style-guide, ranked by shared indexed features. Tags may describe platforms or build tools rather than the same primary purpose. Check each project’s use case, license, and deployment requirements before treating it as a replacement.
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
This project provides a methodology for organizing, scoping, and naming styles to ensure maintainable and scalable stylesheets in large web applications. It functions as a structured approach to managing component-based styles, preventing global namespace collisions and simplifying long-term codebase maintenance through a set of established design principles. The architecture relies on strict namespace-based encapsulation, where all class names are prefixed with unique component identifiers to ensure visual isolation between modules. It enforces a class-only selector strategy to avoid the mai
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
CSS Guidelines is a comprehensive style guide and reference for writing maintainable, scalable, and modular CSS in large-scale web projects. It provides a set of professional standards for organizing stylesheets and implementing consistent naming patterns to improve long-term codebase health and reduce technical debt. The project centers on a strict methodology for scoping classes to create isolated and predictable components, preventing style leakage between independent parts of a user interface. It emphasizes a flat selector hierarchy to avoid specificity conflicts and encourages the separa
Get BEM to all people in simplest way
This project is an advanced CSS learning curriculum consisting of starter files and final projects. It provides a collection of real-world implementations and a project gallery designed for mastering modern layout and styling techniques. The curriculum focuses on a modular approach to stylesheets using Sass variables and architecture. It emphasizes the block-element-modifier naming convention to create maintainable and reusable CSS. The material covers several core capability areas, including responsive web design using CSS Grid, Flexbox, and media queries. It also includes the development o
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
Suit is a CSS component architecture framework and methodology designed for organizing styles using predictable naming conventions for components, descendants, and visual variations. It serves as a design system styling framework that maps application states and design variations to modular CSS rules. The system utilizes namespace-based CSS scoping to isolate component styles and prevent unintended side effects in global stylesheets. It also functions as a utility-first toolkit, providing a system for applying single-purpose layout and spacing rules to reduce code duplication. The methodolog
Stylelint is a static code analysis tool and linter for CSS and style-like languages. It identifies errors, enforces coding conventions, and operates as a PostCSS plugin to validate stylesheets during build pipelines. The project distinguishes itself through support for non-standard syntaxes, including preprocessor parsing for SCSS and Less, and the ability to extract and lint embedded styles from JavaScript, HTML, and template literals. It features an automated fixing system that programmatically corrects repairable styling violations to ensure consistency. The system provides a plugin arch
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 provides a pre-configured frontend template for building single-page applications with integrated routing, unidirectional state management, and component-scoped style isolation. It includes command-line tooling to automatically generate boilerplate components, containers, routes, and associated test files to accelerate feature development. The development environment incorporates static type enforcement, automated code formatting and linting, and hot module replacement to maintain code quality and preserve application state during updates. Additional capabilities include dynamic
inuit.css is a Sass-based CSS framework and design system tool focused on building scalable user interfaces. It serves as a modular preprocessor system that utilizes BEM architecture and OOCSS patterns to structure stylesheets into reusable components and layout abstractions. The framework distinguishes itself by separating structural layout logic from visual skinning, allowing for the creation of design-agnostic layout objects. It employs a configuration-driven build process where developers can use feature switches and variable overrides to inject design tokens and selectively include only
This project provides a comprehensive style guide and architectural framework for building maintainable, modular, and consistent components within the Vue.js ecosystem. It establishes a set of standardized rules for organizing user interface elements into self-contained units, ensuring that logic and styles remain isolated to prevent unintended side effects. The guide distinguishes itself by focusing on strict encapsulation and clear interface design. It promotes the use of namespace-based style scoping to prevent visual leakage and enforces predictable component inputs through descriptive na
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
Primer is a CSS design system framework and utility library used to build consistent user interfaces based on a unified visual language. It provides a collection of CSS rules, utility classes, and pre-defined style sheets for styling standard interface elements. The framework implements frontend visual standardization through a shared set of utility classes and design system rules. This allows for the creation of reusable interface elements and the rapid development of web interface layouts. The system utilizes a BEM-based naming convention, design-token mapping, and CSS variable-based themi
This project is a software engineering reference that provides a cross-language formatting standard and industry-standard practices for architectural patterns, memory management, and identifier naming. Its primary purpose is to implement a unified set of indentation and whitespace rules applied consistently across multiple distinct programming environments. The project specializes in technical documentation localization, providing Chinese language translations of official programming style guides. It maps original English coding standards to Chinese language references to maintain meaning acr
North is a responsive web design methodology and Sass-based CSS architecture framework. It provides a system for building mobile-first user interfaces using fluid grids and progressive enhancement techniques to ensure a consistent experience across different browser capabilities and screen sizes. The project features a standardized CSS naming system that uses Sass mixins to programmatically generate class names, distinguishing between components, layouts, and states. It also functions as a frontend project scaffolding tool, providing a generator to bootstrap new environments with pre-configur
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
This project is a CSS linter and static analysis tool designed to identify syntax errors, logic flaws, and problematic patterns in Cascading Stylesheets. It functions as a command line validator that verifies code quality and enforces consistent styling and coding standards without requiring a web browser. The analyzer distinguishes itself by incorporating web accessibility auditing to detect patterns that hinder users with disabilities. It also performs browser compatibility checking to identify non-standard hacks and missing vendor prefixes, and provides performance optimization analysis to
scss-lint is a static analysis tool and configurable style validator for SCSS stylesheets. It identifies syntax errors and enforces coding style consistency in CSS preprocessor files before they are compiled. The project provides an extensibility system for loading custom linting rules from local directories or external libraries. It allows for the definition of project-specific style standards and supports the creation of baseline configurations to facilitate incremental code cleanup. The tool includes capabilities for source control management hook integration and source preprocessing via
Bulletproof React is an architectural guide and project boilerplate designed to standardize the development of large-scale, maintainable frontend applications. It provides a set of structural principles and organizational strategies that enforce a strict separation of concerns, ensuring that codebases remain manageable as they grow in complexity over time. The project distinguishes itself by promoting a modular design that groups related logic, components, and services into dedicated feature folders. It utilizes a composition-based approach to build user interfaces and implements a dependency
This project is a Sass CSS framework boilerplate and design system template. It provides a structured project starter for organizing styles using a modular architecture that separates global defaults and components to maintain a scalable stylesheet layout. The framework includes a responsive layout system that manages screen widths via mapping functions to ensure consistent behavior across different device sizes. It utilizes reusable style rules, dynamic loops, and conditional styling logic to automate the generation of repetitive CSS rules. The system covers stylesheet segmentation through
css-loader is a Webpack module that transforms CSS files into JavaScript modules and resolves their internal dependencies during the bundling process. It acts as a CSS asset resolver, translating import rules and url functions into module identifiers to integrate stylesheets into a dependency graph. The project implements CSS Modules to prevent global style collisions by scoping class and ID selectors locally with unique identifiers. It includes a system for Interoperable CSS (ICSS), enabling the sharing and composition of styles across different classes and modules through reusable value dec
This is the comprehensive documentation website for the Vue 2 progressive JavaScript framework. It serves as a technical reference and development guide for building reactive user interfaces and single-page applications. The site provides a detailed JavaScript API reference and a web component directory. It covers the implementation of component-based architectures, reactive state management, and the use of a virtual DOM to synchronize application state with the browser. The documentation details capabilities including client-side routing, declarative DOM manipulation, and frontend build opt
This project is a pre-configured project foundation for building scalable web applications. It serves as a React application boilerplate and component scaffold designed to provide a scalable architecture and a foundation for long-term growth. The setup is characterized by an offline-first web framework that maintains application availability without an active network connection. It includes an internationalized UI foundation with integrated translation tooling and a modular CSS-in-JS setup for scoped, component-level styling. The boilerplate covers broader capability areas including automate
vue-loader is a Webpack loader that compiles single-file Vue components into executable JavaScript modules for the browser. It functions as a compiler that splits templates, styles, and scripts from a single file into a bundled module, converting templates into optimized JavaScript render functions for both client and server environments. The project provides a system for routing style blocks through specialized CSS loaders to enable scoped and isolated component styling. It also includes a development utility for hot module replacement, which updates components in the browser in real-time wi
This project is a comprehensive front-end development guide and roadmap designed to help engineers master the skills and professional standards required for modern web development. It serves as a technical reference for mastering HTML, CSS, and JavaScript, providing structured learning paths and a map of the professional competencies needed to transition from a beginner to a professional web engineer. The resource functions as a categorized directory and ecosystem overview of the JavaScript landscape. It catalogs industry-standard frameworks, libraries, and utilities, offering specific recomm
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
sanitize.css is a CSS normalizer and reset library that provides a standardized baseline for typography, form controls, and element layouts. It removes browser default inconsistencies to establish a predictable foundation for web design and modern applications. The project implements a modern CSS baseline focusing on system interface fonts and consistent rendering across different web browsers and operating systems. It integrates a system-font stack to ensure consistent typography and fast rendering on various platforms. The stylesheet covers core layout and accessibility capabilities, inclu
YAPF is a Python code formatter and style compliance tool. It operates as an AST-based reformatter that uses concrete syntax trees to ensure structural consistency and a uniform visual presentation across source files. The engine utilizes a penalty-based layout optimizer to determine the best line breaks by calculating numerical costs for different formatting choices. It employs a multi-process code processor to distribute the formatting of multiple files across several CPU cores. The tool covers source code reformatting through in-place file modifications, difference analysis, and the proce