Quantcast
Channel: CSSタグが付けられた新着記事 - Qiita
Viewing all articles
Browse latest Browse all 8652

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

$
0
0

近頃、俺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名を当てる。

実装例

<!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>

https://4indies.com/oq1

JQueryと比較したメリット(使った事ないので、想像。)

  1. (おそらく圧倒的に)軽い。
  2. (〃)モバイルファーストで行き詰まらない。
  3. (〃)少ない知識で何でもできる。(一つのjsメソッドで多様なcssが実現できる。)

js偏重、css偏重と比較したメリット(実践してみての実感)

  1. (圧倒的に)コードが短くなった。
  2. (〃)挙動がファビュラスになった。
  3. (〃)モバイルファーストに抜け目がなくなった。
  4. (〃)可読性、メンテナンス性が改善した。
  5. (応用の繰り返しなので)js知識、css知識の幅が広がった。

副作用

  1. css偏重、js偏重の非合理で馬鹿馬鹿しい実装を俯瞰し、優越感に浸ってニヤニヤしてしまう。
  2. 自分のcss偏重、js偏重の黒歴史が恥ずかしくなる。

Viewing all articles
Browse latest Browse all 8652

Trending Articles



<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>