Rethinking CSS in JS

1. mincho

   1 1 57 8.5 TypeScript

   Natural CSS in TypeScript

   

2. Sevalla

   sevalla.com featured

   Deploy and host your apps and databases, now with $50 credit! Sevalla is the PaaS you have been looking for! Advanced deployment pipelines, usage-based pricing, preview apps, templates, human support by developers, and much more!

   

3. css-in-js

   2 3 856 0.0 TypeScript

   A thorough analysis of all the current CSS-in-JS solutions with SSR & TypeScript support for Next.js (by andreipfeiffer)

   

   Aside from the DevTools issue, it appears to be mostly a performance issue. Of course, there are CSS in JS, which overcomes these issues by extracting the CSS and making it zero runtime, but there are some tradeoffs. Here are two examples.

4. pigment-css

   3 2 1,079 7.9 TypeScript

   Pigment CSS is a zero-runtime CSS-in-JS library that extracts the colocated styles to their own CSS files at build time.

   

5. freestyler

   4 1 272 9.5 TypeScript

   5th generation CSS-in-JS library

   

   Dynamic styling restrictions: The combination of build issues and the use of CSS Variables forces us to support only some representations, like Styling based on props in Pigment CSS, or learn to do things differently, like Coming from Emotion or styled-components. Dynamicity is also one of the main metrics that can be used to distinguish between CSS in JS.

6. Firefox-UI-Fix

   5 479 5,687 8.3 SCSS

   🦊 I respect proton UI and aim to improve it.

   

   As a representative example, see the definition and compilation of the tab bar layout in my Firefox theme. Despite only considering the OS and user options, a file of about 360 lines produces a compilation result reaching approximately 1400 lines.

7. awesome-css

   6 10 5,353 4.4

   :art: A curated contents of amazing CSS :)

   

8. theme-ui

   7 22 5,362 6.9 TypeScript

   Build consistent, themeable React apps based on constraint-based design principles

   

9. InfluxDB

   www.influxdata.com featured

   InfluxDB – Built for High-Performance Time Series Workloads. InfluxDB 3 OSS is now GA. Transform, enrich, and act on time series data directly in the database. Automate critical tasks and eliminate the need to move data externally. Download now.

   

10. styled-system

    8 34 7,871 0.0 JavaScript

    ⬢ Style props for rapid UI development

    

11. critical

    9 14 10,156 3.7 JavaScript

    Extract & Inline Critical-path CSS in HTML pages

    

12. polished

    10 1 7,658 2.6 JavaScript

    A lightweight toolset for writing styles in JavaScript ✨ (by styled-components)

    

13. linaria

    11 52 12,159 5.9 TypeScript

    Zero-runtime CSS in JS library

    

14. macaron

    12 2 782 6.2 TypeScript

    Compiler-augmented typesafe CSS-in-JS with zero runtime, colocation, maximum safety and productivity (by macaron-css)

    

15. postcss-plugins

    13 19 996 9.7 CSS

    PostCSS Tools and Plugins

    

16. clsx

    14 22 9,111 5.8 JavaScript

    A tiny (239B) utility for constructing `className` strings conditionally.

    

17. vanilla-extract

    15 98 10,092 8.4 TypeScript

    Zero-runtime Stylesheets-in-TypeScript

    

18. tailwind-merge

    16 16 5,335 9.2 TypeScript

    Merge Tailwind CSS classes without style conflicts

    

19. figma-low-code

    17 1 738 - JavaScript

    A repository to bootstrap Figma low code projects

    

20. text-to-figma

    18 1 87 - Python

    Conversational UI for Figma

    

21. Tailwind CSS

    19 1,524 89,844 9.8 TypeScript

    A utility-first CSS framework for rapid UI development.

    

22. suit

    20 12 3,801 0.0 HTML

    Style tools for UI components

    

23. stylus

    21 37 11,290 5.8 JavaScript

    Expressive, robust, feature-rich CSS language built for nodejs

    

24. stylelint

    22 49 11,323 9.7 JavaScript

    A mighty CSS linter that helps you avoid errors and enforce conventions.

    

25. styled-components

    23 244 40,892 7.2 TypeScript

    Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅

    

    Agnostic: Framework independent, libraries like StyledComponent are designed specifically for React.

26. storybook

    24 358 87,617 10.0 TypeScript

    Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation

    

27. stitches

    25 82 7,808 0.0 JavaScript

    [Not Actively Maintained] CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.

    

28. Sass

    26 224 15,320 8.2 TypeScript

    Sass makes CSS fun!

    

29. PostCSS

    27 96 28,861 8.3 TypeScript

    Transforming styles with JS plugins

    

30. pontoon

    28 7 1,584 9.3 Python

    Mozilla's Localization Platform

    

31. less.js

    29 52 17,056 6.9 JavaScript

    Less. The dynamic stylesheet language.

    

32. histoire

    30 2 3,413 7.2 TypeScript

    ⚡ Fast and beautiful interactive component playgrounds, powered by Vite

    

33. Bootstrap

    31 589 173,309 9.6 MDX

    The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

    

34. Bulma

    32 170 49,923 7.7 CSS

    Modern CSS framework based on Flexbox

    

    For now, we can delegate layout concerns to frameworks like Bootstrap or Bulma, and focus more on management aspects.

35. SaaSHub

    www.saashub.com featured

    SaaSHub - Software Alternatives and Reviews. SaaSHub helps you find the best software and product alternatives

    

Suggest a related project