Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
AngularアプリケーションにおけるCSS設計手法
Search
kou
June 16, 2018
Programming
8
5.5k
AngularアプリケーションにおけるCSS設計手法
AngularアプリケーションでどのようにCSSが書けるのかということにフォーカスして、CSSの書き方を紹介します。
kou
June 16, 2018
Tweet
Share
More Decks by kou
See All by kou
Angular Webアプリケーションの最新設計手法.pdf
koumatsumot0
7
11k
NgRx v7
koumatsumot0
1
440
NgRxについて考えたこと
koumatsumot0
0
210
きれいなCSSを書くためのTools
koumatsumot0
0
370
Other Decks in Programming
See All in Programming
GrafanaのHTTP API を眺めてみよう
rinchoku
0
470
ML-прайсинг_на_Lamoda__вошли_и_вышли__приключение_на_20_минут__Слава_Цыганков.pdf
lamodatech
0
400
ActiveRecordの力でDBのメタデータを迅速に解析する
lnit
5
2k
Vaporモードを大規模サービスに最速導入して学びを共有する
kazukishimamoto
3
2.1k
ACES Meet におけるリリース作業改善の取り組み
fukucheee
0
150
急速に利用拡大を続ける飲食店向けサービスで 店内端末同士のローカル通信を追加設定なしで実現した話
whatasoda
0
140
本編では話さない Zig の話
andpad
2
120
Mercari AI/LLM Hackathon TeamBの発表資料
imaikosuke
0
190
のびしろを広げる巻き込まれ力:偶然を活かすキャリアの作り方/oso2024
takahashiikki
1
250
Vertical Architectures for Scalable Angular Applications
manfredsteyer
PRO
0
210
Google Play Consoleデベロッパー アカウントの確認 / Verifying your Play Console developer account
kubode
0
310
Nuxt UI Pro、NuxtHub、Nuxt Scripts、Nuxtエコシステムをふんだんに利用して開発するコーポレートサイト@Vue Fes Japan 2024
shingangan
3
540
Featured
See All Featured
Writing Fast Ruby
sferik
626
60k
Unsuck your backbone
ammeep
668
57k
Java REST API Framework Comparison - PWX 2021
mraible
PRO
28
7.6k
Into the Great Unknown - MozCon
thekraken
31
1.4k
Statistics for Hackers
jakevdp
796
220k
For a Future-Friendly Web
brad_frost
174
9.4k
Raft: Consensus for Rubyists
vanstee
136
6.6k
Side Projects
sachag
452
42k
A designer walks into a library…
pauljervisheath
202
24k
Imperfection Machines: The Place of Print at Facebook
scottboms
264
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.6k
Building Your Own Lightsaber
phodgson
102
6k
Transcript
AngularアプリケーションにおけるCSS設計手法 ng-japan 2018
@kou bitbank, inc Cryptocurrency 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 CSS 2. Shared CSS 3. Global CSS
Component CSS - 1つのComponentに対して専用のCSS - CSSは読み込まれたComponentの中にだけ適 用される
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 { }
Shared CSS - 複数Componentに対して共通のCSS - CSSは読み込まれたComponentの中にだけ 適用される
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 {}
Global CSS - 全Componentに対して共通に適用される - 普通のCSS
Global CSS style.css / .app-primary-color { color: red; } .app-flex-layout
{ display: flex; } .app-margin-1x { margin: 8px; } angular,json { ... "styles": [ "style.css" ], ... }
それぞれのCSSの使い分け
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
おすすめ - Component CSSを使い、Global CSSを使用しない - 良いCSS設計とは、良いComponent設計 - 複数ComponentにまたがるShared CSSが多い場合は、
Component設計を見直す
どう値を共通化できるか どのようにしてアプリケーション全体に 散らばる値を共通化するか ?
Sass (SCSS) を使用する - 変数 - Mixin - 前述の3種類のCSSの値をSassのレベルで共通化
変数 / Mixin などのSass設定値 Component CSS Shared CSS Global CSS
Sassの設定値から、各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 !!