A Pattern for simple Event-Driven Virtual Stylesheets: 100% CSS plus the expressive power of JavaScript
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
tests
LICENSE
README.md
js-in-css.js
mixin.js

README.md

JS-in-CSS Patterns

Patterns for building simple Event-Driven Virtual Stylesheets. 100% CSS, plus the expressive power of JavaScript!

In this repository

There is a simple JS-in-CSS pattern that can be used for writing individual event-driven virtual stylesheets. You can write CSS code, as well as include JS template string interpolation to compose stylesheets, and trigger recalculations of those stylesheets by listening to JavaScript events.

In addition to writing stylesheets, since you can interpolate JavaScript at any point inside the virtual stylesheet you are able to easily extend your expressive ability by writing JavaScript functions that return CSS code as strings (sometimes in addition to doing other things). I call this writing 'mixins', and there is a very basic mixin pattern included here as well that forms the base of many useful mixins listed below.

Last, to demonstrate some ways in which the JS-in-CSS patterns for writing event-driven virtual stylesheets can be used together with mixins to extend CSS's styling ability I've included a modern container queries demo page that shows off a wide variety of tests that are useful for styling:

And to prove how simple and flexible these patterns are, I've included examples of JS-in-CSS patterns written for legacy versions of IE, demonstrating that this way of building sites has been possible for a long time already and doesn't rely on new features such as Resize Observer or Houdini to achieve (though they will offer some amazing improvements some day!)

Compatible Mixins

Similar JS-in-CSS Patterns

PrinCSS

Simple JSinCSS pattern with add, remove, and debounce functions

reproCSS

A JavaScript plugin that adds a process="" attribute to <style> tag in HTML, and makes it easy to reprocess JS-in-CSS on specific JavaScript events

Skopein

Scope $this in an external stylesheet to a selector (and events)

interpolate ${} in CSS

Interpolate JS anywhere in CSS with ${} inside <style> innerHTML and <link rel=stylesheet href>

JIC

CSS with JS interpolation using ${} written using external stylesheets (authored as CSS)

Slinky

Add JavaScript tests to <link> tags to toggle stylesheets

More Resources