CSSでウェブページのすべてを構築できるCJSS

基本的に私たちはHTMLというファイルのbody内にウェブページに表示されるコンテンツ呼ばれるものを書いていきます。
それは文章だったり、画像だったり
HTMLのマークアップも、データも、そしてJavaScriptもCSSファイルに記述するCSSベースのフレームワークを紹介します。

かなり特殊なフレームワークです。body内にHTML要素を一切記述したくない時にいいかもしれません。
(あまりないかもしれませんが…)

CJSSとは？

CJSSは先ほども説明したとおりデータはもちろんのこと、HTMLマークアップやスクリプト、スタイルシート部分も含めてすべてcssで構築する
フレームワークを。

CJSSの公式サイトではもちろんすべてがCSSで作成されています。
ちょっと覗いてみてください。え！？ほんとに！？
HTMLとCSSとJS使ってるんじゃないのって思うくらいです笑
面白いですよね！
【URL】https://cjss.js.org/

CJSSの使い方について

まず、CJSSのJSを外部ファイルとして読み込みます。

head内に記載すればOKです！
ちなみにCDNもあるので

<head>
  <script src="cjss.min.js"></script>
  //指定したディレクトリでURL指定してくださいね！
</head>

HTMLを記載する必要はなく、CSSファイルに要素を記載していきます。

h1 {
  --body: html(
    ここにh1に記述する内容が入る。
  );
}

以下のようにコンポーネントの実装も可能です。

<component>My Component</component>

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

CJSSでjavascriptを記述するときは以下のように記述します！
これで完了です♪


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