CJSS基于 CSS 的 Web 框架

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));

}

框架案例

• https://codepen.io/ekwonye/full/QXEzZv


• https://codepen.io/scottkellum/pen/WqwjLm