Alternatives to CSS Modules logo

Alternatives to CSS Modules

Sass, Radium, BEM, CSS Blocks, and Animate.css are the most popular alternatives and competitors to CSS Modules.
51
32
+ 1
0

What is CSS Modules and what are its top alternatives?

It is a CSS file in which all class names and animation names are scoped locally by default. The key words here are scoped locally. With this, your CSS class names become similar to local variables in JavaScript. It goes into the compiler, and CSS comes out the other side.
CSS Modules is a tool in the CSS Pre-processors / Extensions category of a tech stack.

CSS Modules alternatives & related posts

related Sass posts

Lee Benson
Lee Benson
React
React
GraphQL
GraphQL
Apollo
Apollo
JavaScript
JavaScript
TypeScript
TypeScript
Webpack
Webpack
React Helmet
React Helmet
styled-components
styled-components
Sass
Sass
Less
Less
PostCSS
PostCSS
Bootstrap
Bootstrap
Semantic UI
Semantic UI
Foundation
Foundation
React Router
React Router
Koa
Koa
#JSX
#React.
#Css
#StyledComponents.
#Async
#HTML
#GraphQL
#Apollo

ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

See more
Julien DeFrance
Julien DeFrance
Principal Software Engineer at Tophatter | 6 upvotes 27.9K views
atSmartZipSmartZip
Bootstrap
Bootstrap
Less
Less
Sass
Sass
#GridFramework
#Sass
#Stylesheets

Which #GridFramework to use? My team and I closed on Bootstrap !

On a related note and as far as stylesheets go, we had to chose between #CSS, #SCSS, #Sass , Less Finally opted for Sass

As syntactically awesome as the name announces it.

See more
Radium logo

Radium

