Patterns for building simple Event-Driven Virtual Stylesheets. 100% CSS, plus the expressive power of JavaScript!
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!)
- Container Queries with JS-in-CSS in IE8
- Container Queries with JS-in-CSS in IE7
- Container Queries with JS-in-CSS in IE6
- Cascading JS Variables
- Container Queries Mixin (stylesheet version with
$this, functions as tests) - reproCSS/ancestor-selector
- reproCSS/aspect-ratio
- reproCSS/auto-expand
- reproCSS/closest-selector
- reproCSS/container-queries (rule version, strings as tests)
- reproCSS/elder-selector
- reproCSS/parent-selector
- reproCSS/prev-selector
- reproCSS/scoped-eval
- reproCSS/xpath-selector
- respec
Simple JSinCSS pattern with add, remove, and debounce functions
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
Scope $this in an external stylesheet to a selector (and events)
Interpolate JS anywhere in CSS with ${} inside <style> innerHTML and <link rel=stylesheet href>
CSS with JS interpolation using ${} written using external stylesheets (authored as CSS)
Add JavaScript tests to <link> tags to toggle stylesheets