Welcome to Active CSS!
Up to this point, CSS has been a tool for adding properties to objects on the web page, and a little bit of animation. But that's about it.
CSS is so easy that even non-programmers can understand the basics when they read it (if you ignore the hierarchical factors and the browser quirks). All the commands are one-liners and there is a lot less going on to worry about in comparison to a function or class-based programming language.
Another bonus is that CSS focuses your attention directly on the web page itself and doesn't let you meander in programming issues. You don't have to call up an API command just to attach a style (ie. getElementById, etc.). You just type in the selector and away you go. CSS is very direct in applying styling instructions to the web page.
Also, it is easy to customize CSS. You can copy/paste some code from codepen or CSS-tricks and tailor it for your needs. This is arguably easier than trying to tweak or extend a function-based plugin.
So how do you make CSS into a fully-fledged programming language?
Well, the first thing is to allow CSS to use all the browser events. The only event in CSS is the "hover" event. That isn't enough for interactivity. We need to at least allow for the "click" event. So let's add ":click", ":mouseover", etc. - all the browser events - following the existing syntax of ":hover".
Next is to add a target selector under the event, so if we click on something we can make something happen somewhere else. All actions on a web page are event-based and make things happen, so in theory this should be a very useful thing to have.
Ok - what would that look like? Let's see what would be the simplest way to have a button click that adds a class of "buttonHasBeenClicked" to the body tag using CSS syntax using a "target selector" underneath the "event selector":
Now we don't want any rules being overwritten or anything like that here. CSS only applies one style rule at a time and there can be a lot of mucking about trying to get a style to work sometimes. Every piece of code written in an event-driven programming language must be applicable, otherwise it's going to be unnecessarily complex. So let's remove the inheritance rules of static CSS to make coding a bit easier.
Next, create a bunch of higher-level commands to cater for common webpage actions, like "add-class", "remove-class" - commands like that that can directly manipulate the objects on the page - the elements (HTML tags) on the page.
Let's also integrate some tooling for making single-page applications based only on the front-end state and while we're at it let's try and get a simpler front-end web components solution too.
Most importantly the whole thing needs to work with native browser functionality so that when improvements are made to the browser everything still works. So web components need to work with regular shadow DOMs and we also cannot have a virtual DOM as that bypasses the inbuilt browser functionality. The DOM is already stored in memory - let's work with that.
But wait, there is one more thing. Programmers like to program commands to run one after another, in sequence. CSS commands are static. CSS commands are not designed to run in a particular sequence. Let's make a change here, just for Active CSS declarations. Let's make all the commands run sequentially if they appear in action declarations.
And voila! We have successfully turned CSS into a proper event-driven language designed specifically for browsers!
The good news is that the prototype can be used on real websites in a cross-browser way and is future-compatible, so that even if functionality does get implemented in the browser natively Active CSS should continue to work with your config predictably. It is a completely separate written language to CSS and not connected to the CSS rendering engine directly in any way. Essentially, if the command is found in Active CSS then it runs it there, otherwise it will try and run it as a regular CSS command.
Contribute via github if you want to get involved! Help is needed in the area of testing and suggestions if you get a great idea or if you think something can be done in a better or easier way.
(PS. If you think Active CSS is a cool idea, please consider giving it a star on github. It gives encouragement, gives the project more credibility, and lets us know people are interested. Thank you!)