✨ CSS

• Languages
• CSS
• Preprocessors
• Class-based
• CSS-in-JS
• 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

• CSS Reference
• CSS-Tricks Guides offers a lot of useful resources to learn CSS and the ones I always have open when writing css are:
  • Complete Guide to Flexbox
  • Complete Guide to Grid
• Css Grid Generator by @sarah_edo
• CSS Stats provides analytics and visualizations for your stylesheets. This information can be used to improve consistency.
• A Figma publication for design systems creators, designers, developers, and managers
• How to write smooth shadows
• Smooth Shadows Tool
• Shadow Tool by Josh Comeau
• Fluid Typography with Clamp
• Min Max Calculator - Clamp
• Font Size Clamp Calculator
• Create 3D illustrations with CSS
• Tint & Shade Generator
• Easy Gradients - Linear gradients often have hard edges where they start and/or end. We can avoid those by controlling the color mix with easing functions.
• Design Checklist
• Happy Hues is a website with a lot of color palettes.
• Mindfully curated color palettes - A collection of unique color combinations for your design projects. Steal them. Use them. Make something beautiful.
• Generative design tools for the web
• Better Web Type
• Every Layout
• CSS Buttons Examples
• CSS Box-Shadow Examples
• Grainy Gradients
• Capsize - Using font metadata, text can now be sized according to the height of its capital letters while trimming the space above capital letters and below the baseline.
• Fluid Type Scale - automate font sizes with the clamp() function.
• Utopia Calculators - Elegantly scale type and space without breakpoints

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 definitely 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 definitely 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