$30 off During Our Annual Pro Sale. View Details »

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

kou
June 16, 2018

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

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

kou

June 16, 2018
Tweet

More Decks by kou

Other Decks in Programming

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