Upload
yasuko-kimura
View
659
Download
0
Embed Size (px)
Citation preview
本当は気をつけたい 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で面倒な処理をいろいろ自動化スタイルガイドを自動生成