Awesome CSS

/ A curated list of awesome frameworks, style guides, and other cool nuggets for writing amazing CSS. /

Introduction

Motivation

This document is a curated list of frameworks, style guides, and cool nuggets of information for writing awesome CSS. It does not contain resources to learn CSS.

Complementary Resources

If you're struggling with something CSS-related, look for answers within the following resources:

• CSS - MDN - Mozilla
• Reddit (CSS)
• StackOverflow (CSS)

Table of Contents

• CSS Working Group
• Editor's Draft :black_nib:
• Parsers :mag:
• Preprocessors :pill:
• Frameworks :art:
• Toolkits :wrench:
• Reset and Normalize
• CSS Development at Large-Scale Websites
• Code Style Guidelines :book:
• Style Guide
• Style Guide Generators :slot_machine:
• Naming conventions & Methodologies :bulb:
• CSS in JS
• CSS Polyfills
• Miscellaneous
• Podcasts :radio:
• Twitter :satellite:
• Videos :tv:
• 2019
• 2016
• 2015
• Books :books:
• Tutorials :clapper:
• Maintainers
• Contribute

CSS Working Group

The CSS Working Group creates and defines CSS specifications. These specifications are assigned maturity levels as they move through the design process. If you would like to learn more, visit CSS Working Group Page.

Editor's Draft :black_nib:

Editor's drafts of CSS specifications

• W3c/csswg-drafts - Mirror of CSS WG Editor Draft repository.
• W3c/css-houdini-drafts - Mirror of Houdini WG Editor repository.

Parsers :mag:

• CSSOM - CSS Object Model implemented in pure JavaScript.
• CSSTree - Detailed CSS parser with syntax validator.
• Gonzales PE - CSS parser with support for preprocessors.
• Mensch - A decent CSS parser.
• ParserLib - CSSLint/parser-lib.
• PostCSS - Transforming styles with JS plugins.
• Rework - Plugin framework for CSS preprocessing in Node.js.
• Stylecow - Modern CSS for all browsers.

_{⇧ back to top}

Preprocessors :pill:

Write CSS faster

• LESS - Backwards compatible with CSS, and the extra features it adds use existing CSS syntax.
• PostCSS - Transforming CSS with JS plugins.
• Sass - Mature, stable, and powerful professional-grade CSS extension language.
• STYLIS - Light-weight CSS preprocessor.
• Stylus - Expressive, robust, feature-rich CSS language built for NodeJs.
• Vanilla Extract - Generate static CSS using Typescript. Write type‑safe, locally scoped classes, variables and themes.

_{⇧ back to top}

Frameworks :art:

• AgnosticUI - Accessible CSS component primitives that also work with React, Vue 3, Svelte, and Angular.
• Bonsai - A complete Utility First CSS Framework for less than 50kb.
• Bootstrap - The most popular HTML, CSS, and JS framework.
• Bulma - A modern CSS framework based on Flexbox. Also has Sass import for modification.
• Butter Cake - A Modern Lightweight Front End CSS framework for faster and easier web development.