本当は気をつけたいCSS設計と効率的な開発環境について

本当は気をつけたい CSS設計と効率的な開発環境について

本日お話ししたいこと

プロフィール

CSS設計が必要な理由

CSS設計が必要だなと感じる場面

Case.1スタイルが使いまわせないとイラつく

Case.1スタイルが使いまわせないとイラつく

Case.1スタイルが使いまわせないとイラつく

Case.2他のスタイルが影響するとイラつく①

Case.2他のスタイルが影響するとイラつく①

Case.3他のスタイルが影響するとイラつく②

Case.3他のスタイルが影響するとイラつく②

Case.4マークアップを指定されるとイラつく

Case.4マークアップを指定されるとイラつく

Case.5スタイルが重複しているとイラつく

Case.5スタイルが重複しているとイラつく

Case.6関連クラスが点在しているとイラつく

Case.7メディアクエリ指定が遠いとイラつく

CSS設計で叶えたい事

私はこうした

汎用クラスを一通り用意して再利用可能に

バリエーションは継承クラスで

Sassを導入するとバリエーションの追加が楽

Sassを導入して部品ごとにファイルを分けて、管理をシンプルに

Sassのミックスインを利用すると、メディアクエリの指定が楽！

スタイルガイドを作り複数人でも管理しやすく

開発環境の話

私の開発環境

Sassってなんだ？

Sassのうれしいところ変数を登録できる

Sassのうれしいところネストができる①

Sassのうれしいところネストができる②

Sassのうれしいところ演算ができる

Sassのうれしいところ@extendでよくあるスタイルの使いまわし

Sassのうれしいところ@mixinでよくある記述を使いまわし

Sassのうれしいところ他にもたくさんいいことづくし

gulpってなんだ？

どうやって導入するの？

どんなしくみ？

gulpで面倒な処理をいろいろ自動化

gulpで面倒な処理をいろいろ自動化プロジェクトの構造（私の場合）

gulpで面倒な処理をいろいろ自動化Sassのコンパイルを自動化

gulpで面倒な処理をいろいろ自動化複数リソースを結合

gulpで面倒な処理をいろいろ自動化画像を最適化・軽量化

gulpで面倒な処理をいろいろ自動化スタイルガイドを自動生成