タグ

CSSとnode.jsに関するytkwsmのブックマーク (3)

  • 静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って

    ここ数年で、「デザインシステム」はウェブ開発やデザインのコミュニティでとても人気の話題になりました。そして「コンポーネント」として定義される一連のデザイン成果物を開発・メンテナンスするために、StyleguidistやStorybookといったツールが多くのプロジェクトで一般的に使われています。このプロセスはデザインシステムという概念の一部として、コンポーネント駆動開発(Component Driven Development)と定義することができるでしょう。 さて、コンポーネント駆動開発にまつわる資料のほとんどは、ReactVueAngularといった、フロントエンドのビューのためのメジャーなライブラリを利用することについてのものです。しかしもっとトラディショナルな技術スタックの場合はどうすればいいでしょう? 例えば私たちスタンダードデザインユニットでは、静的なHTMLCSSのアセ

    静的なHTMLのためのコンポーネント駆動開発―その導入を振り返って
  • Clean CSSだけ

    CSSの書き方が昔風になりつつある。SassにもPostCSSにも依存しない書き方だ。その上で、あってもなくても良い処理を、また別の安定した独立ツールに任せるようにした。その独立ツールとしてはClean CSSが優秀なので、これに任せてあとは気にしない。 もちろんこのウェブサイトのCSSのような小さな規模での話で、規模が大きいならどちらかは使う。小さな規模では、多くの環境でそのまま動くように書く。大きな規模では、その状態になるようにSassやPostCSSを使って書く。 SassやPostCSSだけでどうにかしようとすると、ともすればコードが奇抜なCSSのような何かになりがちだ。日常的にそうした環境に浸かっていると、普通のCSSが書けなくなるどころか、読めなくなる。CSSのデバッグ環境が開発者ツールにまだ依存している現在、読めなくなるのはかなりまずい。 小さな規模では、普通のCSSとして書

    Clean CSSだけ
  • svg-spriteで無駄の無いSVGスプライトを生成する - DeNA Design

    最近の Web サイトで使われることが多くなった SVG 画像ですが、私が現場で行っている SVG スプライトの生成方法、実装方法をご紹介します。 近年行っていたスプライト画像のように、1つのファイルに複数の SVG 画像を扱う手法です。 SVG スプライトには複数の指定方法がありますが、今回はsymbol要素に変換して、それを HTML でuse要素を使用して指定する方法をご紹介します。

    svg-spriteで無駄の無いSVGスプライトを生成する - DeNA Design
  • 1