Collected dispatches from The Quest for Scalable CSS

Overview

A Scalable CSS Reading List Awesome

A list of things to read or watch that address these two questions: What is scalable CSS? and How do we create scalable CSS?

By scalable CSS, I mean CSS that is

  • capable of remaining effective, coherent, extendable, and maintainable as projects grow over time
  • capable of being understood and worked on by any number of different people in a consistent, systematic way

Included are resources that articulate key principles and practices. The list is restricted to the articles that I consider the most important to read -- that is, the best explanations (of which I'm aware) for different approaches to the problems.

If you know of a resource that should be added, please share! File an issue or a pull request.

(There are plenty of other problems related to CSS: understanding how it works, using specific properties, accomplishing specific styles, achieving responsive design, boosting performance, etc. This list is strictly focused on the problem of creating scalable CSS.)

None of the sections present any kind of "ranking" or "suggested reading order." Just read them all.

Articles

Newest on top, oldest on bottom. (A note for you outside the US: my dates are month/day/year format.)

Authoring Frameworks & Longer Readings

CSS Styleguides

These styleguides articulate conventions and guidelines for authoring scalable CSS.

(I'm distinguishing styleguides from what I would call pattern libraries, which are references created to document and exemplify existing styles rather than guidelines for the authoring of the styles. Other people often use the term styleguide to refer to both or either of these reference types. I think pattern libraries are less specifically about scalable CSS, and more about a scalable frontend design and development workflow; so I'm not including resources related to pattern libraries.)

Workflow Overviews

How we do CSS at [blank] ...

Articles providing overviews of real-life CSS methodologies for production sites and apps of significant scale. Although these articles generally don't include principles that are not better explained in the articles and longer reads above, they are so pragmatic and concrete that they are important reads in their own right. Newest first.

Talks

Newest first, I think.

Comments
  • Added Enduring CSS by Ben Frain to Longer Readings

    Added Enduring CSS by Ben Frain to Longer Readings

    Not sure how you feel about having books on here as I can't see any others but Ben has released a book recently that is aimed at tackling this problem.

    opened by dan-gamble 4
  • Respect and requests

    Respect and requests

    First (respect) : This is an awesome list. I've been referring to everything on this list for years. Thanks for organizing this on one place.

    Second (request) : This is more of a conversation starter than a request, but what do you think about having a "Beta" section. This repo might not be the place for it, but I think that there is some value to looking into the experimental/arguable stuff. For example, I came across AMCSS Introducing AM - Attribute Modules for CSS. I think that it's has been proven to be less performant, but the buzz around determining it's scalability was awesome. AMCSS Performance Discussion

    Here's another: DocCSSa

    I agree with all of the resources you have listed whole heartedly. I'm also gleaning a lot of information looking into the controversial and beta stuff too.

    I'm not trying to change things up, just wondering if a beta section would be a good idea.

    Stay awesome! Best regards,

    Ben

    opened by gandhiShepard 4
  • csstyle

    csstyle

    Would be curios to hear what you have to say about csstyle by @geddski. Looking at it, I think it's an incredibly powerful way to organize CSS in a way that scales.

    opened by kentcdodds 4
  • UCSS - Utility CSS

    UCSS - Utility CSS

    First of all... A very good work! Hope to see it growing.

    I've just made public a little project that I've made for fun called UCSS - Utility CSS. It would be great if you could add it to the list.

    opened by ruipenso 1
  • Add Roy Tomeij - Modular and Reusable Front End Code

    Add Roy Tomeij - Modular and Reusable Front End Code

    http://www.confreaks.com/videos/1256-rockymtnruby2012-modular-reusable-front-end-code-with-html5-sass-and-coffeescript

    THis is one of my favorite talks, mostly because Roy is hilarious and he refrences bob ross :)

    opened by karismatic-megafauna 1
  • Validate pull requests with Travis

    Validate pull requests with Travis

    Hello, I wrote a tool that can validate README links (valid URLs, not duplicate). It can be run when someone submits a pull request.

    It is currently being used by

    • https://github.com/vsouza/awesome-ios
    • https://github.com/matteocrippa/awesome-swift
    • https://github.com/dkhamsing/open-source-ios-apps

    Examples

    • https://travis-ci.org/matteocrippa/awesome-swift/builds/96526196 ok βœ…
    • https://travis-ci.org/matteocrippa/awesome-swift/builds/96722421 link redirected / rename πŸ”΄
    • https://travis-ci.org/dkhamsing/open-source-ios-apps/builds/96763135 bad link / project deleted πŸ”΄
    • https://travis-ci.org/dkhamsing/open-source-ios-apps/builds/95754715 dupe πŸ”΄

    If you are interested, connect this repo to https://travis-ci.org/ and add a .travis.yml file to the project.

    See https://github.com/dkhamsing/awesome_bot for options, more information Feel free to leave a comment :smile:

    opened by awesome-bot 0
