LESSでサイト全体のCSS書いてる今の私
仕事でサイト全体のCSS組むことが二回ほどあったので、今の私の状況をメモっておく。っていうかこの記事に触発されて。
不特定多数の人が更新する大規模サイトに必要な CSS 設計の思想
これもQiitaに書いたほうが注目されるのでは・・・って一瞬考えたものの、よくわからない文章になってきたからもうこっちでいいや。
LESS
疑似セレクタとか書くのがすごく楽になりました。たぶん可読性も上がってる。
全体で使うmixinは定型デザインとか画像置換とかで少しだけ。ただ「CSSで○○するときの定型句」みたいなのをmixinにしてしまうと、使う側で上書きしようとした時にどの方法の定型句だっけ・・・となるので実は面倒だったり。カスタム部分だけ書けばいいってこと自体は悪くないのだけど。
それよりも、あるclassの中で定義してすぐ使うみたいなのが便利です。グローバルスコープ汚さないし、すぐそこに実装あるから読むのも簡単だし。変数でもこれができるので、複数のプロパティに同じ値を設定したい時とか便利です。
色違いを作るときなど、class定義するmixinも便利です。ループと配列関数と組み合わせたらなかなか楽しいことになりましたが、あまりやると他の人から苦情が来そうです。再帰とガードでforを書くってのがそもそも難解かもしれない。
LESSの話はおしまい。
せまんてぃくす
HTML5の豊富なタグは楽しそうですが、未だによくわかっていません。世の中そんなにわかりやすい構造のサイトばかりでもないし。
それよりulを使いすぎかなと思う今日この頃。
idかclassかタグか
classにはそれをどう表示するかというより、それが何であるかを書きたい人です。そういうわけでBootstrapはあまり好きじゃない。
そういえばパフォーマンス気にする割にdata属性大好きです。
以下戦歴。
1戦目
ページ内に複数現れないものはほぼ全てid振る。スタイルはcssで決めるものだという意識が強かったので、class組み合わせたりとかほとんど考えなかった。
欠点：idが長い。
ページ別CSS
共通classと個別classがあると混乱するからって、なんたら-かんたらの-ほげほげみたいな長い名前付けてましたが、ちょっとつらい。主にHTML側がつらい。
共通と個別をわけるならむしろprefix付けるのがいいかなーって考えてます。g-hogehogeとか。
ベンダープレフィックス
なまじ、提供者が泥臭いハックで対応してしまうがために、利用者と、利用者を食い物にしている不自由コンピューターの売人がつけあがるのだ。つけあがらせてはならぬ。断じて妥協の姿勢を見せてはならない。
http://cpplover.blogspot.jp/2014/04/3_30.html
とは言えないので。ただターゲット環境を絞れればだいぶプレフィックスなしでいけます。いい時代ですね。
あとはAutoprefixerでも使うといいと思います。mixinで対応していたBootstrapも、v3.2.0からはこっちを推奨するようになってました。
pxかemかremか
今のところemを使うことが多いです。ただmarginとかをemで指定していると、font-size変えたことでその周りのmarginが他とずれてぐぬぬ、というケースがあったのでremに手を出そうか考え中。
