タグ

ブックマーク / morishitter.hatenablog.com (3)

  • morishitterのCSSの書き方(2016年夏) - morishitter blog

    今、自分がどうやってCSSを書いているのかについてまとめる。 CSSを書く前にすること 持論だが、「デザインの意図を正確に理解した上で書かれたCSSは破綻しない」と思っている。 しかし、自分ひとりでサービスを作るときような、デザインの決定権を持つ人とUI実装者が同じである場合を除いて、デザインの意図を正確に伝え、理解することは難しい。 僕が1番時間を使うのがこの工程だ。 今の仕事ではデザイナーがSketchファイルを作成し、エンジニアがそれを元に実装する。 Sketchファイルを開き、アートボードをひたすら眺めデザインの矛盾がないかを確認し、「なぜこのようなデザインなのか」を質問しまくる。 ここで良い質問と提案をするためにも、エンジニア側に最低限のデザインに対する知識が必要だと思う。 最近読んだだと、「みんなではじめるデザイン批評―目的達成のためのコラボレーション&コミュニケーション改善

    morishitterのCSSの書き方(2016年夏) - morishitter blog
  • CSS Modules 所感 - morishitter blog

    CSS Modulesという、CSSの新しい設計概念・指針のようなものがある。 CSS Modulesチームの1人であるGlen Maddern氏が書いた「CSS Modules - Welcome to the Future」という記事の翻訳がバズっていたので、僕がCSS Modulesについて思ったことをまとてみる。「CSS Modulesとは何か」ということは、上記の記事に書かれているのでここではあまり触れない。 CSS Modulesとコンポーネント設計 CSSのルールセットは全てがグローバル定義であり、CSS(Cascading Style Sheets)というスタイルシート言語の最大の特徴である"カスケーディング"という機能により、CSSファイルを見ただけでそのスタイルの影響範囲を理解することは難しい。 CSS Modulesは、CSSのルールセットの影響範囲を、Webアプリケ

    CSS Modules 所感 - morishitter blog
  • 世の中のCSSプリプロセッサーがどれもクソだから自作したった - morishitter blog

    タイトルは釣りです。Stylusは最高だと思うし、Sassはいつも使っています。Lessは…うん、いい感じだと思います。 Yet Another CSS Preprocessor YACP(Yet Another CSS Preprocessor)という、CSSプリプロセッサーを作った。名前は考えるのめんどうだったので適当に付けた。作ったと言っても、前回のブログを書いたときに作ったrework-rule-bindingを使ってreworkでビルドしただけ。 インストールはnpmから。 $ npm install -g yacp autoprefixerを組み込んでいるので、ベンダープレフィックスを気にしなくていい。SassみたいにCompassのCSS3のmixinを@includeする必要もない。 他にはrework-varsも使っていて、W3Cの変数定義の構文が使える。 /* inpu

    世の中のCSSプリプロセッサーがどれもクソだから自作したった - morishitter blog
  • 1