Owner
David Clark
David Clark
Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects.

Extensible, scalable, Sass-based, OOCSS framework for large and long-lasting UI projects. inuitcss is a framework in its truest sense: it does not pro

inuitcss 1.8k Dec 30, 2022
Reseter.css - A Futuristic CSS Reset / CSS Normalizer

Reseter.css A CSS Reset/Normalizer Reseter.css is an awesome CSS reset for a website. It is a great tool for any web designer. Reseter.css resets all

Krish Dev DB 1.1k Jan 2, 2023
Spectre.css - A Lightweight, Responsive and Modern CSS Framework

Spectre.css Spectre.css is a lightweight, responsive and modern CSS framework. Lightweight (~10KB gzipped) starting point for your projects Flexbox-ba

Yan Zhu 11.1k Jan 8, 2023
Low-level CSS Toolkit – the original Functional/Utility/Atomic CSS library

Basscss Low-level CSS toolkit – the original Functional CSS library https://basscss.com Lightning-Fast Modular CSS with No Side Effects Basscss is a l

Basscss 5.8k Dec 31, 2022
Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation

Aphrodite Framework-agnostic CSS-in-JS with support for server-side rendering, browser prefixing, and minimum CSS generation. Support for colocating y

Khan Academy 5.3k Jan 1, 2023
CSS Boilerplate / Starter Kit: Collection of best-practice CSS selectors

Natural Selection Natural Selection is a CSS framework without any styling at all. It is just a collection of selectors that can be used to define glo

FrontAid CMS 104 Dec 8, 2022
Source code for Chrome/Edge/Firefox/Opera extension Magic CSS (Live editor for CSS, Less & Sass)

Live editor for CSS, Less & Sass (Magic CSS) Extension Live editor for CSS, Less & Sass (Magic CSS) for Google Chrome, Microsoft Edge, Mozilla Firefox

null 210 Dec 13, 2022
Easily create css variables without the need for a css file!

Tailwind CSS Variables This plugin allows you to configure CSS variables in the tailwind.config.js Similar to the tailwindcss configurations you are u

Mert Aşan 111 Dec 22, 2022
Cooltipz.css - A highly customisable, minimal, pure CSS tooltip library

Cooltipz.css - Cool tooltips Cool customisable tooltips made from pure CSS Lightweight β€’ Accessible β€’ Customisable β€’ Simple Cooltipz.css is a pure CSS

Jack Domleo 110 Dec 24, 2022
micro-library for CSS Flexbox and CSS Grid

SpeedGrid micro-library for CSS Flexbox and CSS Grid Overview SpeedGrid dynamically generates inline CSS by specifying the class name. Easy maintenanc

Toshihide Miyake 7 Mar 26, 2022
Data-tip.css - Wow, such tooltip, with pure css!

Notice: hint.css has been much better since I complained about it months ago, so try out its new features instead of this one! data-tip.css Wow, such

EGOIST 117 May 26, 2021
Tiny CSS framework with almost no classes and some pure CSS effects

no.css INTERACTIVE DEMO I am tired of adding classes to style my HTML. I just want to include a .css file and I expect it to style the HTML for me. no

null 96 Dec 10, 2022
The most popular HTML, CSS, and JavaScript framework for developing responsive, mobile first projects on the web.

Bootstrap Sleek, intuitive, and powerful front-end framework for faster and easier web development. Explore Bootstrap docs Β» Report bug Β· Request feat

Bootstrap 161k Jan 1, 2023
Modern CSS framework based on Flexbox

Bulma Bulma is a modern CSS framework based on Flexbox. Quick install Bulma is constantly in development! Try it out now: NPM npm install bulma or Yar

Jeremy Thomas 46.6k Dec 31, 2022
A utility-first CSS framework for rapid UI development.

A utility-first CSS framework for rapidly building custom user interfaces. Documentation For full documentation, visit tailwindcss.com. Community For

Tailwind Labs 63.5k Dec 30, 2022
Materialize, a CSS Framework based on Material Design

MaterializeCSS Materialize, a CSS Framework based on material design. -- Browse the docs -- Table of Contents Quickstart Documentation Supported Brows

Alvin Wang 38.8k Jan 2, 2023
Material Design Components in HTML/CSS/JS

Material Design Lite An implementation of Material Design components in vanilla CSS, JS, and HTML. Material Design Lite (MDL) lets you add a Material

Google 32.1k Jan 4, 2023
A set of small, responsive CSS modules that you can use in every web project.

Pure A set of small, responsive CSS modules that you can use in every web project. http://purecss.io/ This project is looking for maintainers to suppo

Pure CSS 22.7k Jan 3, 2023
Functional css for humans

TACHYONS Functional CSS for humans. Quickly build and design new UI without writing CSS. Principles Everything should be 100% responsive Everything sh

null 11.3k Jan 4, 2023