There are no tracking or monitoring cookies on this site. There are only cookies used for documentation examples related to cookies.Close
This may take a few seconds.

HTML Blocks

Components in Active CSS are html blocks that are generated on the front-end, in the browser.

These are then remembered internally, and you can display them when you like.

You can use components to do lot of things. The code editor used on this website was made by using components. There is no fixed best practice as to how Active CSS components should be used - there are just techniques you can use to create them. The techniques that you end up using really depends on what you want to do with components. You could build an awesome SPA website with zero components. Components are not essential for any website, but they can come in handy when it makes sense to use them. It isn't necessarily recommended that you build your whole website using components. It can make your code more complicated than it needs to be and slow your development. It can even slow up your website and make it feel clunky as things get incrementally drawn on the page. If, however, you are building a massive social networking app that needs to rendered totally on the front-end with minimal server traffic to save money and bandwidth, or employ a thousand coders all making different parts of the same page so that you need isolated components, then doing all your rendering with components on the front-end can make sense.

All components in Active CSS follow the same format.

Let's start with a basic component.

To create a component, you use the @component syntax.

@component helloWorld {
html {
<p>Hello world</p>

HTML blocks always go into the "html" section in components as above.

This component can then be displayed using the pipe operator "|" like this:

button:click {
#myContainer {
render: "{|helloWorld}";

The contents of the component will then be displayed.

In the #myContainer element, this then produces:

Hello world

That is the basic way to create a component.