Rethinking CSS in JS

1. mincho

   1 1 40 9.0 TypeScript

   Natural CSS in TypeScript

   

2. SaaSHub

   www.saashub.com featured

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

   

3. css-in-js

   2 3 835 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 1 895 9.4 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 477 5,506 9.0 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,126 4.4

   :art: A curated contents of amazing CSS :)

   

8. theme-ui

   7 22 5,320 7.6 TypeScript

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

   

9. styled-system

   8 34 7,874 0.0 JavaScript

   ⬢ Style props for rapid UI development

   

10. critical

    9 12 10,057 5.8 JavaScript

    Extract & Inline Critical-path CSS in HTML pages

    

11. polished

    10 1 7,641 6.3 JavaScript

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

    

12. linaria

    11 49 11,764 6.1 TypeScript

    Zero-runtime CSS in JS library

    

13. macaron

    12 2 768 6.2 TypeScript

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

    

14. postcss-plugins

    13 18 927 9.9 CSS

    PostCSS Tools and Plugins

    

15. clsx

    14 22 8,586 5.8 JavaScript

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

    

16. vanilla-extract

    15 94 9,706 8.6 TypeScript

    Zero-runtime Stylesheets-in-TypeScript

    

17. tailwind-merge

    16 16 4,764 9.3 TypeScript

    Merge Tailwind CSS classes without style conflicts

    

18. figma-low-code

    17 1 683 - JavaScript

    A repository to bootstrap Figma low code projects

19. text-to-figma

    18 1 86 - Python

    Conversational UI for Figma

20. Tailwind CSS

    19 1,450 84,550 9.8 TypeScript

    A utility-first CSS framework for rapid UI development.

    

21. suit

    20 12 3,805 0.0 HTML

    Style tools for UI components

    

22. stylus

    21 31 11,204 6.6 JavaScript

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

    

23. stylelint

    22 49 11,102 9.7 JavaScript

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

    

24. styled-components

    23 237 40,585 7.3 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.

25. storybook

    24 344 85,144 10.0 TypeScript

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

    

26. stitches

    25 82 7,754 1.0 JavaScript

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

    

27. Sass

    26 216 15,179 8.8 TypeScript

    Sass makes CSS fun!

    

28. PostCSS

    27 93 28,618 8.7 TypeScript

    Transforming styles with JS plugins

    

29. pontoon

    28 6 1,491 9.4 Python

    Mozilla's Localization Platform

    

30. less.js

    29 50 17,035 5.8 JavaScript

    Less. The dynamic stylesheet language.

    

31. histoire

    30 2 3,259 6.7 TypeScript

    ⚡ Fast and beautiful interactive component playgrounds, powered by Vite

    

32. Bootstrap

    31 572 171,239 9.5 JavaScript

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

    

33. Bulma

    32 169 49,511 8.8 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.

Suggest a related project