12
20
0
12
20
+ 1
0
A toolchain for React component styling
    Be the first to leave a pro
    Radium logo
    Radium
    VS
    CSS Modules logo
    CSS Modules
    BEM logo

    BEM

    54
    24
    0
    54
    24
    + 1
    0
    It is a methodology, that helps you to achieve reusable components and code sharing in the front-end
      Be the first to leave a pro
      BEM logo
      BEM
      VS
      CSS Modules logo
      CSS Modules
      CSS Blocks logo

      CSS Blocks

      23
      23
      0
      23
      23
      + 1
      0
      A component-oriented CSS authoring system by LinkedIn
        Be the first to leave a pro
        CSS Blocks logo
        CSS Blocks
        VS
        CSS Modules logo
        CSS Modules
        Animate.css  logo

        Animate.css

        7.4K
        90
        0
        7.4K
        90
        + 1
        0
        A library of CSS animations
          Be the first to leave a pro
          Animate.css  logo
          Animate.css
          VS
          CSS Modules logo
          CSS Modules
          Less logo

          Less

          1.6K
          945
          925
          1.6K
          945
          + 1
          925
          The dynamic stylesheet language
          Less logo
          Less
          VS
          CSS Modules logo
          CSS Modules

          related Less posts

          Lee Benson
          Lee Benson
          React
          React
          GraphQL
          GraphQL
          Apollo
          Apollo
          JavaScript
          JavaScript
          TypeScript
          TypeScript
          Webpack
          Webpack
          React Helmet
          React Helmet
          styled-components
          styled-components
          Sass
          Sass
          Less
          Less
          PostCSS
          PostCSS
          Bootstrap
          Bootstrap
          Semantic UI
          Semantic UI
          Foundation
          Foundation
          React Router
          React Router
          Koa
          Koa
          #JSX
          #React.
          #Css
          #StyledComponents.
          #Async
          #HTML
          #GraphQL
          #Apollo

          ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

          ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

          React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

          styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

          React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

          Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

          See more
          Julien DeFrance
          Julien DeFrance
          Principal Software Engineer at Tophatter | 6 upvotes 27.9K views
          atSmartZipSmartZip
          Bootstrap
          Bootstrap
          Less
          Less
          Sass
          Sass
          #GridFramework
          #Sass
          #Stylesheets

          Which #GridFramework to use? My team and I closed on Bootstrap !

          On a related note and as far as stylesheets go, we had to chose between #CSS, #SCSS, #Sass , Less Finally opted for Sass

          As syntactically awesome as the name announces it.

          See more
          PostCSS logo

          PostCSS

          376
          294
          46
          376
          294
          + 1
          46
          Transform CSS with JS plugins
          PostCSS logo
          PostCSS
          VS
          CSS Modules logo
          CSS Modules

          related PostCSS posts

          Lee Benson
          Lee Benson
          React
          React
          GraphQL
          GraphQL
          Apollo
          Apollo
          JavaScript
          JavaScript
          TypeScript
          TypeScript
          Webpack
          Webpack
          React Helmet
          React Helmet
          styled-components
          styled-components
          Sass
          Sass
          Less
          Less
          PostCSS
          PostCSS
          Bootstrap
          Bootstrap
          Semantic UI
          Semantic UI
          Foundation
          Foundation
          React Router
          React Router
          Koa
          Koa
          #JSX
          #React.
          #Css
          #StyledComponents.
          #Async
          #HTML
          #GraphQL
          #Apollo

          ReactQL is a React + GraphQL front-end starter kit. #JSX is a natural way to think about building UI, and it renders to pure #HTML in the browser and on the server, making it trivial to build server-rendered Single Page Apps. GraphQL via Apollo was chosen for the data layer; #GraphQL makes it simple to request just the data your app needs, and #Apollo takes care of communicating with your API (written in any language; doesn't have to be JavaScript!), caching, and rendering to #React.

          ReactQL is written in TypeScript to provide full types/Intellisense, and pick up hard-to-diagnose goofs that might later show up at runtime. React makes heavy use of Webpack 4 to handle transforming your code to an optimised client-side bundle, and in throws back just enough code needed for the initial render, while seamlessly handling import statements asynchronously as needed, making the payload your user downloads ultimately much smaller than trying to do it by hand.

          React Helmet was chosen to handle <head> content, because it works universally, making it easy to throw back the correct <title> and other tags on the initial render, as well as inject new tags for subsequent client-side views.

          styled-components, Sass, Less and PostCSS were added to give developers a choice of whether to build styles purely in React / JavaScript, or whether to defer to a #css #preprocessor. This is especially useful for interop with UI frameworks like Bootstrap, Semantic UI, Foundation, etc - ReactQL lets you mix and match #css and renders to both a static .css file during bundling as well as generates per-page <style> tags when using #StyledComponents.

          React Router handles routing, because it works both on the server and in the client. ReactQL customises it further by capturing non-200 responses on the server, redirecting or throwing back custom 404 pages as needed.

          Koa is the web server that handles all incoming HTTP requests, because it's fast (TTFB < 5ms, even after fully rendering React), and its natively #async, making it easy to async/await inside routes and middleware.

          See more
          Hampton Catlin
          Hampton Catlin
          VP of Engineering at Rent The Runway | 4 upvotes 76.7K views
          atRent the RunwayRent the Runway
          Sass
          Sass
          PostCSS
          PostCSS
          styled-components
          styled-components

          We use Sass because I invented it! No, that's not a joke at all! Well, let me explain. So, we used Sass before I started at Rent the Runway because it's the de-facto industry standard for pre-compiled and pre-processed CSS. We do also use PostCSS for stuff like vendor prefixing and various transformations, but Sass (specifically SCSS) is the main developer-focused language for describing our styling. Some internal apps use styled-components and @Aphrodite, but our main website is allllll Sassy. Oh, but the non-joking part is the inventing part. /shrug

          See more
          Stylus logo

          Stylus

          329
          243
          326
          329
          243
          + 1
          326
          Expressive, robust, feature-rich CSS language built for nodejs
          Stylus logo
          Stylus
          VS
          CSS Modules logo
          CSS Modules
          Compass logo

          Compass

          301
          202
          12
          301
          202
          + 1
          12
          A Stylesheet Authoring Environment that makes your website design simpler to implement and easier to maintain
          Compass logo
          Compass
          VS
          CSS Modules logo
          CSS Modules
          Bourbon logo

          Bourbon

          119
          96
          20
          119
          96
          + 1
          20
          A lightweight mixin library for Sass
          Bourbon logo
          Bourbon
          VS
          CSS Modules logo
          CSS Modules
          node-sass logo

          node-sass

          31
          27
          0
          31
          27
          + 1
          0
          Node.js bindings to libsass
            Be the first to leave a pro
            node-sass logo
            node-sass
            VS
            CSS Modules logo
            CSS Modules
            Autoprefixer logo

            Autoprefixer

            30
            14
            0
            30
            14
            + 1
            0
            PostCSS plugin to parse CSS and add vendor prefixes to CSS rules
              Be the first to leave a pro
              Autoprefixer logo
              Autoprefixer
              VS
              CSS Modules logo
              CSS Modules
              PurifyCSS logo

              PurifyCSS

              10
              16
              0
              10
              16
              + 1
              0
              Remove unused CSS. Also works with single-page apps.
                Be the first to leave a pro
                PurifyCSS logo
                PurifyCSS
                VS
                CSS Modules logo
                CSS Modules