Utility-first CSS(Tailwind CSS)が合理的であることの説明と、CSSによるUI開発小史

2024/03/14 148 users CSS Tailwind CSS 説明 変遷 目次

目次 CSS小史 SUIT CSS - 命名規約ベースのCSS方法論 styled-components - CSS in JS Tailwind CSS - Utility-first CSS なぜインラインスタイルではダメなのか まとめ タイムライン 参考リンク CSS小史 CSSでアプリのUIを実装するための手法は、これまでいくかの変遷を辿ってきた。 はるか昔、CSSが生まれて間もないこ... 続きを読む

【脱ランタイムCSS in JS】styled-componentsを別のCSS in JSに自動置換するCLIツールの開発

2022/11/01 12 users サイボウズ インターン CLIツール フロントエンド領域 組織

1.はじめに 本記事はサイボウズの夏インターン(2022年)で取り組んだ内容の紹介を行います。インターンでは、サイボウズのフロントエンド領域における横断的組織であるフロントエンドエキスパートチームに配属されました。5日間のインターン期間でstyled-componentsを別のCSS in JSに自動置換するCLIツール・extract-styl... 続きを読む

styled-componentsの仕組みについての覚え書き | Wantedly Engineer Blog

2022/06/14 15 users 覚え書き UIコンポーネント 現象 前提知識 弊社

弊社では現在UIコンポーネントのスタイルを当てるために、CSS-in-JSライブラリのひとつであるstyled-componentsを使っています。 styled-componentsで高度な使い方をしたときにスタイルが意図した優先度で当たらない現象の調査のためにstyled-componentsの仕組みを調べたので、覚え書きとして残しておきます。 前提知識 ... 続きを読む

styled-components と csstype で型安全な Chakra UI っぽいコンポーネントを作る | suzukalight.com

2022/03/19 8 users CSSTYPE Typography Props Mixin

3 行まとめ css mixin を使うことで、複数のコンポーネントで使い回せるスタイルヘルパを作成できるcsstype を使って、Typography, Space, Color などの型付き props を作ることができる基礎コンポーネントに型付き props を混ぜて受けられるようにし、mixin で受けてスタイリングさせることで、Chakra UI のような型安... 続きを読む

react-wc: Web ComponentsとReactで実現するCSS in JSの形 - uhyo/blog

2020/10/03 15 users React uhyo CSS 総称 Shadow DOM

CSS in JSはJavaScriptのコードの中にCSSを書く手法の総称で、CSS Modulesやstyled-componentsなどがよく利用されています。 この記事では、筆者がCSS in JSについて考えてたどり着いた一つの解を紹介します。 また、そのために作ったライブラリreact-wcを紹介します。 Shadow DOMを活用する 筆者がたどり着いた考えは、... 続きを読む

styled-components を試してみる！ - m's blog

2020/06/19 24 users React 目次 以下 s Blog ページ

今回は styled-components を試してみたい と思います。 ついでに、色を操作できるライブラリ chroma.js も試してみたいと思います。 styled-components と chroma.js の詳細については、以下のページを参照してください。 それでは早速、styled-components と chroma.js を試していきたいと思います。 目次 目次 React... 続きを読む

styled-componentsの採用と既存資産を捨てた理由 - Cybozu Inside Out | サイボウズエンジニアのブログ

2020/06/25 29 users SCSS kintone React TypeScript

こんにちは。フロントエンドエキスパートチームの@nakajmgです。 私が所属しているフロントエンドエキスパートチームでは、現在 kintone の脱レガシーの一環として React + TypeScript 化に取り組んでいます。この取組の中で Scss で定義されている既存のスタイルを styled-components で書き直していくという決定をしま... 続きを読む

styled-components（CSS in JS）をやめた理由と、不完全なCSS Modulesを愛する方法 - Qiita

2020/03/11 19 users Problem Qiita React angular CSS

Help us understand the problem. What is going on with this article? styled-components 画像は styled-components ツライっていう顔です。 Angularのようにスタイリングまで面倒を見てくれるUIフレームワークならまだしも、Reactの場合はコンポーネントのスタイリング方法も自身で選択しなければいけません。CSSのス... 続きを読む

Reactを使ったモダンなフロントエンド開発の環境構築 - Qiita

2019/08/18 257 users Qiita React TypeScript コンポーネント

はじめに Reactを中心としたフロントエンド開発において、以下のような構成を見かけることが多いと思います。 UIライブラリとしてReact 型のある言語としてTypeScript スタイル定義としてstyled-components コンポーネントの開発環境としてStorybook LinterとしてESLint FormatterとしてPrettier この記事では、各種ライ... 続きを読む

jQueryを卒業したかった僕がReact StaticでReactをイチから学んでWebサイトを作った話 | ヌーラボ

2018/03/26 697 users jQuery React typetalk ヌーラボ イチ

Typetalk フロントエンドエンジニアの岡藤です。先日Typetalk Webサイトリニューアル に伴い、フロントエンドの技術を jQuery から  React + styled-components  に刷新しました 。 本記事では、React を用いた Web サイト制作についてお伝えします。 はじめに タイトルにもあるように、僕は今まで JavaScript を書く必要がある時は使い慣... 続きを読む