[B! CSS][react] moqadaのブックマーク

モダンなJavaScriptアプリケーションでモダンにスタイリングする方法

WeAreJavaScripters@15th https://wajs.connpass.com/event/76238/

moqada 2018/02/09

リンク

SPAにおけるCSSについて、ひとつの解（追記あり） - エンジニアをリングする

SPAにおけるCSSのありかたについてずっと悩んでたけど昨日今日で一筋の光明が見えた— よしこ (@yoshiko_pg) 2017年4月7日この話を簡単にまとめておこうと思います。結論を先に書くと「今のところtemplate literal内にCSSを記述する形式のCSS in JSがいい感じ。Reactならstyled-componetnsが良かった」という感じです。悩んでいたことコンポーネント指向でSPAを作っていく上で、CSS（というかスタイリング）はどう書いていったらいいんだろう？ということに結構悩んでいました。 HTMLとJSがコンポーネントとしてまとまっていく中でCSSだけは今まで通り別物として扱い、BEMなどでグローバルスコープと戦うのか？はたまたCSSの枠をはみ出てJSコンポーネントの粒度に合わせたコンポーネント化をするのか？加えて、見た目も挙動も複雑なアプリケ

moqada 2017/06/21

react
css

リンク

React沼CSSArchitect

2017/05/25 【React】Goodpatch×TeamSpirit Meetup Architect -> Architectureです正しくは

moqada 2017/06/20

リンク

Reactを使ったモジュラーCSS : CSS-in-JSとCSS Module | POSTD

Buffer のメンバーはReactが大好きで、フロントエンドの多くのコードベースを徐々にReactに移行させています。ReactにFluxを加えると、モジュラー形式の小さなアプリでできた複雑なプロダクトを構築するための、とても健全な方法になると思います。そこで、１つ１つの新しい小さなアプリと機能を、大規模な構造体に追加される、Reactの新しいブロックと考えます。私は最近、このような新機能の１つに取り組んでいますが、React＋Fluxのアプリケーションを作るのがいかに簡単であるかと、その理由について、さらに夢中になってしまいました。Reactを使うと有意味なコンポーネントを集めてUIを宣言的に構築するのが楽になり、Fluxはその混成体に妥当なデータフローをもたらします。複雑なアプリケーションを作るときに発生する課題について多くの考察がなされましたが、React＋Fluxの組み合わせ

moqada 2016/05/31

css
react

リンク

ReactとCSS

Reactを少しずつ使い始めていて、コンポーネント指向でコードを書いていけるところが自分の経験だとDelphiのような感じでとても良い。 JavaScriptとHTML(JSX)を1つのスクリプトにまとめることができたのは良いのだけど、そうするとやはりCSSも一緒にまとめたくなってくる。それでReactとCSSについていくらか調べてみた。ちなみにElectronで動作すれば良いので、Blinkのことしか考えていない。 CSS in JS そもそもReactでCSSは普通どういう風に書くのか調べてみた。 React.js + CSS React: CSS in JS ひとつのやり方ではあるけども、style属性に一つ一つ指定していく方法。辛くない？疑似要素は？疑似クラスは？継承してもらいたいプロパティとかもあるんだけどな〜 scoped CSS せっかくコンポーネントにするのだし、CSS

moqada 2015/05/13

react
css

リンク

ReactでBEMなclassNameを書きやすくするBemmerというライブラリを作った - axross blog

2015-03-15 ReactでBEMなclassNameを書きやすくするBemmerというライブラリを作った JavaScript React BEM npm 作った JSX ReactとBEMはすごく相性がよくて、ずっとBEMで書いている。 ReactのComponentという単位、性格にはmodule.exports対象にするような再利用性のあるUI部品をBEMのBlockという単位に結びつけると、非常に扱いやすくなる。ファイル名もxxx-xxx-xxx.jsx``xxx-xxx-xxx.lessのようにして、クラス名もxxxXxxXxxのようにすると、名前が競合する危険性がゼロになり、それが再利用可能であることを示唆できる。背景で、そんな中React.createClass()でJSXのclassName属性を設定する際、困ったことがあって、Modifierに弱いという問題

moqada 2015/03/15

リンク

Radium - A React Component Styling Library

If you are not redirected automatically, visit the new Radium homepage at formidable.com/open-source/radium.

moqada 2015/03/03

react
css

リンク

DailyJS: React CSS with Radium, React D3 Components

Radium Ken Wheeler sent in Radium (GitHub: FormidableLabs/radium, License: MIT, npm: radium) from Formidable Labs. Radium is a module for managing inline styles on React elements, allowing you to use CSS features that aren’t usually possible with inline styles. You can use modifier styles based on component props, media queries, and handle pseudo classes. Radium offers a standard interface and abs

moqada 2015/03/02

リンク

CSSに死を！これはJSerの叫び！ #kbkz_tech

CSSの問題セレクター設計が辛い特に大規模化する場合、「CSSの問題」===「セレクターの問題」と言っていい（それ以外にもあるけど、大規模化するとほぼ確実にセレクターは問題になる）なぜ大規模化するとセレクターが辛くなるのか「隠蔽ができない」サイト全体で使用しているグローバル変数に対する定義を書いているようなもの

moqada 2015/02/18