AngularアプリケーションにおけるCSS設計手法

AngularアプリケーションでどのようにCSSが書けるのかということにフォーカスして、CSSの書き方を紹介します。

Transcript

1. AngularアプリケーションにおけるCSS設計手法
   ng-japan 2018
   

   View Slide

2. @kou
   bitbank, inc
   Cryptocurrency Exchange
   

   View Slide

3. CSS設計とは ?
   

   View Slide

4. CSS設計とは ?
   - BEM
   - SMACSS
   - OOCSS
   

   View Slide

5. なぜCSS設計が必要 ?
   

   View Slide

6. なぜCSS設計が必要 ?
   - 名前空間がない
   - 値の再利用が難しい
   - Web開発はCSSの弱い言語仕様との闘い
   

   View Slide

7. Angularでは ?
   

   View Slide

8. Angularでは、既存のCSS設計は不要
   

   View Slide

9. Angularでは、既存のCSS設計は不要
   Angularそのものが強力な設計である
   - Component
   - Scoped CSS
   

   View Slide

10. しかし、AngularにおいてもCSSの問題は多くある
    

    View Slide

11. しかし、AngularにおいてもCSSの問題は多くある
    Angularを知り、より良いアプローチが必要
    

    View Slide

12. 今日の話
    1. AngularにはどんなCSSがあるか
    2. どう値を共通化できるか
    

    View Slide

13. AngularにはどんなCSSがあるか
    

    View Slide

14. AngularにはどんなCSSがあるか
    1. Component CSS
    2. Shared CSS
    3. Global CSS
    

    View Slide

15. Component CSS
    - 1つのComponentに対して専用のCSS
    - CSSは読み込まれたComponentの中にだけ適
    用される
    

    View Slide

16. 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 {
    }
    

    View Slide

17. Shared CSS
    - 複数Componentに対して共通のCSS
    - CSSは読み込まれたComponentの中にだけ
    適用される
    

    View Slide

18. 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 {}
    

    View Slide

19. Global CSS
    - 全Componentに対して共通に適用される
    - 普通のCSS
    

    View Slide

20. Global CSS
    style.css
    /
    .app-primary-color {
    color: red;
    }
    .app-flex-layout {
    display: flex;
    }
    .app-margin-1x {
    margin: 8px;
    }
    angular,json
    {
    ...
    "styles": [
    "style.css"
    ],
    ...
    }
    

    View Slide

21. それぞれのCSSの使い分け
    

    View Slide

22. 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
    

    View Slide

23. おすすめ
    - Component CSSを使い、Global CSSを使用しない
    - 良いCSS設計とは、良いComponent設計
    - 複数ComponentにまたがるShared CSSが多い場合は、
    Component設計を見直す
    

    View Slide

24. どう値を共通化できるか
    どのようにしてアプリケーション全体に
    散らばる値を共通化するか ?
    

    View Slide

25. Sass (SCSS) を使用する
    - 変数
    - Mixin
    - 前述の3種類のCSSの値をSassのレベルで共通化
    

    View Slide

26. 変数 / Mixin などのSass設定値
    Component CSS Shared CSS Global CSS
    Sassの設定値から、各CSSファイルをトランスパイル
    

    View Slide

27. ディレクトリ構造と読み込み
    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"
    ]
    },
    ...
    }
    

    View Slide

28. 変数とMixinの使い所
    

    View Slide

29. 変数
    Mixin
    色や数値など、値に関するものは変数にして、積極的に名前を付ける。
    変数の上書きは禁止。全ファイルで読み込む変数はユニークな名前にする。
    - 例) $layout-base-padding: 8px
    - 例) $primary-color: #4CAF50
    まとまった単位でのstyleのセットを共通化する時に使用する。
    値のセットはCSSのclassで共通化するよりも、Mixinを使用する。
    - 例) font, line-height, letter-spacing など関連する値をまとめる時
    

    View Slide

30. おすすめ
    - Sassの機能を積極的に使う
    - 値は変数として命名する
    - 正しい変数名は、それ自体がドキュメントになる
    

    View Slide

31. CSSの分け方 / 値の共通の仕方
    

    View Slide

32. CSSの分け方 / 値の共通の仕方
    まだまだ、その他のアプローチも考えられる
    

    View Slide

33. まずは、何よりも
    - 半年後にすぐに消せるコードを書くこと
    - CSSのコードは一番変わりやすい
    - どうすればメンテナンスしやすいかと考える意識が重要
    

    View Slide

34. Thank you !!
    

    View Slide