There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.

This may take a few seconds.


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. You can use Node, PHP, Laravel, or whatever you want on the back-end to produce your front-end HTML. Active CSS may or may not work with React or Vue as these use Virtual DOMs and so make memory copies of the DOM and these copies need to stay up to date or everything breaks. There is no solution planned to get Active CSS working with React, Vue or Angular as it would defeat the point of the project somewhat.

It is designed to be an expansion of CSS, and CSS lives only in the browser, so this is a front-end only solution and will remain so.

Is using Active CSS an all-or-nothing affair?

No, it doesn't do anything to the page unless you tell it to. It doesn't touch pre-rendered content. All your plugins should still work. It's like jQuery in this regard. You can just use features when you need them. Like you might load up jQuery and use it when you need to, you can do the same thing with Active CSS.

Why has no one thought of this before?

Possibly someone did think of it, but this is the first actual implementation. When I started on my first professional web project back in 2000, I had already been coding professionally for 12 years in various languages and I remember asking my colleague why CSS only had the hover event and got "CSS is just for styles - the clue's in the name", so I imagine that other people have had similar thoughts along these lines over the years. The web platform is fundamentally object-oriented. There are objects (HTML), that have properties (CSS styles), and some direct event manipulation (CSS hover and animation). Active CSS simply adds more direct events and methods (functions) to CSS than there are currently. CSS just needed the concept of a target selector for it to work.

Anyone extending CSS like this would have ended up with something that looked like Active CSS. It isn't actually that radical a concept.

When did this project start?

It began in October 2018 and work has been continuous on improving it since then.

The original point of the project was to build a framework that was easier to read and use than any other framework. The ultimate easy-to-code framework that would end the necessity for frameworks. Active CSS began with an analysis to find the quickest way to reference a DOM selector - just by looking at what would be the optimum syntax using no references to getting it working with JavaScript or anything else. It started out as just theory. Active CSS did not look much like CSS to begin with, but as prototypes were made it became obvious that code was looking more and more like CSS. The core has always been built with a syntax-first approach. CSS had proven to be the most direct way to affect a change on a page, so the decision was made early to fully go the CSS route and simply extend it. There was no intention to extend CSS at the very beginning. It just ended up going that way. CSS just happens to be the most direct syntax for the event-driven web platform and its objects, so that was the obvious route to take.

What is the developer experience like compared to JavaScript and other frameworks?

It is a more A to B method of coding, and makes it easier to work with events. This then encourages more creativity as it becomes quicker and easier to code things.

Imagine having to code all of your CSS styles with JavaScript alone, using = "green", etc. Websites of today would look pretty boring - nobody's got time for a lot of tweaking with code like that. Styling frameworks would be in use in companies today if CSS didn't exist. But CSS ultimately does a fine job by itself, and holds its own as an industry standard. Of course, SCSS builds on CSS syntax on the server and can speed up static CSS development when used appropriately, as can other shorthand-style frameworks.

Active CSS takes working with web pages to the next level on the front-end by employing the most direct method to add events and actions. CSS is high-level - the most direct way of targeting the browser objects. JavaScript is a low-level API through which elements can be addressed. Most JavaScript frameworks are barely higher-level than JavaScript, being limited in syntax design to an enforced functional structure, and some frameworks are even harder to use than native JavaScript. Events (the backbone of UI) often takes a back-seat or complex role in these frameworks. And more often that not one needs a computer science degree just to look at the documentation.

Simply put, native JavaScript is easily the most flexible "framework" there is. You can do anything with it. Anything at all. It doesn't need a replacement. JQuery was popular as there was simply less typing involved and made it easier to work with elements across browsers. JavaScript still does need something higher-level as there is a lot of typing and complexity involved sometimes to do things. CSS took over animation from JavaScript and made it quicker and easier, so can it take on a lot more?

With regular CSS, styles usually apply to the same element. Through the addition of a target selector, Active CSS expands CSS to being full "cause and effect". It can now affect other elements than itself. The simple power and potential of CSS syntax is in this direct "cause and effect" nature. This is the essence of being A to B when coding. Eg. you want the body text color to be blue? Ok - "body { color: blue; }". There isn't any more thought involved in that if you have your CSS organised well.

Additionally, any specific piece of functionality could be turned into a one-liner CSS command. Any specific piece of functionality. It doesn't even have to apply to the internet. Plenty of other environments are "cause and effect". "kettle: on; kettle: off; steer: left 20%;". CSS syntax can work pretty much anywhere where there is a specific thing that needs doing. Its potential to make easy, higher-level languages possible for different environments is probably pretty high. That's all higher-level languages do anyway - they build a bunch of complexity into a single function so there is less to type and so that it doesn't take forever to code everything from scratch. With that in mind, a framework that doesn't provide higher-level commands to the native version isn't really making things any easier for you, is it?

If you took the time to become an expert in Active CSS, you would find that you wouldn't have to think so much when you are coding certain things. It's a similar feeling to tweaking CSS - once you really know the Active CSS commands. It's a more A to B style of coding and so leaves you with more time to think of more challenging things to build.

Think of Active CSS as an extension of CSS. It isn't supposed to be a replacement for JavaScript. It offers some higher-level solutions to make some things easier, so you don't have to code in JavaScript so much.

Is this a real language?

Yes. But it is not function-based like JavaScript or other frameworks. It mirrors the event-driven nature of the web platform and is therefore more direct, like CSS. Hence, there is less code to write and it is a quicker and more intuitive way to code events and actions. It removes some of the complexity of having to write certain things with the lower-level JavaScript API. It is a custom built language designed solely for building websites. Languages tend to be more flexible than frameworks. Ease of use in a language is really determined by how high-level the commands are and whether they can handle scenarios in an easy way without a lot of mucking about. Frameworks are restricted to the context of the language they are written in, and so it's sometimes harder to get the right level of flexibility and functionality while remaining easy to develop in.

Active CSS is a high-level, extendable language that could potentially be merged into the browser and that provides a way for developers to extend the language and add new commands themselves. With this strategy of incremental improvement in the browser platform, then rather than starting afresh with learning a new language every decade, developers can build on the skills they learn rather than retraining from scratch or turning into unemployable coding dinosaurs. Do you want to be regarded as a master craftsman, or an irrelevant dinosaur by the middle of your career? Would you rather be spending a substantial amount of your time learning new things because the old way isn't good enough any more or just getting on with your work?

That solution though will only work if Active CSS becomes an approved W3C spec. It is early days though, and core functionality is still being added to Active CSS. A proper spec will be submitted to the W3C at some point, when features are seen to be justified.

Why is there no Virtual DOM? Doesn't that make things slower?

No, it shouldn't be any slower. Active CSS targets specific node locations of reactive variables on the page. It is more A to B in updating specific content areas. Variables are mapped to specific text nodes within elements and those nodes simply get updated when a variable changes. Those nodes need to get updated anyway even if a Virtual DOM is employed. The direct referencing of those nodes means that no diffing of content is required before updates occur. The point is for Active CSS to work with the DOM and not take it over.

A benefit of not using a Virtual DOM is that Active CSS and your plugins will work dynamically with the DOM in the state it is in at any one time. This removes a whole bunch of development complexity and means additionally that you are free to use JavaScript plugins as you would without a framework. All your cool, awesome plugins that you used to use from way-back-when should work seamlessly with Active CSS.

Why isn't the logo in shield-style like HTML, CSS and JS?

This is just a plugin, not native technology. It should be treated like a plugin with its own logo.

Can I get involved or make suggestions?

Yes - just go to the discussions section on the github page and strike up a conversation.