• Stars
    star
    1,534
  • Rank 30,498 (Top 0.7 %)
  • Language
  • Created about 10 years ago
  • Updated 5 months ago

Reviews

There are no reviews yet. Be the first to send feedback to the community and the maintainers!

Repository Details

Collected dispatches from The Quest for Scalable CSS

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.

More Repositories

1

react-aria-modal

A fully accessible React modal built according WAI-ARIA Authoring Practices
JavaScript
1,036
star
2

react-aria-menubutton

A fully accessible, easily themeable, React-powered menu button
JavaScript
456
star
3

no-scroll

Disable scrolling on an element that would otherwise scroll
HTML
245
star
4

react-aria-tabpanel

A fully accessible, extravagantly flexible, React-powered Tab Panel component
JavaScript
121
star
5

list-selectors

List the selectors used in your CSS. Use as a standalone function, CLI, or PostCSS plugin.
JavaScript
97
star
6

react-displace

A higher order component that displaces your component into a remote region of the DOM
JavaScript
51
star
7

jquery.cssAnimateAuto

A jQuery plugin that uses CSS transitions to animate an element's height or width to auto.
JavaScript
50
star
8

focus-group

Create a group of nodes with special focusing powers
JavaScript
45
star
9

postcss-simple-extend

A PostCSS plugin for extending placeholder selectors
JavaScript
34
star
10

stylelint-checkstyle-formatter

Output Checkstyle XML reports of stylelint results
JavaScript
16
star
11

stylelint-statement-max-nesting-depth

A stylelint custom rule to limit nesting depth
JavaScript
14
star
12

teeny-tap

Listen for both clicks and click-like touches (not scrolls or drags)
JavaScript
13
star
13

postcss-log-warnings

Log PostCSS warnings in the console
JavaScript
13
star
14

grunt-spritesmith-hd

An adaptation of grunt-spritesmith to produce hd-ready sprites
JavaScript
10
star
15

locate-chrome

Locate the Google Chrome browser on your system
JavaScript
10
star
16

gifs

Some gifs
8
star
17

jquery.animateAuto

A jQuery plugin for using jQuery animation to animate an element's height or width between something and `auto`.
JavaScript
7
star
18

style-search

Search CSS(-like) strings
JavaScript
7
star
19

babel-plugin-transform-syntax-highlight

Perform syntax highlighting of string and template literals during Babel compilation, rather than at runtime
JavaScript
5
star
20

remark-preset-davidtheclark

My remark preset, for keeping Markdown documentation tidy.
JavaScript
4
star
21

react-rootless-state

A React state container that lives outside the component tree
JavaScript
4
star
22

js-automation-examples

JavaScript
3
star
23

postcss-simple-mixin

A PostCSS plugin that can clone declarations from abstract definitions into any rule sets that follow
JavaScript
3
star
24

turborepo-jest-test

TypeScript
2
star
25

babel-plugin-transform-markdown-in-jsx

Transform Markdown inside JSX to DOM elements at compile time
JavaScript
2
star
26

unfinishedToggler

A simple style-agnostic jQuery-based plugin for toggling groups of elements on and off.
JavaScript
1
star
27

gentlereader

The Gentle Reader
JavaScript
1
star
28

locate-safari

Find Safari on your system
JavaScript
1
star
29

locate-firefox

Find Firefox on your system
JavaScript
1
star
30

eslint-config-davidtheclark-node

My ESLint config for Node (v4+)
JavaScript
1
star
31

locate-ie

Approximates the current location of Internet Explorer on your system
JavaScript
1
star
32

stylelint-html

Experiment
1
star