【css,js】俺queryという方法論

近頃、俺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>