/recommends

CSS

  • Languages
  • CSS
  • Preprocessors
  • BEM

CSS is the language we use to style an HTML document and it describes how HTML elements should be displayed. Every Web Developer has to know how to use it but can be confusing for new developers, since you need to remember a whole bunch of properties and values. You need to remember when to use what and how to combine the properties. Thankfully for us, there are a lot of tools that help you with this.

Useful Resources


Preprocessors

I would recommend to look into the BEM-Syntax before starting with Sass or other Preprocessors and CSS-Frameworks. Writing all classes with the BEM-Syntax is a lot more readable and easier to maintain and defenitly helps writing reusable code.

Sass/Scss

Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Sass

PostCss

a tool that allows you to write CSS in a way that is more maintainable, DRYer, and more future-friendly.
PostCss

Less

a CSS extension language that adds power and simplicity to the CSS language.
Less

Stylus

a CSS extension language that removes the curly braces and lets you write CSS in a very similar to Sass syntax.
Stylus


Frameworks & Libraries

I would recommend to look into the BEM-Syntax before starting with Sass or other Preprocessors and CSS-Frameworks. Writing all classes with the BEM-Syntax is a lot more readable and easier to maintain and defenitly helps writing reusable code.

Class Based CSS

Bootstrap

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

Tailwind

A utility-first CSS framework for rapid UI development.
Tailwind

Foundation

A powerful, intuitive, and accessible framework for building websites and web apps.
Foundation

Bluma

A modern CSS framework based on Flexbox.
Bluma

Material Design

A design system and specification for Material Design.
Material Design

Materialize

A modern responsive front-end framework based on Material Design.
Materialize

CSS-In-JS

CSS Modules

A CSS Module is a CSS file in which all class names and animation names are scoped locally by default and are replaced with the actual class names or animation names at build time.
CSS Modules

Styled-Components

A toolkit for building React components that use CSS for styling.
styled-components

Emotion

A CSS-in-JS library for building Glamor-powered React applications.
Emotion

Vanilla-Extract

Use TypeScript as your preprocessor. Write type‑safe, locally scoped classes, variables and themes, then generate static CSS files at build time.
Vanilla-Extract

Styled-Jsx

Full, scoped and component-friendly CSS support for JSX (rendered on the server or the client).
styled-jsx

Jss

JSS is an authoring tool for CSS which allows you to use JavaScript to describe styles in a declarative, conflict-free and reusable way. It can compile in the browser, server-side or at build time in Node.
jss

Radium

Radium is a set of tools to manage inline styles on React elements. It gives you powerful styling capabilities without CSS.
Radium

Stitches

CSS-in-JS with near-zero runtime, SSR, multi-variant support, and a best-in-class developer experience.
Stitches