explaingit

awesome-css-group/awesome-css

5,557Audience · developerComplexity · 1/5Setup · easy

TLDR

A community-curated directory of CSS tools, frameworks, preprocessors, naming methodologies, and learning resources, a browse-first index to help you pick the right tool for a web project.

Mindmap

mindmap
  root((Awesome CSS))
    Preprocessors
      Sass
      LESS
      PostCSS
    Frameworks
      Bootstrap
      Tailwind
      Bulma
    Methodology
      BEM naming
      CSS-in-JS
      Style guides
    Resources
      Books
      Conference talks
      Twitter accounts
    Audience
      Web developers
      Beginners
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Browse CSS frameworks like Bootstrap, Tailwind, and Bulma to pick the right starting point for a new web project

USE CASE 2

Find a CSS preprocessor that adds variables, nesting, and logic to your stylesheets

USE CASE 3

Discover tools that automatically format and lint CSS code for consistency and errors

USE CASE 4

Learn the BEM naming convention so a team can work on the same codebase without class name conflicts

Tech stack

CSSSassPostCSSBootstrapTailwind CSS

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Awesome CSS is a curated list of CSS-related tools, frameworks, and resources, collected and organized by a community of contributors. It does not teach CSS itself but points to useful things people have built on top of it: parsers, preprocessors, frameworks, style guides, naming conventions, podcasts, books, videos, and Twitter accounts to follow. The list is organized into sections. Parsers are libraries that read and understand CSS files programmatically. Preprocessors like Sass, LESS, and PostCSS let you write CSS with extra features such as variables, nesting, and logic that compile down to regular CSS. Frameworks like Bootstrap, Tailwind, and Bulma give you pre-built components and layout systems so you do not need to write every style from scratch. Other sections cover naming methodologies, which are systems like BEM that give rules for how to name CSS classes so large teams can work on the same codebase without conflicts. There are also sections on CSS-in-JavaScript approaches (where styles are written alongside JavaScript code rather than in separate files), polyfills (JavaScript that adds CSS features to older browsers), and style guide generators (tools that automatically build a living documentation page from your CSS). The list also links to conference talks from 2015, 2016, and 2019, books for people who want to study CSS in depth, and a set of Twitter accounts run by CSS experts worth following. If you are starting a new web project and wondering which CSS framework to use, looking for a preprocessor, or trying to find a tool that automatically formats and checks your CSS, this list is a directory to browse rather than a piece of software to install.

Copy-paste prompts

Prompt 1
I am starting a new web project and need to pick a CSS framework. Based on the awesome-css list, compare Bootstrap, Tailwind, and Bulma: when should I use each one?
Prompt 2
I want to add CSS linting to my project. From the awesome-css directory, what tools can automatically check my CSS for errors and enforce a consistent code style?
Prompt 3
I want to use a CSS-in-JS approach in my JavaScript app. Based on the awesome-css list, what libraries are available and how do they differ from writing separate CSS files?
Open on GitHub → Explain another repo

← awesome-css-group on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.