Slide 1
Slide 1 text
AngularアプリケーションにおけるCSS設計手法
ng-japan 2018
Slide 2
Slide 2 text
@kou
bitbank, inc
Cryptocurrency Exchange
Slide 3
Slide 3 text
CSS設計とは ?
Slide 4
Slide 4 text
CSS設計とは ?
- BEM
- SMACSS
- OOCSS
Slide 5
Slide 5 text
なぜCSS設計が必要 ?
Slide 6
Slide 6 text
なぜCSS設計が必要 ?
- 名前空間がない
- 値の再利用が難しい
- Web開発はCSSの弱い言語仕様との闘い
Slide 7
Slide 7 text
Angularでは ?
Slide 8
Slide 8 text
Angularでは、既存のCSS設計は不要
Slide 9
Slide 9 text
Angularでは、既存のCSS設計は不要
Angularそのものが強力な設計である
- Component
- Scoped CSS
Slide 10
Slide 10 text
しかし、AngularにおいてもCSSの問題は多くある
Slide 11
Slide 11 text
しかし、AngularにおいてもCSSの問題は多くある
Angularを知り、より良いアプローチが必要
Slide 12
Slide 12 text
今日の話
1. AngularにはどんなCSSがあるか
2. どう値を共通化できるか
Slide 13
Slide 13 text
AngularにはどんなCSSがあるか
Slide 14
Slide 14 text
AngularにはどんなCSSがあるか
1. Component CSS
2. Shared CSS
3. Global CSS
Slide 15
Slide 15 text
Component CSS
- 1つのComponentに対して専用のCSS
- CSSは読み込まれたComponentの中にだけ適
用される
Slide 16
Slide 16 text
Component CSS
hero.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 {
}
Slide 17
Slide 17 text
Shared CSS
- 複数Componentに対して共通のCSS
- CSSは読み込まれたComponentの中にだけ
適用される
Slide 18
Slide 18 text
Shared CSS
hero-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 {}
Slide 19
Slide 19 text
Global CSS
- 全Componentに対して共通に適用される
- 普通のCSS
Slide 20
Slide 20 text
Global CSS
style.css
/
.app-primary-color {
color: red;
}
.app-flex-layout {
display: flex;
}
.app-margin-1x {
margin: 8px;
}
angular,json
{
...
"styles": [
"style.css"
],
...
}
Slide 21
Slide 21 text
それぞれのCSSの使い分け
Slide 22
Slide 22 text
Component CSS
Shared CSS
Global 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
Slide 23
Slide 23 text
おすすめ
- Component CSSを使い、Global CSSを使用しない
- 良いCSS設計とは、良いComponent設計
- 複数ComponentにまたがるShared CSSが多い場合は、
Component設計を見直す
Slide 24
Slide 24 text
どう値を共通化できるか
どのようにしてアプリケーション全体に
散らばる値を共通化するか ?
Slide 25
Slide 25 text
Sass (SCSS) を使用する
- 変数
- Mixin
- 前述の3種類のCSSの値をSassのレベルで共通化
Slide 26
Slide 26 text
変数 / Mixin などのSass設定値
Component CSS Shared CSS Global CSS
Sassの設定値から、各CSSファイルをトランスパイル
Slide 27
Slide 27 text
ディレクトリ構造と読み込み
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"
]
},
...
}
Slide 28
Slide 28 text
変数とMixinの使い所
Slide 29
Slide 29 text
変数
Mixin
色や数値など、値に関するものは変数にして、積極的に名前を付ける。
変数の上書きは禁止。全ファイルで読み込む変数はユニークな名前にする。
- 例) $layout-base-padding: 8px
- 例) $primary-color: #4CAF50
まとまった単位でのstyleのセットを共通化する時に使用する。
値のセットはCSSのclassで共通化するよりも、Mixinを使用する。
- 例) font, line-height, letter-spacing など関連する値をまとめる時
Slide 30
Slide 30 text
おすすめ
- Sassの機能を積極的に使う
- 値は変数として命名する
- 正しい変数名は、それ自体がドキュメントになる
Slide 31
Slide 31 text
CSSの分け方 / 値の共通の仕方
Slide 32
Slide 32 text
CSSの分け方 / 値の共通の仕方
まだまだ、その他のアプローチも考えられる
Slide 33
Slide 33 text
まずは、何よりも
- 半年後にすぐに消せるコードを書くこと
- CSSのコードは一番変わりやすい
- どうすればメンテナンスしやすいかと考える意識が重要
Slide 34
Slide 34 text
Thank you !!