styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしました。 今回は styled-components の採用を決定するまでの過程や、既存の Scss ファイルの扱いについて検討した内容などを紹介します。 スタイル定義方法の検討 kintone にはユーザーが JavaScript でカスタマイズできる機能があり、ユーザーが行っているカスタマイズの中には、DOM 構造や CSS のクラス名に依存しているものもあります。このようなカスタマイズはサポートの対象外ではありますが、ユーザーにでき
styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita
styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのスタイリング方法/設計はいくつか存在しますが、どれも一長一短で、やはり銀の弾丸は存在しません。スタイリング方法を選択可能なUIフレームワークは、この混沌とした選択肢の中から価値を見出す必要があるわけです。 僕はBEMによる人力CSS管理（Sass/Less/Stylus）から、 { fontSize: 14 } のようなJSオブジェクト形式のCSS in JS、 styled-components のようなTemplate Stringsを利用したCSS in JS、そしてCSS Modulesまで幅広く公私とも
CSS for the <Component> AgeStyling your way with speed, strong typing, and flexibility. const Button = styled.a<{ $primary?: boolean; }>` --accent-color: white; /* This renders the buttons above... Edit me! */ background: transparent; border-radius: 3px; border: 1px solid var(--accent-color); color: var(--accent-color); display: inline-block; margin: 0.5rem 1rem; padding: 0.5rem 0; transition: all
はじめに 自分は普段フロントエンドエンジニアとして、React Reduxなアーキテクチャのアプリを作ることが多いのですが、stylingにstyled-componentsを導入しています。今回は、styled-componentsでのCSS設計について書いてみたいと思います。 styled-componentsとは JSでstyleを記述するCSS in JSのライブラリで、2019年8月現在最も人気のあるライブラリです。タグ付きテンプレートリテラルをうまく使った独自性と、明快なAPIでCSS in JSの火付け役にもなり、同じ思想を持った亜種ライブラリ(paypal/glamorous, zeit/styled-jsx等)が続々と出て来るなどある種のブームを巻き起こしました。 そもそも、Reactの登場でフロントエンド開発が「jQueryによるhtmlへの振る舞いの後付け」というスク
今回は styled-components を試してみたい と思います。 ついでに、色を操作できるライブラリ chroma.js も試してみたいと思います。 styled-components と chroma.js の詳細については、以下のページを参照してください。 それでは早速、styled-components と chroma.js を試していきたいと思います。 目次 目次 Reactセットアップ 必要なパッケージのインストール 「 styled-components 」と「 chroma-js 」を試してみる src/index.tsx src/packages/Sandbox.tsx src/packages/SampleButton.tsx 実際に動かしてみる まとめ Reactセットアップ TypeScript が慣れているので、惰性で typescript テンプレートを
【脱ランタイムCSS in JS】styled-componentsを別のCSS in JSに自動置換するCLIツールの開発
1.はじめに 本記事はサイボウズの夏インターン(2022年)で取り組んだ内容の紹介を行います。インターンでは、サイボウズのフロントエンド領域における横断的組織であるフロントエンドエキスパートチームに配属されました。5日間のインターン期間でstyled-componentsを別のCSS in JSに自動置換するCLIツール・extract-styledの開発に取り組みました。 2. extract-styledの紹介 実装したextract-styledは、以下のようなCLI経由の実行を通して、styled-componentsで定義されたReactコンポーネントをtargetに指定した任意のCSS in JSに変換することができます。(現時点では変換先としてlinaria・vanilla-extractに対応) $ extract-styled \\ --path ./src/compon
今の職場で既に組まれたシステムが既にstyled-componentsにべったり依存していて、別に積極的に入れ替える理由もないので普通に使っているけれども、やっぱりこれ微妙だなと思った話。 そもそもとして、ビルドシステムへの介入が多くて不必要にロックインになったり、提示されてる手法がだいたいイマイチで普通にCSSとかSCSSを書く以上の意義が見出せないので、僕は基本的に「JS中にCSSを書いたり、ES Moduleのimportを使ってCSSを読み込むタイプのアプローチ（以下CSS-in-JS）」がそんなに好きではない・大人しくCSS書く方が好きではあるんだけど。色々あった理由はこちら: https://saneyukis.hatenablog.com/entry/2019/02/28/022750 https://saneyukis.hatenablog.com/entry/2019/0
弊社では現在UIコンポーネントのスタイルを当てるために、CSS-in-JSライブラリのひとつであるstyled-componentsを使っています。 styled-componentsで高度な使い方をしたときにスタイルが意図した優先度で当たらない現象の調査のためにstyled-componentsの仕組みを調べたので、覚え書きとして残しておきます。 前提知識styled-componentsについて: CSS-in-JS はスタイル定義をJavaScript内に書く手法の総称です。スタイルのコンポーネント間の結合を下げ、単一コンポーネント内の振舞いとスタイルの凝集を上げる狙いがあり、特に振舞いに依存して動的にスタイルが変わるようなケースでJSとスタイル定義をシームレスに結合させることができます。実際の実現方法はライブラリによってまちまちです。styled-componentsは比較的オーソ
When I first started using styled-components, it seemed like magic ✨. Somehow, using an obscure half-string-half-function syntax, the tool was able to take some arbitrary CSS and assign it to a React component, bypassing the CSS selectors we've always used. Like so many devs, I learned how to use styled-components, but without really understanding what was going on under the hood. Knowing how it w
GitHub - styled-components/styled-components: Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress 💅
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
前々回のprettierと前回のflowに引き続きReact Confで紹介されてたものを使うシリーズ第3弾です。 styled-componentsはSassやRadium、CSS Moduleといったスタイル系ライブラリの問題を解決するために生まれた新しいライブラリで、今Reactコンポーネントのスタイリングをするならベストの選択肢なんじゃないかと思います。 追記 2017/4/2 - jestでのテストについて追記しました。 2017/5/26 - v2について簡単に記載しました。 styled-componentsとは styled-components 所謂CSS in JSの一種でjsx内に普通にcssが書ける。 キャメルケースとかせずにcssが書けるので、(複雑なことをしない限りは)移行が楽。 props渡したりテーマ作ったり、extendできたり機能豊富。 擬似要素やmed
SassからCSS Modules、そしてstyled-componentsに乗り換えた話｜食べログ フロントエンドエンジニアブログ
この記事は食べログアドベントカレンダー2020の2日目の記事です。 こんにちは。食べログFE（フロントエンド）チームの金野です。 以前の記事でもご紹介しました通り、現在食べログは、jQuery+Railsだったフロントエンド環境をReact/TypeScriptに置き換えるリプレースを進めています。 CSSもSassからCSS Modulesを経てstyled-componentsに移行中です。 今回は、「どうしてその技術を選んだか」という技術選定の経緯や、どのような規約で運用しているかをご紹介します！ なぜリプレースを始めたのかまず、CSSの技術選定について触れる前に、リプレースの目的について話さなくてはいけません。 食べログは今年で開設から15年となるサービスです。システムも組織も巨大で、且つ複雑な機能が多くあります。 特にフロントエンドは場当たり的な実装も多く、技術的負債が開発時のボ
styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る | suzukalight.com
3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安全なスタイル記述ができるようになる何がしたかったかこういう Chakra UI みたいな書き方がしたかったので、styled-components でやれるかを試したのが今回の記事の主題です。 export default function App() { return ( <VStack spacing={4} w="100vw" h="100vh" px={4} py={8} bgColor={palette.white
これからのReactのスタイリングにはStyled Componentsが最高かもしれない | スペースマーケットブログ
2018年6月15日に施行される住宅宿泊事業法（いわゆる民泊新法）に向けてスペースマーケットでも民泊サービスの準備を始めています。現在スペースマーケットではスペースの時間貸しを主力としたWebサイト(https://spacemarket.com)を運営しているのですが、それとは別ブランドで民泊サービス専用サイト(https://stay.spacemarket.com)を立ち上げることになり、そのフロントエンドの技術要素として最近話題のStyled Components(v2)を使ってみたのでご紹介します。 Styled Componentsとは 簡単に言うとjsxファイルの中にcssを記述することができるようになるライブラリです。 cssの設計概念や指針は css -> sass -> BEM -> CSS Modules のような流れで進んできましたがStyled Component
この記事はStyled Componentsの微細な好みに関するものであり、Styled Componentsで構成されたプロジェクトをリファクタリングすべき等の考えはありません。 Styled ComponentsはCSS in JSの先駆けとなり、この手のツールではトップクラスの人気である覚えがあります。ですが、実のところあまり濫用されて欲しくない気持ちを抱いています。 特記事項 CSSやReactの初学者向けではありません。 この記事は以下の是非を問うものではありません。 CSS in JS / Plain CSS CSSファイルを分離する / 分離しない テンプレートリテラル / Object Style CSSコードのスタイル はじめに Styled Componentsについて Styled Componentsというライブラリは、styled.div...のようなAPIを持つ
styled-components の 入れ子の中で使う記号(&>+~)や、擬似要素 before/after, 擬似クラス hover, さらには & & といった書き方、これがいつも分からなくなるのが最近の悩みです。 きっと CSS を習得するより先に React の勉強を始めた方は同じような悩みを持っているのではないでしょうか。 僕はいつもこの記号がわからなくなるので、ちゃんと調べてメモすることにしました。 その結果、基本的には styled-components の中で SCSS の記法が使えるだけっていう風に覚えておけばいいことがわかりましたが、一部そうでないものもありました。 それについて順を追って説明していきます。 (TIPS: >+~についてググるとき直接記号を入れると検索されにくいですが、これらは隣接セレクタと呼ばれておりその言葉で検索すると比較的ヒットします。) CSS
meguro.css#3 でstyled-components + CSS Gridに感じる無限の可能性についての話をしました
styled-componentsとCSS-Grid組み合わせるとなんかいろいろ出来るぞ！みたいな事に気付いて、meguro.cssの枠に空きがあったので「ここで話すしかない！」みたいな感じで参加しました。前回はゴリッとJSなdart-sassの話をしてしまったのですが、今回はかなり趣旨に使い話ができた気がします。 ちょっと前から「もうちょっとUI（UXではなくあくまでUI）についてもう少し素振りしたいなー」みたいなことを思っててDaily UIをCollect UI 見たりしながらチマチマやっていた所でいろいろ脱線したのが今回の産物になります（電卓とかの例はまさにそれです） 元がデザイン素振りのためのものだったりするので、パフォーマンスだったりブラウザ依存とかは考慮してない夢の世界の話ですが、一部は真面目に使えるケースもあるんじゃないか？と思ったりもしています。 画的に地味ですが、タイム
styled-componentsの使い方(パッとわかりやすく、色々なパターンを説明することを目指しています)
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
EJ: Updated January 13, 2020 with the formal v5 release. We are very excited to announce that the styled-components v5 is here! There are no breaking changes*, as long as your app is running the latest version of React, styled-components v5 should just work. ✨(*however we did remove the deprecated “subfunctions on attrs” API) Please try the release in your apps and let us know if you encounter any
GitHub - ben-rogerson/twin.macro: 🦹♂️ Twin blends the magic of Tailwind with the flexibility of css-in-js (emotion, styled-components, solid-styled-components, stitches and goober) at build time.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
実際の現場で使えるstyled-componentsのデザインパターンを紹介します。 なお、styled-componentsのみで完結するパターンについて記述しており、他のライブラリと組み合わせるようなパターンについては紹介しません。 随時更新・追加していきます。 基本パターン styled-componentsは、reactのコンポーネントに与えられたpropsを参照し、propsに応じてstyleを出し分けることが可能です。 const Button = styled.button` background: ${props => props.primary ? 'palevioletred' : 'white'}; color: ${props => props.primary ? 'white' : 'palevioletred'}; font-size: 1em; margin:
Material-UI と styled-components を組み合わせて、React のサイトを怠惰にスタイリングする。 - Qiita
Material-UI と styled-components を組み合わせて、React のサイトを怠惰にスタイリングする。CSSJavaScriptMaterialDesignReactstyled-components Redux Hooks と Redux Starter Kit を組み合わせると、かなり楽に redux が導入できるということを先日、ご紹介いたしました。 Redux Hooks によるラクラク dispatch & states Redux の記述量多すぎなので、 Redux の公式ツールでとことん楽をする。 ( redux-starter-kit) ロジックの記述が楽になったので、今度はウェブサイト、ウェブアプリの見た目をらくに記述できるようになりましょう。 ということで、今回はスタイリングのお話です。 紹介するのは React 界隈では有名なライブラリ（だと思
TypeScript + React + styled-components + Firestore + Firebase HostingでWebアプリを作り始める - Qiita
TypeScript + React + styled-components + Firestore + Firebase HostingでWebアプリを作り始めるTypeScriptFirebaseReactVSCodestyled-components TypeScript, React, styled-components, Cloud Firestore, Firebase Hostingを使ってWebサイトを公開する方法。1 「FirestoreもReactも使ったことない人(筆者もそう)」が 「Firestoreに接続するReactアプリを作り、Firebase Hostingにデプロイするまで」を簡潔にまとめました。2 VSCodeを使っています 色々な考慮を省略しています 1. Reactプロジェクトの作成 まずは必要なものインストール firebase-tools 公式の
GitHub - styled-components/polished: A lightweight toolset for writing styles in JavaScript ✨
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
Announcing 💅 styled-components v2: A smaller, faster drop-in upgrade with even more features
After a six month long iteration process and over 300 commits we’re super excited to announce the official release of styled-components v2! TL;DRHalf the bundle size, (22kB → 12kB) thus much faster to load for your usersBest-in-class server-side rendering with critical CSS, style rehydration and concurrency support out of the boxWe’ve added the.attrs helper to support passing attributes to any sty
Styled Components: Enforcing Best Practices In Component-Based Systems — Smashing Magazine
The rise of JavaScript frameworks such as React, Ember and recently Angular 2, the effort of the W3C to standardize a web-native component system, pattern libraries and style guides being considered the “right way” to build web applications, and many other things have illuminated this revolution. After this shift in mindset towards building component-based user interfaces, we are now in what we li
styled-componentsによる抽象コンポーネント作成のすゝめ | メルカリエンジニアリング
この記事は MERPAY TECH OPENNESS MONTH の 11 日目の記事です。 こんにちは、メルペイのフロントエンドエンジニアの @sawa-zen です。本記事では React ベースのプロジェクトでのコンポーネント作成をちょっと楽するテクニックをご紹介します。 課題：コンポーネントのスタイル重複問題 サービスやツールの開発をしていると多くのコンポーネントを実装することになります。その際に同じようなスタイルを何度も記述することになりイライラした経験ありませんか？ 例えば margin: 0; や padding: 0; 、box-sizing: border-box; などなど。プロジェクトが大きくなればなるほどこの面倒な作業が増えていきます。 解決策 1 ：グローバルへリセット CSS を定義する グローバルへリセット CSS を定義して一掃してしまうのも一つの手です。例
ここのところstyled-componentsでのAtomicDesignの実装を考えていた。共通コンポーネント(Atomっぽいの)を書くときに役立つTips。 それ以外のときはあまり役立たないかもしれない。基本TypeScriptで真価を発揮すると思っています。（エディタ補完的な意味で） > react-routerのLinkにstyled-componentsを使いたいreact-routerのLinkにstyled-componentsを使いたい styled.h1, styled.pみたいにHTMLにもともと存在するタグにstyled-componentsを使うのはよくある。Linkはどうなの？って聞かれたのでその時の見せた例。 調べてみたらDocsのstyling-any-componentsに書いてあった。 import styled from 'styled-componen
The styled-components Happy PathMy personal suite of “best practices” For a few years now, my #1 favourite tool for managing CSS in React apps has been 💅 styled-components. It's a wonderful tool. In many ways, it's changed how I think about CSS architecture, and has helped me keep my codebase clean and modular, just like React! It shares something else in common with React: developers often disli
CSS Evolution: From CSS, SASS, BEM, CSS Modules to Styled Components
Since the beginnings of the Internet we’ve always had the need to style our websites, CSS has been around forever and has evolved at its own pace over the years, this article will take you through it. To begin with we need to be on the same page of what CSS is, I think we can all agree that css is used for describing the presentation of a document written in a markup language. It’s no news that CS
Announcing native support for the css prop in styled-components 🎉
As Ryan Florence once said, the essence of working with components is worrying about the right lines to draw in your app and then filling in the shapes they create with components. Invented by Sunil Pai in glamor, the css prop has taken over the CSS-in-JS world as a convenient way to build components while staying flexible with the “lines”, their boundaries. const MyButton = () => ( <button css={`
styled-componentsを使った雑なReact Presentational Componentの書き方 - Qiita
最近、仕事でReactを書く機会が多くなってきて色々試しているうちに書き方が落ち着いてきました。 [注意] 本来はクラス毎にStyledComponentsのインスタンスを作った方がいいです。自分がVueライクな感じで雑に書くための記法です。 この表記ですと、子コンポーネントに同じクラス名があたったときに、親コンポーネントのスタイルが当たるので完全なscopedなスタイルにはなりません。 （@nabeliwoさんにコメントいただきました。ありがとうございます！） 既にHTMLが存在しているときに雑にReactに移植するときの途中段階とかで役立つ書き方です import React from 'react' import styled from 'styled-components' const TodoItem = ({ className, title, description, onD
Structuring our Styled Components | Part I - Decisiv Traction
INTRODUCTIONSome ContextOur frontend UI team has put a lot of thought into how we structure our React applications, and after several iterations we’ve discovered patterns that work well for us. We’d like to share what we’ve learned in the process and hear more about how you’re organizing your applications as well. This article is part one of a series, and focuses on Blocks, Elements, and Modifiers
Release v3.0.0 / v3.0.1 · styled-components/styled-components
This major release prepares some great features that are yet to come, so be ready for some new and exciting features soon! But for now please read on for what’s in the current (majorly awesome) release. 🔥 Breaking Changes Shipping only flat bundles Thanks to @Andarist we're now shipping flat bundles for each of our entries only. This means that the entire lib/ folder won’t be inside our npm packa
Simple React Native forms with redux-form, immutable.js and styled-components - Esben Petersen
Simple React Native forms with redux-form, immutable.js and styled-components How to easily integrate user input into your state management on the mobile platform Posted by Esben Petersen on January 6, 2017 tl;dr If you just want to see how you can use redux-form and immutable.js in react native, you can find the code for this article can be found right here. Introduction At Traede we use redux-fo
styled-components/README.md at main · styled-components/styled-components
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
GitHub - danielbayerlein/dashboard: 📺 Create your own team dashboard with custom widgets. Built with Next.js, React, styled-components and polished.
You signed in with another tab or window. Reload to refresh your session. You signed out in another tab or window. Reload to refresh your session. You switched accounts on another tab or window. Reload to refresh your session. Dismiss alert
https://mizchi-sandbox.github.io/grid-generator/ でやってることを、視覚的に指定できるように styled-components のヘルパ作ったら個人的に便利だったので紹介。 実装 こういうヘルパを書いた import styled from 'styled-components' export const Grid = styled.div` display: grid; grid-template-columns: ${({ columns }) => columns.join(" ")}; grid-template-rows: ${({ rows }) => rows.join(" ")}; grid-template-areas: ${({ areas }) => areas.map(r => `'${r.join(" ")}'`)
JAMstack PWA — Let’s Build a Polling App. with Gatsby.js, Firebase, and Styled-components Pt. 2
Welcome back! This is the second part of a three-part tutorial where we go through and build a PWA from scratch that utilizes a powerful architecture pattern called the JAMStack. You can find the blog post covering part 1 here. I’d suggest reading through part 1 first as we’ll be jumping straight into from where we left off. You can find the repository for part 1 here, if you’d prefer to start fre
Follow on FacebookWhen working with multiple developers on one React application, it's always good to align the team on a common set of best practices. This holds also true for styling React components. Over the past years, I was fortunate to work with many React freelance developers on different applications where we had to align the best practices throughout the project. While there were certain
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
styled-components: API Reference
styled-componentsを使ったCSS設計 - Qiita
【React】styled-components を試してみる！ - mlog
styled-componentsへの最近の感想 - saneyuki_s log
styled-componentsの仕組みについての覚え書き | Wantedly Engineer Blog
Demystifying styled-components
これからのReactコンポーネントのスタイリングはstyled-componentsが良さそう - Qiita
Styled Componentsを無闇に使わないで
styled-components の :&>before(記号) まとめ
Announcing styled-components v5: Beast Mode 💪🔥
styled-components デザインパターン - Qiita
逆引きstyled-components 共通コンポーネントをうまく作る5つの小技 - mottox2 blog
The styled-components Happy Path
styled-components で視覚的にわかりやすい Grid Layout を生成する - Qiita
Styled Components Best Practices