FAQ
Can I use this in my WordPress website?
Yes, go for it. Your users will appreciate the increase of speed and the more technically-minded will wonder how your site loads so fast. (You might want to lazy-load those images as well, if performance is a thing for you.)
Can it replace all my WordPress plugins? I've got hundreds of them.
Yes, you could - it would give your website a massive speed boost. It might not be practical to rewrite everything though.
Does it work on regular websites? I'm not building an SPA...
Yes, you can use it like you would jQuery or regular JavaScript. Just import the script and start coding. It won't interfere with anything, and the start-up speed is very fast.
You can use it with whatever back-end framework you like, like Laravel or Node. But it won't play well with a virtual DOM framework, as those tend to take over your browser environment and won't like the interference from ACSS. More friendlier non-virtual DOM frameworks or plugins should play nicely with it.
Can I use Active CSS with raw JavaScript, even if I change the DOM from my JavaScript?
Yes. ACSS will run dynamically with the DOM at any given time or state.
I've written a bunch of standard web components in JavaScript. Will ACSS work alongside them?
Yes, it works alongside standard HTML, CSS and JavaScript.
Does Active CSS require any special server setup, Node, etc.?
All you need to code and run Active CSS is a text editor and a browser. It doesn't need any special server setup. It doesn't require any pre-processing steps. It doesn't compile to raw JavaScript. Your ACSS code loads into the core at runtime and runs dynamically when required.
It is a front-end only plugin. Ie. all you need to do is put the script tag into the page, and either embed your ACSS in a special style tag (with type="text/acss"), or load up your ACSS code following the instructions on the installations page. If embedded in a style tag, your events appear and disappear just like styles do in CSS.
If I have a lot of events, does it make many event listeners?
No. If you had a hundred click events on a thousand elements, the ACSS core has only created one window-level click event in total. Internally it quickly works out what to do with the click. There is a custom-built DOM climber in the core which handles inherited events on parent elements.
Does ACSS use a Virtual DOM?
No. Active CSS is designed to work dynamically with the DOM in the state it is in at any given time, regardless of which script made the change. Virtual DOMs can't do that.
Does Active CSS handle the back-end as well as the front-end?
Active CSS is designed to work on the front-end only. You still need a back-end of some kind to provide your HTML, even if it is just there to host your HTML files, like a hosted server or CDN. If you need a dynamic site, you can use Node, PHP, Laravel, or whatever.
Is using Active CSS an all-or-nothing affair?
No, you could use it just for specialised tasks. It will sit there and do nothing unless you write events for it.
Which tools were used to build the ACSS language, in terms of lexer, parser, etc.
ACSS was built from scratch in JS without following any formal language design methodology. No third-party language building tools were used, and the architecture was designed as it was required. Performance has been the overriding strategy, in terms of architectural decision-making. There are a couple of open-source modules bundled into the core — some functions ripped out and modified from lodash, and a tailored version of the observableslim plugin.
Why has no one thought of this before?
Someone said "CSS is just for styling", and that was the end of that.
What is the developer experience like compared to JavaScript and other frameworks?
It is very satisyfing experience to write a whole website's UI and only have one script tag in the HTML - the ACSS core.
If you enjoy coding styles in CSS, you should find coding in ACSS more enjoyable than doing the same thing in JavaScript, because it's quicker to write and easy to organize.
Does it work with Tailwind?
If you insist on using Tailwind... then yes, ACSS does work with Tailwind.
Is this a real language?
Yes. It's an actual realtime language running in the browser. It was written in JavaScript and lives in the file that you put into a script tag on your page.
Why is there no Virtual DOM though? Doesn't that make things slower?
No. Manual DOM manipulation takes less CPU cycles than a virtual DOM framework, so it computes faster. Plus, Active CSS makes targeted DOM updates rather than diffing the whole component, which is also faster than using a virtual DOM because it isn't having to compare lots of nodes to perform updates.
Do you have so many areas on the page that constantly require updates that it would be a complete nightmare to handle them all manually? If so, then a virtual DOM framework can make sense. If it's just a website and not a social networking app, then there isn't a technical argument for using such a framework.
You would possibly be amazed how much more performant it is to just hide and show HTML when you need it, as opposed to constantly destroying and recreating the same content when it is needed on a page. HTML has a very small memory footprint.
Are there any commercial websites in the wild that use Active CSS?
Below are a couple SPAs of note, based in the UK, that use solely ACSS on the front-end and no other JS - these do show off the speed and power of ACSS:
https://whiteline.co.uk (click on "the installer's website" to access the site that uses ACSS.)
https://teamframes.com
If you have written a website that only uses ACSS, send in a link for it and if it's a good example we'll put it here.
Can I get involved or make suggestions?
Yes - just go to the discussions section on the github page and strike up a conversation.
How can I help?
Use it on personal or work projects. It is a useful plugin and it's fun to use after you have learned the syntax.
Please file bug reports if you see anything unexpected - all known bugs get fixed prior to the next release.
Suggest new functionality...
Give it a star on GitHub!