CBS files

CBS (Cascading Behaviour Sheet) file make creating prototypes, transfer to development and maintenance of the entire cycle easier by offloading the Patterns configuration from the markup into a file.

Patterns will look for a linked CBS file in the head section of the HTML file and parse it.

<script 
    type="text/behavioursheet" 
    href="/assets/script/all.cbs"></script>

The syntax above is up for discussion.

Example

Consider the following Pattern declaration:

<div 
    id="portal">
    <a 
        href="document.html"
        class="pat-inject pat-switch document-preview"
        data-pat-inject="history: record; source: #app-space; target: #app-space;"
        data-pat-switch="selector: #app-space; remove: state-off; add: state-on;">Document</a>
</div>

With a CBS file attached, instead the HTML could be reduced to:

<div 
    id="portal">
    <a 
        href="document.html"
        class="document-preview">Document</a>
</div>

And the behaviour would be declared in the CBS file as follows:

#portal a.document-preview {
  @pattern inject {
    history: record;
    source: #app-space;
    target: #app-space;
  }

  @pattern switch {
    selector: #app-space;
    remove: state-off;
    add: state-on;
  }
}

Notice that with the #portal in the example, a different behaviour — such as a different injection target — could be configured for the same component when it lives in a different context. This way both the designer and the developer require less conditions in their code to let component's behaviour differ in various context.

Nice to haves

Things that are absolutely not necessary for a first version of the standard, but that could be nice for future iterations.

Cascading behaviour

For instance being able to assign basic behaviour to an A tag.

a {
  @pattern inject {
    history: record;
  }
}

And enrich for more specific tags:

a.internal-document {
  @pattern inject {
    source: #document-area;
    target: #document-area;
  }
}

Override CBS file declaration with inline declarations

It would be nice if inline (data-pat-something) declaration would take preference over ones declared under a matching selector in the CBS file. Ideally on the property level, but even if any inline declaration would reset and override the entire declaration for that matching element in the CBS file.