12周年記念パーティ開催! 2024/5/10(金) 19:00

ECSSから学ぶ、PostCSSを利用した環境構築

全7回

Enduring CSS(ECSS)で使われている考え方を元に、PostCSSを用いたさまざまなビルド環境の構築例を紹介します。(2017年4月より、「PostCSSでECSSビルド環境構築」からシリーズ名を改題)

第7回 色管理のためのビルド

前回紹介した色管理のアプローチを踏まえ、色管理を行う仕組みをビルドへ組み込んでみます。併せて、色についての情報をまとめたガイドを作成し、色設計を行っていくための方法を考えます。

第6回 色管理のアプローチ

CSS内で似た色の指定をしてしまうのを防ぐために、変数に色を格納して管理する設計を考えます。今回は2つのアプローチを紹介し、それらを元にCSSでの色の管理方法について理解を深めます。

第5回 CSS Colorguardを使った色管理

CSS内で登場する色がバラバラになると、デザインの整合性を欠いてしまいます。そこで、CSS Colorguardというツールを使い、色を変数で管理する仕組みをビルドに追加する方法を解説します。

第4回 Mixinとの付き合い方

今回は、ECSSにおけるMixinの考え方と、postcss-mixinsの使い方を解説しつつ、ECSSのビルド環境を作っていきます。

第3回 ディレクトリ構成とglobインポート

今回は、ECSSにおけるディレクトリ構成の考え方と、@import文でglobを利用可能にするpostcss-easy-importを解説しつつ、ECSSのビルド環境を作っていきます。

第2回 括弧の入れ子と変数に対する考え方

今回は、前回紹介したpostcss-nestedで可能になる括弧の入れ子と、postcss-simple-varsで可能になる変数の機能を、ECSSではどのように考えているのかを解説します。

第1回 PostCSSの基本的な使い方

名前空間によりモジュールを分類することで、コードの複雑化を防ぐアプローチを取るECSSの、PostCSSを用いたビルド環境の構築例を紹介します。今回は、PostCSSの基本について触れます。