CSS in JSはCSSの書き方をどのように変えるのか - yuhei blog
CSSの難しさの根源はセレクタにある。CSS設計のための方法論ではどのようにしてセレクタと関わるべきかについて語られる。 その関わり方がCSSのみで実現できなければならないという制約を捨てたのがいわゆるCSS in JSの類（定義的に微妙なやつも全部ひっくるめて）だ。可能性は一気に広がり無数のライブラリが生み出された。 ある程度の期間を経ていくつかの着目すべきアプローチが見えてきた。これから僕はどのようにセレクタと関わっていくべきかという視点で記してみたい。 擬似スコープ 通常CSSのセレクタにはスコープはないが、HTMLやCSSにハッシュ値を付与して特定のコンテキストを擬似的に閉じてしまおうというアイデア。実装としては、Vue.jsの単一ファイルコンポーネント、Angularのコンポーネントスタイル、styled-jsxなど。関連するウェブ標準技術としてShadow DOMがある。 例え
次の時代のCSS in JSはWeb Componentsを従える
CSS in JSはJavaScriptのコード中にCSSを書くプログラミング手法で、styled-componentsなどがメジャーどころです。現代的な開発では、ReactやVueといったフロントエンド用のViewライブラリを使う際にCSS in JSのお世話になることがよくあります。 この記事では、次の時代のCSS in JSはWeb Componentsベースのものになるのではないかという話をします。 Web Componentsの復習 Web ComponentsはいくつかのWeb標準の総称であり、特に重要なのはCustom ElementsやShadow DOMです。いずれも、V1と呼ばれる仕様は全てのモダンブラウザでサポートされています（Safariが一歩遅れていて少し心配ですが）。 https://caniuse.com/custom-elementsv1 https://c
meguro.css#3 でstyled-components + CSS Gridに感じる無限の可能性についての話をしました
styled-componentsとCSS-Grid組み合わせるとなんかいろいろ出来るぞ！みたいな事に気付いて、meguro.cssの枠に空きがあったので「ここで話すしかない！」みたいな感じで参加しました。前回はゴリッとJSなdart-sassの話をしてしまったのですが、今回はかなり趣旨に使い話ができた気がします。 ちょっと前から「もうちょっとUI（UXではなくあくまでUI）についてもう少し素振りしたいなー」みたいなことを思っててDaily UIをCollect UI 見たりしながらチマチマやっていた所でいろいろ脱線したのが今回の産物になります（電卓とかの例はまさにそれです） 元がデザイン素振りのためのものだったりするので、パフォーマンスだったりブラウザ依存とかは考慮してない夢の世界の話ですが、一部は真面目に使えるケースもあるんじゃないか？と思ったりもしています。 画的に地味ですが、タイム
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - react-boilerplate/react-boilerplate: :fire: A highly scalable, offline-first foundation with the best developer experience and a focus on performance and best practices.
