CCS

CCS, short for Cascading Code Sheets, is a CSS3-inspired programming language that allows for programmatical stylization, complete with event-driven code, conditional styles, and declarative programming. In the reference compiler, CCS produces JavaScript; however, compiling CCS will not always produce a single file, rather yielding two files- one CSS file and one JavaScript file- that enact the code in a good compiler.

Features

• Powerful animations (planned)
• Conditional stylization (planned)
• Event-driven programming (defined)
• Logical nesting (defined, at least in my head)
• Expressions (defined)
• Variables (defined)
• Saving rules into variables (defined)
• Importing, so files can be split (planned)

Syntax

Grammar (EBNF)

value ::= exp
        | exp PERCENT
        | exp VW
        | exp VH
        | exp SEC
        ;

var ::= DOLL NAME ;

lit ::= NUM
      | STR
      | COLOR
      | NONE
      ;

exp1 ::= exp PLUS exp
       | exp SUB exp ;

exp2 ::= exp STAR exp
       | exp DIV exp
       ;

exp ::= exp2
      | exp1
      | lit
      | var
      ;

alist ::= value
        | alist COMMA value
        ;

comma_sep_altexp ::= value
                   | comma_sep_altexp COMMA value
                   ;

selector ::= STAR  -- Any element
           | CARET  -- This element
           | NAME  -- Tag reference
           | DOT NAME  -- Class reference
           | HASH NAME  -- ID reference
           | selector COLON NAME [OPAREN alist CPAREN]  -- Pseudo-class
           | selector COLON COLON NAME [OPAREN alist CPAREN]  -- Pseudo-element
           | selector IMM_CHI selector  -- Immediate child selector
           | selector ADJ_SIB selector  -- Adjacent sibling selector
           | selector GEN_SIB selector  -- General sibling selector
           | selector ALT selector  -- Alternative selector
           | OPAREN selector CPAREN  -- Group selectors (for whatever reason)
           ;

style_type ::= NAME
             | NAME OPAREN alist CPAREN
             ;

stylize ::= style_type COLON comma_sep_altexp ;
trigger ::= style_type COLON rule
          | style_type COLON body
          ;
line ::= stylize SEMI
       | trigger SEMI
       ;
body ::= OBRACE {line} CBRACE;
rule ::= selector body ;
stmt ::= rule
       | NAME ASSGN rule
       | NAME ASSGN body
       | NAME ASSGN exp
       | NAME
       ;
stmts ::= {stmt SEMI} ;

Semantics

A CCS program is written in a declarative, event-driven syntax. Although it includes all the normal features of CSS, it also includes additional features that CSS has nothing even close to.

A CCS program, as you saw if you read the grammar, looks a bit like CSS. You can have rules of the following syntax:

selector {
    st1: v ;
    st2: va, vb, vc ;
};

(Note the difference from CSS with the trailing semicolon)

A selector follows a certain expression syntax which is virtually identical to CSS3's selectors (but with the additional combinator ALT, written "|", which allows you to alternate selectors. CSS3 may have this feature, I'm not sure).

The "stylations" as I like to call them- the things in the curly braces separated by semicolons- are where things really get interesting. In normal CSS3, a stylation declares that a certain aspect of a selected element's appearance has a certain value. Normally, the value is a number or special value triggered by a keyword. In CCS, the value can be those, or an expression, or even another rule. This is where the event-driven programming comes in.

Event-driven Programming

To make CCS do something event-driven, one gives an element a stylation mapping an event (usually created from an event template by postfixing it with a syntax like a normal language's function call) to an effect. The effect is, oftentimes, another rule. Here's an example:

red := {
    background-color: #FF0000
    on_click: $white;
};
white := {
    background-color: #FFFFFF;
    on_click: $red;
};
.swapcol white;

This creates a JavaScript file with the following effect:

• Any element with class "swapcol" has a white background initially
• When clicked, a "swapcol" element turns red (just that one element, not all of them) by changing its style to "red"
• The "red" style makes it so that, when clicked, it changes back to the initial "white" style