読者です 読者をやめる 読者になる 読者になる

I'm kubosho_

思想の固まり

Sassなどにあるルールセットを入れ子できる機能がいらないと感じる理由

Sassなどにはルールセットを入れ子できる機能がありますが、個人的にはいらない機能だと感じています。

理由は、詳細度の総計が分かりにくくなるので .foo .bar .baz .foobar みたいに上書きしにくいセレクタ宣言ができてしまうことが多いように感じるためです。 先ほどのセレクタ内で宣言されたスタイルを上書きするためには、次のことをやらないといけないでしょう。

  • 同じくらい入れ子する
  • !important を使う
  • そもそも入れ子の数を制限する

しかし、同じくらい入れ子する、もしくは !impotant を使った時点で管理できないCSSへ一歩踏み出していると思います。 またそもそも入れ子の数を制限するのはありだと思いますが、それだと入れ子がある意味が分からなくなると思います。

なので、ルールセットの入れ子はいらないと思います。


と思いましたが、BEMの考え方でセレクタを書く場合は必要ですね。それ以外はいらなそうですが…

技術書典2にサークル参加して得られた知見

これは本当に戦々恐々という感じで、あと5人くらい1000円札で出されたらお釣り不足で撤退、もしくはちょうど持っている人だけ手に入れることができるようにしないといけないところまで追い詰められました。 今回は600円という値付けでしたが、この値段の場合は100円玉の棒金を3〜4つ用意しておかないといけないかもしれません。

これは隣のサークル(あ-03 さーくるもわねっと)が新刊の価格や見本誌の場所をB4?くらいの厚紙にサインペンを使って書いているのを見て便利そうだなと思いました。

CSV出力もできるので良いです。

ワンオペでもサークル運用はできるのですが、他サークルの頒布物を見に行けなかったり、トイレに行くときに貴重品を見ていただけるよう隣のサークルに断りを入れるか持ち歩くかしないといけなかったり、ご飯を食べる暇がないのでつらいです。

ちなみに技術書典のサークル被チェック数は出していいようなので数を出すと84です。 実際に頒布した数は101なので、チェック数から本の印刷部数を決めるときは約1.2倍見ておいたほうがいいという感じです。

ただ今回は雨が降ったので1.2倍という結果だったと思いますが、晴れていたらもうちょっと頒布できていたのかなと思います。 あと前日や当日になって一気に被チェック数が32増えたので、どこまで増えるか予測も難しそう。

一つ言えるのは次のことです。

技術書典2 あ-04にて「Reset CSSフレンズ」を頒布します

2017/4/9(日)に秋葉原UDX内のアキバ・スクエアにておこなわれる「技術書典2」で「Reset CSSフレンズ」を頒布します。

サークル名は「O2 Project」、頒布場所は「あ-04」です。 頒布場所を画像で示すと次のとおりです。 入口からそのまま真っすぐ進んだら迷わなそうな配置ですね(本当か?)。

f:id:kubosh0:20170408204434p:plain

今回の表紙は次の画像のとおりです。けものフレンズ1話のかばんちゃんとサーバルが向かい合って座っているシーンの背景や、5話のかばんちゃんとサーバル、アメリカビーバーとオグロプレーリードッグがどんな家を建てたいかブレストしているシーンを元に作ってもらいました。とても良い表紙です。

f:id:kubosh0:20170408205006p:plain

内容

今回は、Reset CSSとは・なぜReset CSSを使うのか・Reset CSSの特徴・Reset CSS内のスタイル宣言について各フレンズたち(かばんちゃんとサーバル、こはんコンビ、博士コンビ)に解説してもらってます。対象読者は特に定めていないので手にとってくれた方が対象読者ということにします。

リポジトリはすでに公開していて、次の場所で見ることができます。

github.com

各種情報

というわけでみんなくるのだ!アライさんはまってるのだ!

2016年買ってよかった・よくなかったものまとめ

完全に主観で買ってよかった・よくなかったものをまとめていきます。

買ってよかったもの

ErgoDox EZ

ErgoDox EZ: An Incredible Mechanical Ergonomic Keyboard

