　　　近頃、俺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偏重の黒歴史が恥ずかしくなる。