AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV - Speaker Deck

2019/05/18 66 users AbemaTV リファクタリング by AbemaTV 構成

AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" by AbemaTV リファクタリングをしていたらCSS Modulesを使っていたにも関わらずCSSが壊れてしまった私達は、CSS ModulesがCSSの特性・我々のプロダクトの構成や開発方針に合わないと判断し「BEMベースのクラス名設計 + PostCSS」へ... 続きを読む

AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" in AbemaTV - Speaker Deck

2019/05/18 66 users AbemaTV リファクタリング Speaker Deck

AbemaTVにおけるCSS is too fragile問題に対する解 / Solution of "CSS is too fragile" in AbemaTV リファクタリングをしていたらCSS Modulesを使っていたにも関わらずCSSが壊れてしまった私達は、CSS ModulesがCSSの特性・我々のプロダクトの構成や開発方針に合わないと判断し「BEMベースのクラス名設計 + PostCSS」へ... 続きを読む

[CSS]レスポンシブ対応、フォントに適切なサイズをビューポートに基づいて自動計算して適用するスタイルシート | コリス

2019/02/18 91 users ビューポート コリス RFS プリプロセッサ Stylus

フォントに適切なサイズをブラウザのビューポートのサイズに基づいて、自動的に計算して適用するスタイルシート「RFS（Responsive Font Size）」を紹介します。 Sass, Less, Stylus, PostCSSなどのプリプロセッサやポストプロセッサ対応です。 RFS(Responsive Font Size) -GitHub RFS(Responsive Font Size)の特徴 RFS(R... 続きを読む

QiitaのCSS構成2017 - Qiita

2017/12/27 156 users Qiita Sass CSS 去年 構成

この投稿は Increments Advent Calendar 2017 の18日の記事です。去年に続き、2017年の Qiita の CSS 構成について述べます。 2016年版はこちら: QiitaのCSS構成2016 プリプロセッサー 2016年は CSS のビルドフローで一貫して PostCSS を使っていましたが、2017年では プリプロセッサーとして Sass (node-sass)... 続きを読む

Cacooの次期エディターでWebpackのビルドを6倍早くした話-Wepackビルドパフォーマンス改善ガイド | ヌーラボ

2017/12/20 53 users Webpack RIOT Cacoo TypeScript

こんにちは。みなさまが Cacoo で図の編集をする エディター を開発している、Cacooチームの国広です。Cacooチームでは、エディター部分のビルドに  Webpack  を使用しています。ビルド対象は TypeScript 、JavaScript、 PostCSS 、 Riot （のtagファイル）、画像等です。 そのままビルドするには少し我慢ならない程度に待たされるようになったので、 W... 続きを読む

社内でCSSの新しい方針について話したメモ - Qiita

2016/08/18 141 users Qiita cssnext CSS CSS Modules

社内で新しいドメインを設立するにあたり、 CSS Modules, PostCSS, cssnext を試してみました。 このスライドは、その際の説明に使ったものです。せっかくなので公開します。 「プロトタイプ作成で試してみたけど、みなさんどう思いますか？」くらいの温度感。本番採用が確定したわけではありません。何かお役に立つことがアレば幸いです。 以後、説明に使ったスライド。 おしながき 1. コ... 続きを読む

JavaScriptを劇的に教えやすくするWebサーバ作りました - Qiita

2016/07/16 433 users Qiita rollup Babel Sass Gulp

近年、JavaScriptでコードを書こうとすると、お膳立て7割、コード書き3割みたいな事態がざらにあります。「お膳立て」の例としては、Gulp, Babel, Sass, PostCSS, WebPack, Rollup, Browserifyほか数限りなく。 たしかに、一旦フロントエンド開発に慣れてしまえば、お膳立てにかける時間は短縮することが可能です。でも、これを初学者に強いるのはツラすぎる... 続きを読む

PostCSSとcssnextで最新CSS仕様を先取り！ | HTML5Experts.jp

2015/09/28 162 users Autoprefixer cssnext Inc スライド

どうも、Kaizen Plarform, Inc.の@t32kです。今日はPostCSSについて解説しようと思います。PostCSSについてはそれを解説した同僚のスライドも素晴らしいので、そちらも参考にしてもらえば幸いです。PostCSS とは何か // Speaker DeckPostCSSとはなにか？PostCSSは、Autoprefixerの作者でも有名なロシアのAndrey Sitnik氏... 続きを読む

PostCSS とは何か // Speaker Deck

2015/08/22 136 users Speaker Deck

関西フロントエンドUG 主催の「Grand-Frontend-Osaka 2015 Summer (http://kfug.github.io/events/2015/grandfrontendosaka/ )」で発表した内容です。 続きを読む

PostCSSとは何か - morishitter blog

2015/08/03 136 users プラグイ GitHub morishitter blog

2015-08-03 PostCSSとは何か PostCSSというnode.js製のツールがある。 PostCSSのGitHubでのStar数は4000を超え、海外のブログではPostCSSについての記事をよく目にするようになった。しかしまだ日本では盛り上がりを感じていないので、日本語のPostCSSの記事を書くことにした。 PostCSS PostCSSとは、JavaScriptで書いたプラグイ... 続きを読む

cssnextでみる次世代CSSとPostCSS | Yucchiy's blog

2015/04/22 85 users cssnext Stylus Sass ウェブデザイン 主流

22 April, 2015 cssnextでみる次世代CSSとPostCSS 今日ではSassやStylusなどaltCSSを用いたウェブデザインは主流になりつつあるが, 一方で, 次世代CSSではaltCSSで実装されているような様々な機能追加が検討されている. そこで次世代CSSを先取りするcssnextと次世代CSSで足りない機能をPostCSSのプラグインを用いて補う方法について紹介する... 続きを読む

CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS - morishitter blog

2014/12/06 62 users rework CSSプリプロセッサー CSSプリプロセッサ

2014-12-07 CSSのプリプロセスとポストプロセス、そしてReworkとPostCSS この投稿はFrontrend Advent Calendar 2014の7日目の記事です。 CSSプリプロセッサーとポストプロセッサー、そしてそれらをビルドするツールであるReworkとPostCSSについて。 CSSプリプロセッサー、ポストプロセッサー まずは用語の定義を確認する。CSSプリプロセッサ... 続きを読む