HTMLをJSON で表現できる下のような書式を考えてみたが

HTML 開発

上のようなHTMLをJSON で表現できる下のような書式を考えてみたが、
やっぱり読みにくいなーって思ってしまった

書式の目的は HTMLテンプレートを バニラなJavaScript で操作できら、
便利だろうと思ったからだ

まあこんなものか

<div class="row">
  <div class="col-12 text-center">
    <div class="ib size-4 text-left">
      <div class="col-12">
        <label>Username</label>
        <input type="text" name="username">
      </div>
    </div>
  </div>
</div>

var templ = {
  "#center-left":
    ["div", { "class": "row" }, [
      ["div", { "class": "col-12 text-center" }, [
        ["div", { "class": "ib size-4 text-left" }, [
          ["div", { "class": "col-12" }, [
            ["label", { "class": "col-12" },
              "Username"
            ],
            ["input", { "type": "text", "name": "username" },
              null
            ]
          ]]
        ]]
      ]]
    ]]
};