基於 CSS 的 Web 框架 CJSS

CJSS 是一個基於 CSS 的 Web 框架，全部效果都在 CSS 文件中生效，能夠在 CSS 中使用它添加更多功能，或者構建一個完整的頁面。

使用方法：

HTML

想要使用某個組件，在 CSS 文件中選擇它，而後添加 --html:(your markup here)；

h1 {
  --html:( This is a headline ); }

若是但願經過標籤產生效果，以下

<component>My Component</component>

component {
  --html:(
    <h2>${yield}</h2> <p>This is a component</p> ); }

就會呈現爲

<component> <h2>My Component</h2> <p>This is a component</p> </component>

JavaScript

若是想使用 JavaScript 從 HTML 中直接定義事物的行爲，在 CSS 文件中就能夠執行此操做。

.item {
  cursor: pointer;
  --js:(
    function toggle() { this.classList.toggle('active'); } this.addEventListener('click', toggle ); ); }

添加數據方法

使用 --data(key:[data]) 屬性

nav {
  --data:(
    name: ['one', 'two', 'three'], link: ['#one', '#two', '#three'], ); --html:( <a class="item" href="${data.link[0]}">${data.name[0]}</a> <a class="item" href="${data.link[1]}">${data.name[1]}</a> <a class="item" href="${data.link[2]}">${data.name[2]}</a> ); --js:(console.log(data)); }