Welcome to Active CSS!
Hmm... so do we really need so much additional coding, for basic interactivity? We don't need it for ":hover" - that's a CSS event. Is there a quicker way to add an actual DOM event listener just by utlising the shorter CSS syntax? And then what - what would the syntax look like after that, when we actually want to do things in the event listener?
CSS is mostly easy to read, with the exception of some of the more modern and complex commands. Even non-programmers can understand a lot of the commands when they read it. When the CSS commands are one-liners, there is a lot less going on to worry about in comparison to a function or class-based programming language.
A 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.
Things only get difficult, these days, when the CSS points system ("specificity") is involved (you didn't know what that was either? You are not alone!). Actually, the CSS points system doesn't exist in this experimental branch of CSS, because you don't need a points system for a programming language.
So how do you make CSS into a fully-fledged programming language?
Any additions to CSS syntax would need to stay compatible with existing CSS syntax, for a start.
With that in mind, the first upgrade 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.
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.
Ok - so what would that look like following the basic principles of CSS syntax? Let's work out 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":
That appears to be a sensible way to do this. You have the "event selector" at the top, which uses the click event itself (with the same syntax as :hover), and then inside that we place a "target selector" - the element that we want to change when the click event happens. That event can just sit there waiting for something to happen, just like CSS. It needs a little shift in developer viewpoint to fully understand this, but it is essentially a simple concept. Regular CSS syntax applies for selectors, and all the native event bubbling rules for elements are still relevant, and there is a bonus of event listener handling being done automatically in the background.
Just this concept alone would be a major enhancement for CSS if it was ever introduced into the browser. It opens up huge possibilites for CSS.
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 points system of static CSS to make coding a bit easier and make every command count.
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. We currently use frameworks to handle a lot of this stuff. Could an enhanced CSS syntax also handle that?
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!
Everything documented on this site works in the test cases that it has been used on. It does need more testing, as only a few people are actively working with it, but results are looking good so far. There are a lot of features currently in ACSS that would be great if introduced right now into the wild, in the browser itself. Some others need further refinement.
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!)