css language architecture

css-language-architecture.md

CL - CSS Language

.A {  // class A 

  // initialize 
  
  // private
   --value: 10;
   
   background-color: red; 
   color: rgba(var(--value, 255), 255, 255, 0.1);
   
   // new layer with layer class 
   .layer {
      height: 100px;
      width: 200px;
   }
   #my-layer {
    background-color: yellow;
    
    [onClick] { e => 
      background-color: red;
    })
   }
   
   
}

result

class A {
    '.layer': new Layer();
    '#my-layer' : new MyLayer();
}

class MyLayer {
  onClick: (e) => {
    this.$el.cssText`
      background-color: red;
    `
  }
}

<div class="A">
  <div class="layer"></div>
    <div id="my-layer></div>
</div>