# linkedin/css-blocks

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/linkedin-css-blocks).**

6,302 stars · 154 forks · TypeScript · BSD-2-Clause

## Links

- GitHub: https://github.com/linkedin/css-blocks
- Homepage: http://css-blocks.com/
- awesome-repositories: https://awesome-repositories.com/repository/linkedin-css-blocks.md

## Topics

`css` `css-modules` `sass`

## Description

High performance, maintainable stylesheets.

## Tags

### Business & Productivity Software

- [CSS Cascade Conflicts](https://awesome-repositories.com/f/business-productivity-software/task-workflow-automation/calendar-automation/calendar-event-management/conflict-detection/css-cascade-conflicts.md) — Reports property conflicts between co-located classes before the application runs. ([source](https://cdn.jsdelivr.net/gh/linkedin/css-blocks@master/README.md))
- [CSS Property Conflicts](https://awesome-repositories.com/f/business-productivity-software/task-workflow-automation/calendar-automation/calendar-event-management/conflict-detection/css-property-conflicts.md) — Catches CSS property conflicts between co-located classes during compilation.

### Programming Languages & Runtimes

- [Block Resolution](https://awesome-repositories.com/f/programming-languages-runtimes/dynamic-class-creation/class-loading-mechanisms/compile-time-class-resolutions/block-resolution.md) — Resolves all block references and overrides into final selectors during the build step.
- [Style State Declarations](https://awesome-repositories.com/f/programming-languages-runtimes/global-state-management/style-state-declarations.md) — Marks states as global for cross-component style toggles like loading or saving.
- [Block Interface Contracts](https://awesome-repositories.com/f/programming-languages-runtimes/interface-contract-implementations/block-interface-contracts.md) — Declares block interface contracts and fails the build on missing implementations. ([source](https://cdn.jsdelivr.net/gh/linkedin/css-blocks@master/README.md))

### Software Engineering & Architecture

- [Style Conflict Resolutions](https://awesome-repositories.com/f/software-engineering-architecture/dependency-tracking/explicit/style-conflict-resolutions.md) — Provides a resolve() directive to explicitly decide which block's property wins in conflicts.
- [Style Conflict Analysis](https://awesome-repositories.com/f/software-engineering-architecture/static-analysis/style-conflict-analysis.md) — Detects property collisions between co-located classes during the build step.
- [Style](https://awesome-repositories.com/f/software-engineering-architecture/interface-contracts/style.md) — Enforces that blocks match a declared interface, failing the build on mismatch.

### User Interface & Experience

- [Block Property Resolutions](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/style-injection-blocks/block-property-resolutions.md) — Decides which block's property values win when multiple blocks style the same element.
- [Cross-Block Property Resolvers](https://awesome-repositories.com/f/user-interface-experience/css-component-libraries/tailwind-css-integration/conflict-resolvers/cross-block-property-resolvers.md) — Uses a resolve() declaration to decide which block's property wins in conflicts. ([source](https://cdn.jsdelivr.net/gh/linkedin/css-blocks@master/README.md))
- [Scoped Rewriting](https://awesome-repositories.com/f/user-interface-experience/css-selectors/scoped-rewriting.md) — Rewrites selectors with unique hashes to scope styles to their owning component.
- [Scoped CSS Modules](https://awesome-repositories.com/f/user-interface-experience/scoped-css-modules.md) — Composes isolated CSS files that automatically scope selectors to prevent leaks and collisions. ([source](https://cdn.jsdelivr.net/gh/linkedin/css-blocks@master/README.md))
- [Block-Based Inheritance Systems](https://awesome-repositories.com/f/user-interface-experience/style-inheritance-systems/block-based-inheritance-systems.md) — Provides a block-based inheritance system for composing and overriding component styles at build time.
- [Component Styling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling.md) — Writes CSS that stays confined to a single component, preventing style leaks and collisions.
- [Style Inheritance](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/component-styling/style-inheritance.md) — Allows blocks to extend others, merging declarations with selective overrides at build time.
- [Cross-Block Conflict Resolvers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/component-styling-tools/styling-variants/style-variant-mapping/variant-based-style-resolvers/cross-block-conflict-resolvers.md) — Ships a resolver that explicitly decides which block's property wins when multiple blocks target the same element.
- [CSS Scoping Engines](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/styling-architectures/styling-systems/build-time-style-processing/css-scoping-engines.md) — Provides a build-time compiler that automatically scopes selectors to components to prevent style leaks.
- [Block API Enforcement](https://awesome-repositories.com/f/user-interface-experience/content-block-editors/block-grouping-components/block-categorization/block-api-enforcement.md) — Verifies that blocks implement the public API of other blocks during the build.
- [External Selector References](https://awesome-repositories.com/f/user-interface-experience/css-selectors/external-selector-references.md) — Declares third-party classes as key selectors to prevent renaming or optimization. ([source](https://cdn.jsdelivr.net/gh/linkedin/css-blocks@master/README.md))
- [External References](https://awesome-repositories.com/f/user-interface-experience/css-selectors/selector-appending/external-references.md) — Declares third-party classes as known selectors to prevent renaming or optimization.
- [Style State Sharing](https://awesome-repositories.com/f/user-interface-experience/global-state-managers/style-state-sharing.md) — Shares global states across blocks for application-wide style toggles. ([source](https://cdn.jsdelivr.net/gh/linkedin/css-blocks@master/README.md))
- [Global State Style Togglers](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/conditional-style-queries/state-based-style-application/global-state-style-togglers.md) — Provides a mechanism to share state across blocks for application-wide style toggles like loading or saving states.
- [State-Driven Toggling](https://awesome-repositories.com/f/user-interface-experience/styling-theming-systems/content-styling/css-utility-libraries/css-utilities/global-css-stylings/global-theme-instances/state-driven-toggling.md) — Shares application-wide style toggles like loading or saving states across blocks.

### Web Development

- [Conflict Detection Analyzers](https://awesome-repositories.com/f/web-development/web-infrastructure-deployment/asset-management-build-tools/style-optimization-tools/css-build-tools/conflict-detection-analyzers.md) — Implements a build-time analyzer that detects cascade conflicts and enforces style contracts between component stylesheets.