PuppeteerでいらないCSSを消す@pirosikick の発表資料です。 https://mentaico-js.connpass.com/event/132416/
CSSレスポンシブデザインをSPAで使うと破滅する - 橋本商会
レスポンシブデザインは あくまで見た目の調整、表示・非表示のコントロールなので 下手に使うと、デバイス毎にインタラクションが違うUIのstateが無茶苦茶複雑になっていく コンポーネントという概念が無かった時代の設計を、SPAに持ってくるのはおかしい 画面サイズ毎にCSSで手軽にを切り替える、というのなら良い しかし、画面サイズ毎にインタラクションが違う部品が出てくると設計が破綻する 画面サイズ毎のがごちゃ混ぜになる コードが追えなくなり、バグの温床になる では、どうするか？ 素直に画面サイズ毎、デバイス毎、あるいはインタラクション毎のReactコンポーネントを書けばいい 使いまわせる部品は、コンポーネントとして切り出して再利用する 歴史を紐解く 2011年頃、レスポンシブデザインが生まれた 当時のwebにはコンポーネントが存在しなかった 単体で複雑な状態遷移をするインタラクティブなパーツ
【全訳】JSだけじゃない！AirbnbのCSS/SCSSスタイルガイド - リクルート住まいカンパニー Tech Blog
こんにちは！2016年に新卒で入社した、SUUMOのフロント開発グループでエンジニアをしているやなぎさわです。 入社早々SUUMOのCSSを再設計をする機会があり、CSS/SASSのスタイルガイドを研究していたのですが、JavaScriptのスタイルガイドで有名なAirbnbがCSSのスタイルガイドを公開しているのを見つけました。 一人で開発していたり、CSS/SASSを書く人が少人数である場合は意外とその重要性に気付きにくいのがこのCSS/SASSのコーディング規約です。CSSは単純な言語であり単にスタイリングを当てるだけであればわりと簡単にできてしまうのですが、大規模開発や修正が頻繁に必要となる運用フェーズになるとその単純さがゆえにバグを作り出しやすくなってしまいます。 特にCSSでは全てのセレクタのスコープがグローバルであり、気を抜くとすぐにクラス名などが被ってしまいます。BEMとO
Webサイト開発にCSS in JavaScriptを使うのはやめよう | POSTD
9つのおとぎ話 CSSは迷走しています。JavaScriptでドキュメントをスタイリングしているプロジェクトでは、多くの場合誤った理由からその方式を選択しています。本稿では、よくある誤解（神話）を列挙し、そうした問題に対するCSSソリューションを紹介します。 本稿は、特定のプロジェクトや人物への攻撃を意図するものではありません。ここでは、“CSS in JavaScript”(CSS in JS)を styled-components を使用することと定義します。これは、Reactのコンポーネントをスタイリングする最近のトレンドとなっています。 styled-components の作者である Max Stoiber と Glen Maddern 、また彼らに協力した人々は皆、卓越したアイデアと善意にあふれる優秀な人々です。 完全な透明性のために断っておくと、私は react-css-mo
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
styled-component + CSS Grid - Speaker Deck
