近頃、俺jQuery（商標関係で何かあると厄介なので、以下、OreQuery）という、一周回って最高でファビュラスなDHTMLの書き方に帰結したのでまとめてみた。
OreQueryの概要
ライブラリではなく、あくまでDHTMLを構成する上での基本スタンス、心得。
OreQueryの理念
・jQueryは一切使わない
・jQueryの精神のみを全力でパクる
ようするに何がしたいか
・検知はjs、挙動はcssを基本とする
・「如何にcssを触るか」を念頭にjsを書く
・「如何にjsに触らせるか」を念頭にcssを書く
・cssまたはjsどちらかに（無駄に）偏重していないかを常に自己チェックする
OreQueryのスローガン
20世紀、それは産官学がしゃぶしゃぶ店員のお尻を触った時代。
21世紀、それはjsがcssを触る時代。
具体的テクニック
1. cssで親要素のclass名に基づいた子要素の状態を書いておき、jsで親要素のクラス名を替える。
2. cssでdisplay:none等の頻出な属性値に固有のclass名を割り当て、jsでそうしたい要素にそのclass名を当てる。
実装例
（2021/9 ..↓が余りにも煩雑なのでもっとシンプルな物を-->新記事でアップ<--しました。）
<!DOCTYPE html>
<html lang=ja>
<meta charset="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;cursor:pointer;}
#i12,#i13{top:0;margin-top:30px;height:calc(100% - 60px);width:40%;left:0}
/*1.OreQuery*/
/*1*/#i11,.c0 #i12,.c1 #i12,.c2 #i13,.c3 #i13{left:0}
/*1*/.c3 #i12,.c0 #i13{left:40%}
/*1*/.c2 #i12,.c1 #i13{left:60%}
/*1*/.c0 #i12,.c2 #i12,.c1 #i13,.c3 #i13{width:40%}
/*1*/.c1 #i12,.c3 #i12,.c0 #i13,.c2 #i13{width:60%}
/*2.状況説明（おまけ）*/
/*2*/.c2 #i11:before,.c3 #i11:before{content:'ピンクを'}
/*2*/.c0 #i11:before,.c1 #i11:before{content:'ブルーを'}
/*2*/#i11:after{content:'左に変えるには、ここをクリック。'}
/*2*/.c0 #i12:before,.c1 #i12:before,.c2 #i13:before,.c3 #i13:before{content:'左'}
/*2*/.c2 #i12:before,.c3 #i12:before,.c0 #i13:before,.c1 #i13:before{content:'右'}
/*2*/.c0 #i12:after,.c2 #i12:after,.c1 #i13:after,.c3 #i13:after{content:'狭くなっています。'}
/*2*/.c1 #i12:after,.c3 #i12:after,.c0 #i13:after,.c2 #i13:after{content:'広くなっています。'}
/*3.わかりやすいように色分け*/
/*3*/#i11{background:#cfc}#i12{background:#fcf}#i13{background:#cff}
@media only screen and (max-width:1024px){
#i1{top:5%;left:5%;width:90%;height:90%}
}/*width1024*/
@media screen and (orientation:portrait){
/*1.OreQuery*/
/*1*/#i11,#i1>#i12,#i1>#i13{left:0;width:100%}
/*1*/.c3 #i12,.c0 #i13{top:calc(40% - 30px)}
/*1*/.c2 #i12,.c1 #i13{top:calc(60% - 30px)}
/*1*/.c0 #i12,.c2 #i12,.c1 #i13,.c3 #i13{height:calc(40% - 30px)}
/*1*/.c1 #i12,.c3 #i12,.c0 #i13,.c2 #i13{height:calc(60% - 30px)}
/*2.状況説明（おまけ）*/
/*2*/.c0 #i12:before,.c1 #i12:before,.c2 #i13:before,.c3 #i13:before{content:'上'}
/*2*/.c2 #i12:before,.c3 #i12:before,.c0 #i13:before,.c1 #i13:before{content:'下'}
/*2*/#i11:after{content:'上に変えるには、ここをクリック。'}
}/*portrait*/
</style>
<meta name=viewport content="width=device-width,initial-scale=1,maximum-scale=1">
<body id=i0>
<ul id=i1 class=c0>
<li id=i11 onclick=tgc()>
<li id=i12 onmouseover=lw() ontouchmove=lw()>にあるピンクが<br>
<li id=i13 onmouseover=rw() ontouchmove=rw()>にあるブルーが<br>
</ul>
<script>
var c=0;
function tgc(){c=(c+2)%4;isc(1,c)}
function lw(){if(c%2==0){c++;isc(1,c)}}
function rw(){if(c%2){c--;isc(1,c)}}
function isc(n,v){id('i'+n).className='c'+v}
function id(n){return document.getElementById(n)}
</script>
JQueryと比較したメリット（使った事ないので、想像。）
- （おそらく圧倒的に）軽い。
- （〃）モバイルファーストで行き詰まらない。
- （〃）少ない知識で何でもできる。（一つのjsメソッドで多様なcssが実現できる。）
js偏重、css偏重と比較したメリット（実践してみての実感）
- （圧倒的に）コードが短くなった。
- （〃）挙動がファビュラスになった。
- （〃）モバイルファーストに抜け目がなくなった。
- （〃）可読性、メンテナンス性が改善した。
- （応用の繰り返しなので）js知識、css知識の幅が広がった。
副作用
- css偏重、js偏重の非合理で馬鹿馬鹿しい実装を俯瞰し、優越感に浸ってニヤニヤしてしまう。
- 自分のcss偏重、js偏重の黒歴史が恥ずかしくなる。