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.9k
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
480
NgRxについて考えたこと
koumatsumot0
0
240
きれいなCSSを書くためのTools
koumatsumot0
0
420
Other Decks in Programming
See All in Programming
【第4回】関東Kaggler会「Kaggleは執筆に役立つ」
mipypf
0
1k
開発チーム・開発組織の設計改善スキルの向上
masuda220
PRO
18
9.8k
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
2
120
Honoアップデート 2025年夏
yusukebe
1
920
フロントエンドのmonorepo化と責務分離のリアーキテクト
kajitack
2
160
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
1k
もうちょっといいRubyプロファイラを作りたい (2025)
osyoyu
0
300
More Approvers for Greater OSS and Japan Community
tkikuc
1
110
CSC305 Summer Lecture 12
javiergs
PRO
0
130
react-callを使ってダイヤログをいろんなとこで再利用しよう!
shinaps
1
180
Swift Updates - Learn Languages 2025
koher
2
450
Namespace and Its Future
tagomoris
6
690
Featured
See All Featured
Fantastic passwords and where to find them - at NoRuKo
philnash
52
3.4k
A Tale of Four Properties
chriscoyier
160
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
332
24k
Done Done
chrislema
185
16k
Typedesign – Prime Four
hannesfritz
42
2.8k
Statistics for Hackers
jakevdp
799
220k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
36
2.5k
Being A Developer After 40
akosma
90
590k
Intergalactic Javascript Robots from Outer Space
tanoku
272
27k
How GitHub (no longer) Works
holman
315
140k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
358
30k
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 !!