自然な体勢と好きなキーバインドで入力できる喜び。

Robin

Robin. The smarter smartphone. – Nextbit

何より外見が良いです。カメラも結構きれいです(起動時間は一呼吸置く感じでちょっと遅い)。 Android 6.0.1もだいぶいい感じでした。あとOSがそこまでカスタマイズされていなくて良いです。 液晶が弱いのか割とすぐに光ムラができてしまったのが残念です…

傘立て ネコ ブラック 2359

山崎実業 傘立て ネコ ブラック 2359

山崎実業 傘立て ネコ ブラック 2359

かわいい。傘がまとめられて便利です。

PLEMO 長傘 雨の雫 ブラック (124センチ)

サイバーマンデーセールで衝動買いしたものの折れ方が独特だったり、自立できたりして結構便利かつ面白かったです。

ポケットモンスター サン

孵化と準伝説ポケモンの厳選に時間をとられるのが難点ですが楽しいです。

パナソニック セラミックヒーター ホワイト DS-F1206-W

パナソニック セラミックヒーター ホワイト DS-F1206-W

パナソニック セラミックヒーター ホワイト DS-F1206-W

作業部屋の足元が暖かくなってよいです。

ラブライブ! μ's Final LoveLive! 〜μ'sic Forever♪♪♪♪♪♪♪♪♪〜 Blu-ray Memorial BOX

ラブライブ! μ's Final LoveLive! 〜μ'sic Forever♪♪♪♪♪♪♪♪♪〜  Blu-ray Memorial BOX

ラブライブ! μ's Final LoveLive! 〜μ'sic Forever♪♪♪♪♪♪♪♪♪〜 Blu-ray Memorial BOX

尊かった(小並感)

買ってよくなかったもの

mornin'

めざましカーテン mornin’

まずAndroidだとBluetoothの接続が不安定でした。あと開閉時間が30秒ごとでしか設定できず10秒単位など細かく設定できないので、開閉どちらも足りないかやりすぎるかという状況です…

ニンテンドークラシックミニ ファミリーコンピュータ

ニンテンドークラシックミニ ファミリーコンピュータ & 専用ACアダプター

結局あまり遊んでいないです…あとコントローラーが着脱不可なのとケーブルが短いのがつらい。

Pokémon GO Plus

Pokémon GO Plus

あまりPokémon GOを遊ばなくなってから買ったのでそこまで使わなかったです… 配信と同時に出てくれればもっと使っていたかもしれないです。

CSSを破綻させない

12/3(土)にCSSを破綻させないということをbuilderscon tokyo 2016で話しました(動画見ましたが「えっと」や「なんか」とか言い過ぎなのと、髪の毛触りすぎですね)。

そこで使った発表資料の内容を編集した上で、CSS Advent Calendar 2016 14日目の記事として公開します。

CSSは破綻しやすい

OOCSSの提唱者Nicole Sulliban氏も"CSS is too fragile"と2008年のイベントで言いました。 なぜ破綻しやすいのか。それはCSSの特性が絡んでいます。

CSSの特性

CSSの特性としておもに3つあります。

はじめに、記述を間違えてもエラーにならないことです。ブラウザで表示確認をおこなって初めて見た目がおかしいことに気づきます。

次に、スタイルが適用される条件としてルールセットを書く順序は関係ありますが、常に関係があるわけではない点です。

ちなみにルールセットはCSSのセレクタ・プロパティ・値の定義をまとめたものです。 分かりやすい図としてCSS ルールセット構造図 · terkel.jp内の画像があるので引用します。

f:id:kubosh0:20161211114240p:plain

最後に、ルールセット間で同じプロパティが定義されている場合、順序・詳細度・重要度にもとづいて適用されるスタイルが決定されます。CSSをややこしくしているのはここですが、意識して書かないと容易に破綻します。

ここからは実際にCSSが破綻した例を見ていきます。

CSSの破綻

CSSの破綻はいくつか種類があります。これらの要素のうち2つ以上が複合して起きていると手がつけられないCSSになります。

スタイルの上書きが複数ある

