Cascade Functioning Sheets Syntax reference

Behaviors

CFS is written as behaviors with element selectors, similar to CSS. You can add functionality to your elements by creating behaviors and add nested behaviors for nested elements.

behavior .card {
  title: "Hello";
  @aria-label :< title;

  construct { }
  on click() { title = "Clicked"; }

  behavior > .icon {
    on click() { title = "Icon click"; }
  }
}

Behavior Anatomy

Behaviors have a strictly enforced structure: declarations, blocks and then nested behaviors.

Declarations

• State declarations use name: value;
• Bindings use : := :< :>
• Declarations must come before construct / on / nested behavior

Blocks

• construct { }
• destruct { }
• on event() { }
• myFunction(argument) { }

Nested Behaviors

Nesting behaviors gives you the ability to share state and functionality within a group of elements.

behavior #product-filters {
  filters: [];

  toggleFilter(filter) {
    index = filters.indexOf(filter);
    if (index > -1) {
      filters.splice(index, 1);
    } else {
      filters.push(filter);
    }
  }

  behavior .filter {
    @aria-active = filters.indexOf(@data-filter) > -1;

    on click(event) {
        toggleFilter(@data-filter);

    }
  }

  behavior .clear-filters {
    on click(event) {
        filters.length = 0;
    }
  }
} 

Operators

count += 1;
ready = count > 2 ? true : false;
title = name ?? "Untitled";

Reserved keywords

behavior, on, construct, destruct, use, if, for, while, try, catch, return

Notes from the creator

The syntax is intuitive once you stop thinking about it.