AngularアプリケーションでどのようにCSSが書けるのかということにフォーカスして、CSSの書き方を紹介します。
AngularアプリケーションにおけるCSS設計手法ng-japan 2018
View Slide
@koubitbank, incCryptocurrency Exchange
CSS設計とは ?
CSS設計とは ?- BEM- SMACSS- OOCSS
なぜCSS設計が必要 ?
なぜCSS設計が必要 ?- 名前空間がない- 値の再利用が難しい- Web開発はCSSの弱い言語仕様との闘い
Angularでは ?
Angularでは、既存のCSS設計は不要
Angularでは、既存のCSS設計は不要Angularそのものが強力な設計である- Component- Scoped CSS
しかし、AngularにおいてもCSSの問題は多くある
しかし、AngularにおいてもCSSの問題は多くあるAngularを知り、より良いアプローチが必要
今日の話1. AngularにはどんなCSSがあるか2. どう値を共通化できるか
AngularにはどんなCSSがあるか
AngularにはどんなCSSがあるか1. Component CSS2. Shared CSS3. Global CSS
Component CSS- 1つのComponentに対して専用のCSS- CSSは読み込まれたComponentの中にだけ適用される
Component CSShero.component.css/.heroes {margin: 8px;padding: 0;width: 256px;}.hero-item {cursor: pointer;position: relative;}hero.component.ts@Component({selector: 'app-hero',templateUrl: './hero.component.html',styleUrls: ['./hero.component.css'],})export class HeroComponent {}
Shared CSS- 複数Componentに対して共通のCSS- CSSは読み込まれたComponentの中にだけ適用される
Shared CSShero-common.css/.hero-common-layout {display: block;padding: 8px;}.hero-common-table {border-collapse: collapse;}.hero-common-form fieldset {border: 0;}villain.component.ts@Component({selector: 'app-villain',templateUrl: './villain.component.html',styleUrls: ['./hero-common.css'],})export class VillainComponent {}hero.component.ts@Component({selector: 'app-hero',templateUrl: './hero.component.html',styleUrls: ['./hero-common.css'],})export class HeroComponent {}
Global CSS- 全Componentに対して共通に適用される- 普通のCSS
Global CSSstyle.css/.app-primary-color {color: red;}.app-flex-layout {display: flex;}.app-margin-1x {margin: 8px;}angular,json{..."styles": ["style.css"],...}
それぞれのCSSの使い分け
Component CSSShared CSSGlobal CSS全てのCSSの基本。このCSSだけでアプリケーションが構成できるのが理想。名前空間は使わず、本質的でシンプルな名前を使う。- 例) .button, .card, .listページ用のComponentのレイアウトなど、Componentにしづらい共通部分に使用。名前空間 & ユニークなclass名を使用し、必ず定義元を特定できるようにする。- 例) .hero-common-layout, .hero-common-formフレームワークとしてのCSSに使用する。(オリジナルなUtil系のCSSなど)名前空間 & ユニークなclass名を使用し、必ず定義元を特定できるようにする。- 例) .app-flex-layout, .app-margin-1x
おすすめ- Component CSSを使い、Global CSSを使用しない- 良いCSS設計とは、良いComponent設計- 複数ComponentにまたがるShared CSSが多い場合は、Component設計を見直す
どう値を共通化できるかどのようにしてアプリケーション全体に散らばる値を共通化するか ?
Sass (SCSS) を使用する- 変数- Mixin- 前述の3種類のCSSの値をSassのレベルで共通化
変数 / Mixin などのSass設定値Component CSS Shared CSS Global CSSSassの設定値から、各CSSファイルをトランスパイル
ディレクトリ構造と読み込みProject Structure- src- app- assets- environments- styles- variables/- mixins/- _common.scss..._common.scss@import './variables/index';@import './mixins/index';hero.component.scss@import 'common';villain.component.scss@import 'common';angular,json{..."stylePreprocessorOptions": {"includePaths": ["src/styles"]},...}
変数とMixinの使い所
変数Mixin色や数値など、値に関するものは変数にして、積極的に名前を付ける。変数の上書きは禁止。全ファイルで読み込む変数はユニークな名前にする。- 例) $layout-base-padding: 8px- 例) $primary-color: #4CAF50まとまった単位でのstyleのセットを共通化する時に使用する。値のセットはCSSのclassで共通化するよりも、Mixinを使用する。- 例) font, line-height, letter-spacing など関連する値をまとめる時
おすすめ- Sassの機能を積極的に使う- 値は変数として命名する- 正しい変数名は、それ自体がドキュメントになる
CSSの分け方 / 値の共通の仕方
CSSの分け方 / 値の共通の仕方まだまだ、その他のアプローチも考えられる
まずは、何よりも- 半年後にすぐに消せるコードを書くこと- CSSのコードは一番変わりやすい- どうすればメンテナンスしやすいかと考える意識が重要
Thank you !!