近頃、俺jQuery（商標関係で何かあると厄介なので、以下、OreQuery）という、一周回って最高でファビュラスなDHTMLの書き方に帰結したのでまとめてみた。
OreQueryの概要
ライブラリではなく、あくまでDHTMLを構成する上での基本スタンス、心得。
OreQueryの理念
・jQueryは一切使わない
・jQueryの精神のみを全力でパクる
ようするに何がしたいか
・検知はjs、挙動はcssを基本とする
・「如何にcssを触るか」を念頭にjsを書く
・「如何にjsに触らせるか」を念頭にcssを書く
・cssまたはjsどちらかに（無駄に）偏重していないかを常に自己チェックする
OreQueryのスローガン
20世紀、それは産官学がしゃぶしゃぶ店員のお尻を触った時代。
21世紀、それはjsがcssを触る時代。
具体的テクニック
- cssで親要素のclass名に基づいた子要素の状態を書いておき、jsで親要素のクラス名を替える。
- cssでdisplay:none等の頻出な属性値に固有のclass名を割り当て、jsでそうしたい要素にそのclass名を当てる。
実装例
<!DOCTYPE html><htmllang=ja><metacharset="UTF-8"><style>html{margin:0;padding:0;border:none}*{transition:.7s;box-sizing:border-box}ul{list-style:none}#i1{position:fixed;top:calc(50%-200px);left:calc(50%-300px);width:600px;height:400px}#i1>li{position:absolute;font-size:15px;line-height:30px}#i11{top:0;width:100%;height:30px;z-index:2}#i12,#i13{top:0;margin-top:30px;height:calc(100%-60px);width:40%;left:0}/*OreQuery*/#i11,.c0#i12,.c1#i12,.c2#i13,.c3#i13{left:0}.c3#i12,.c0#i13{left:40%}.c2#i12,.c1#i13{left:60%}.c0#i12,.c2#i12,.c1#i13,.c3#i13{width:40%}.c1#i12,.c3#i12,.c0#i13,.c2#i13{width:60%}/*状況説明（おまけ）*/.c2#i11:before,.c3#i11:before{content:'ピンクを'}.c0#i11:before,.c1#i11:before{content:'ブルーを'}#i11:after{content:'左に変えます。'}.c0#i12:before,.c1#i12:before,.c2#i13:before,.c3#i13:before{content:'左'}.c2#i12:before,.c3#i12:before,.c0#i13:before,.c1#i13:before{content:'右'}.c0#i12:after,.c2#i12:after,.c1#i13:after,.c3#i13:after{content:'狭くなっています。'}.c1#i12:after,.c3#i12:after,.c0#i13:after,.c2#i13:after{content:'広くなっています。'}/*わかりやすいように色分け*/#i11{background:#cfc}#i12{background:#fcf}#i13{background:#cff}@mediaonlyscreenand(max-device-width:1024px){#i1{top:5%;left:5%;width:90%;height:90%}}@mediascreenand(orientation:portrait){#i11,#i1>#i12,#i1>#i13{left:0;width:100%}/*OreQuery*/.c3#i12,.c0#i13{top:calc(40%-30px)}.c2#i12,.c1#i13{top:calc(60%-30px)}.c0#i12,.c2#i12,.c1#i13,.c3#i13{height:calc(40%-30px)}.c1#i12,.c3#i12,.c0#i13,.c2#i13{height:calc(60%-30px)}/*状況説明（おまけ）*/.c0#i12:before,.c1#i12:before,.c2#i13:before,.c3#i13:before{content:'上'}.c2#i12:before,.c3#i12:before,.c0#i13:before,.c1#i13:before{content:'下'}#i11:after{content:'上に変えます。'}}</style><metaname=viewportcontent="width=device-width,initial-scale=1,maximum-scale=1"><bodyid=i0><ulid=i1class=c0><liid=i11onclick=tgc()><liid=i12onmouseover=lw()ontouchmove=lw()>にあるピンクが<br><liid=i13onmouseover=rw()ontouchmove=rw()>にあるブルーが<br></ul><script>varc=0;functiontgc(){c=(c+2)%4;isc(1,c)}functionlw(){if(c%2==0){c++}isc(1,c)}functionrw(){if(c%2){c--}isc(1,c)}functionisc(n,v){id('i'+n).className='c'+v}functionid(n){returndocument.getElementById(n)}</script>JQueryと比較したメリット（使った事ないので、想像。）
- （おそらく圧倒的に）軽い。
- （〃）モバイルファーストで行き詰まらない。
- （〃）少ない知識で何でもできる。（一つのjsメソッドで多様なcssが実現できる。）
js偏重、css偏重と比較したメリット（実践してみての実感）
- （圧倒的に）コードが短くなった。
- （〃）挙動がファビュラスになった。
- （〃）モバイルファーストに抜け目がなくなった。
- （〃）可読性、メンテナンス性が改善した。
- （応用の繰り返しなので）js知識、css知識の幅が広がった。
副作用
- css偏重、js偏重の非合理で馬鹿馬鹿しい実装を俯瞰し、優越感に浸ってニヤニヤしてしまう。
- 自分のcss偏重、js偏重の黒歴史が恥ずかしくなる。