またWebに興味がない

今、あまりWebに興味がない。
とりあえずWebの情報は惰性で追ってて、最近Compass 1.0やSass 3.4がリリースされたので「触ろう」と思いつつ、やっぱり興味がでない。

定期的にやってくるものなので、またそのうちWebの遊びができて興味が出てくるはず。

とりあえず今は、モンハン4Gが楽しみでしょうがない。

CSSのセレクタについて

CSSのセレクタは、料理の材料に例えると分かりやすいじゃないかと思った。

例えば、「.じゃがいも」

.じゃがいもは、色々なものに加工できる「ポテトサラダ」「ポテトチップス」「肉じゃが」など、様々な料理に変化できるだろう。
じゃがいもがあれば、色々なものに利用できる。

では、一度加工してみよう。

「.ポテトチップス > .じゃがいも」

さらに加工しよう。

「.チョコチップス > .ポテトチップス > .じゃがいも」

加工という言い方をしているが、「セレクタ」が多くなればなるほど、利用方法は限定される。


というような例え話を思いついたが、きっと使うことはないだろう。

CSSの「Cascading」について

Cascading Style Sheets(CSS)のCascadingの意味は、

カスケード利用 (cascading) とは、資源やエネルギーを利用すると品質が下がるが、その下がった品質レベルに応じて何度も利用すること。

カスケード利用 - Wikipedia

って、Wikipedia先生が教えてくれた。

確かにclassを使えば、何度も利用できるし、
セレクタをやたら繋げると、確かに品質が下がると納得できる。

あと「Cascade」の名詞では「階段状に連続する滝」という意味もあるらしく、プロパティの継承とか、それっぽいなと思った。

kingdomy:

Shiba Inu “works” at a little shop in Japan (via)

“悩むとは、物事を複雑にしていく行為である。 
考えるとは、物事をシンプルにしていく行為である。 ”

pleeease

前にpleeeaseを見たときは、postCSS, autorefixer, CSS writing, css mqpacker, 独自filterの寄せ集めで、中途半端なイメージがあった。

昨日久しぶりに見たら、CSS Pre-processorを使用せずに、CSS Post-processorのみで効率的なCSSを出力しよう感がある。

具体的には、CSSで将来的に多くのブラウザで利用できるであろう方法で記述し、pleeeaseに通すことで、現在のブラウザでCSSを認識できるように、フォールバックと最適化を行う方針だ。

はてなブックマークのホットエントリーを狙うなら
「CSSメタ言語なんて古い! これからはCSSの仕様に沿った書き方」 とか?

このようなタイトルの付け方は、完全に釣りなので真に受けないで欲しいが、このようなCSS Post-processorとCSS Pre-processorが共存すると、また面白いことになるのではないかなと思う。

4gifs:


1 wow please

4gifs:

1 wow please

(出典: 4GIFs.com)

Sass, Less, Stylusを使う理由

CSS Pre-processorについて、最近お話を頂くことが多くなってきたけど、CSS Pre-processorなんてCSSを生成するための単なる「箱」でしかないと思う。

  • 変数が使える
  • 入れ子できる
  • extendが使える

そんなことはどうでもよくて、CSS Pre-processorよりも先にあるCSSを意識してほしいと思う。

では、なぜ自分はCSS Pre-processorを使っているかというと、CSSそのものが、めんどうくさいから。

  • { } や ; を書くのがめんどい(Sass記法、Stylus使えば、省略)
  • 何かの順序や数値を計算するのがめんどい
  • 微妙に違うだけの処理を何度も書くのがめんどい

CSSそのものはめんどいけど、CSS Pre-processorを利用することで、めんどい手間を省いて、限られた時間をCSSそのものを考えられる時間にあてられることが利点だと思う。

CSS Pre-processorそのものは、どうでもよくなってきた。

line-heightによるスペースを埋める

異なるline-heightを指定していると、同じmarginやpaddingの高さでも、差が出てしまう。

body {
  font-size: 14px;
}
.a {
  float: left;
  padding-top: 20px;
  line-height: 1.8;
}
.b {
  float: left;
  padding-top: 20px;
  line-height: 1;
}

line-heightによる差を計算して埋めるのが面倒なので、mixinを作った。

stylus

FONT_SIZE = 14px
LINE_HEIGHT = 1.8

adjustSpacer(AS_SPACING, AS_FONT_SIZE = FONT_SIZE, AS_LINE_HEIGHT = LINE_HEIGHT)
  INLINE_HEIGHT = AS_FONT_SIZE * AS_LINE_HEIGHT - AS_FONT_SIZE
  INLINE_HEIGHT = round( INLINE_HEIGHT / 2 )
  AS_SPACING - INLINE_HEIGHT

body
  font-size FONT_SIZE
.a
  float left
  padding-top adjustSpacer(20)
  line-height LINE_HEIGHT
.b
  float left
  padding-top 20px
  line-height 1

mixinの吐き出したCSS

body {
  font-size: 14px;
}
.a {
  float: left;
  padding-top: 14px; 
  line-height: 1.8;
}
.b {
  float: left;
  padding-top: 20px;
  line-height: 1;
}

今は、pxしか対応していないけど、単位によって計算を分岐すればいいと思う。
ただ問題なのは、Stylusが単位を取得できたか、ということ。
Sassならできたと思うけど、Stylusで単位取得できなければ、新しいmixnを作るかな?