スタイルの上書きはBootstrapなどCSSフレームワークを使うときに独自の見た目を実現しようとすると起こりがちな問題です。 スタイルの上書きが多くなるとどんな見た目になるのか予測できなくなり破綻します。

.button {
  border: 1px solid #ccc;
}

/* ...長いコードの後や別ファイルなど... */

.button {
  border: 1px solid #666;
}

/* ...長いコードの後や別ファイルなど... */

.article .button {
  border: 1px solid #00c;
}

前に書いたセレクタの詳細度が高い

前に書いたセレクタの詳細度が高くてスタイルが上書きできないことも破綻の一因になります。 先ほどのスタイルの上書きを多くしていると起こりがちな問題です。 これがもたらす結果としては !important の濫用です。

 /* 詳細度はa=0, b=4, c=0なので0.4.0となる */
.container .form .form-group .form-submit-button {}

/*
  詳細度はa=0, b=1, c=0なので0.1.0となる
  上書きできない。つらい
*/
.form__submit-button {}

命名規則がバラバラ

よくあることとして単語の区切りがケバブケース・キャメルケース・スネークケースのようにバラけていると、どの規則に合わせればいいのか分からずいつまでも命名規則が統一されません。

.account-login-button {}

.commentSubmitButton {}

.form_submit_button {}

CSSの破綻 まとめ

ここまでCSSが破綻する理由について書きました。まとめると次のとおりです。

  • 詳細度が管理されていない
  • ルールセットの分割粒度が明確ではない
  • 命名規則が決まっていない

CSSを破綻させない

ここからはCSSを破綻させないためにはどうすればいいのかを書いていきます。

詳細度を管理する

CSSなどのファイルを分割するときはファイル内で下へ行くにつれて詳細度が高くなるようにします。またセレクタ定義やIDセレクタを書きすぎないようにするのも重要です。

例を挙げるとフォーム共通のスタイルを適用するときにセレクタを定義しすぎないことです。 これにより少ないセレクタ定義で適用したスタイルを上書きできて秩序が保つことができます。

 /* 詳細度はa=0, b=2, c=0なので0.2.0となる */
.form .form-button {
  margin: 0;
}

/* ... */

/*
  詳細度はa=0, b=2, c=0なので0.2.0となる
  記述の順序が後なので値が上書きされる
*/
.comment-form .form-button {
  /* 上書きできる */
  margin: 10px auto;
}

ルールセットの分割粒度を明確にする

スタイルの上書きを減らすためにルールセットの分割粒度を明確にすることも重要です。 これはさまざまな方法が提案されていて、たとえばFLOCSSSMACSSECSSなどがあります。

これは作るものによって適しているものが違うため一概にどれがいいか言えません。 スタイルを適用したいときにルールセットをどこに置けばいいのかチーム内で迷わないようにするのが重要です。

命名規則を決める

命名規則もMindBEMdingECSSSMACSSなどさまざまなものがあります。これもチーム内で使う命名規則を一致させることが重要です。

CSSを破綻させない まとめ

ここまでCSSの破綻を起こさないためにどうしたらいいか書きました。まとめると次のとおりです。

  • 詳細度を管理する
  • チーム内でルールセットの分割粒度を明確にする
  • チーム内で命名規則を決める

しかしこれらを実践する前により大事なことが1つあります。 それはデザイナーとの認識合わせです。

これはデザインの意図を正確に理解した上で書かれたCSSは破綻しないという言葉があります。

デザイナーが作ったSketchやPhotoshopのファイルを見て質問や提案をおこない、デザイナーとUIを実装する人で意図の認識を合わせることが重要です。 もっと言うならSketchやPhotoshopなどで作る以前のプロトタイピングの段階から関わるとお互い意図の認識がしやすくなると思います。 プロトタイピングツールはPrott(ステマ)やInVisionが代表的です。

これを踏まえてまとめると、チームで議論して良いCSS設計を考えようになります。

CSSがすでに破綻している場合は?

buildersconのQ&Aで「途中から入ったプロジェクトのCSSが破綻していた場合どう改善したらいいのか?」というのがあったのですが、今のところチームで話し合って設計指針を決めて1から書き直すしかないと考えています。

参考資料