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
TSデザイン改修で得たCSS設計の学び
Search
Sponsored
·
SiteGround - Reliable hosting with speed, security, and support you can count on.
→
tatsumiakahori
June 27, 2022
Programming
0
380
TSデザイン改修で得たCSS設計の学び
デザイン改修に併せて行ったCSS設計の見直しについてまとめました。
tatsumiakahori
June 27, 2022
Tweet
Share
More Decks by tatsumiakahori
See All by tatsumiakahori
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
260
clip-path使ってみた
tatsumiakahori
0
280
リッチでいい感じなWebサイトをお金も労力もかけずに作る方法
tatsumiakahori
0
210
self introduction 2
tatsumiakahori
0
67
Self introduction-Tatsumi Akahori
tatsumiakahori
0
530
Other Decks in Programming
See All in Programming
AWS re:Invent 2025参加 直前 Seattle-Tacoma Airport(SEA)におけるハードウェア紛失インシデントLT
tetutetu214
2
120
MUSUBIXとは
nahisaho
0
140
Rust 製のコードエディタ “Zed” を使ってみた
nearme_tech
PRO
0
210
余白を設計しフロントエンド開発を 加速させる
tsukuha
7
2.1k
AIによる開発の民主化を支える コンテキスト管理のこれまでとこれから
mulyu
3
500
KIKI_MBSD Cybersecurity Challenges 2025
ikema
0
1.3k
Apache Iceberg V3 and migration to V3
tomtanaka
0
170
MDN Web Docs に日本語翻訳でコントリビュート
ohmori_yusuke
0
660
[KNOTS 2026登壇資料]AIで拡張‧交差する プロダクト開発のプロセス および携わるメンバーの役割
hisatake
0
300
AI巻き込み型コードレビューのススメ
nealle
2
1.4k
CSC307 Lecture 02
javiergs
PRO
1
780
プロダクトオーナーから見たSOC2 _SOC2ゆるミートアップ#2
kekekenta
0
230
Featured
See All Featured
How People are Using Generative and Agentic AI to Supercharge Their Products, Projects, Services and Value Streams Today
helenjbeal
1
130
Optimizing for Happiness
mojombo
379
71k
Heart Work Chapter 1 - Part 1
lfama
PRO
5
35k
Tips & Tricks on How to Get Your First Job In Tech
honzajavorek
0
440
It's Worth the Effort
3n
188
29k
First, design no harm
axbom
PRO
2
1.1k
Writing Fast Ruby
sferik
630
62k
Build The Right Thing And Hit Your Dates
maggiecrowley
39
3k
Music & Morning Musume
bryan
47
7.1k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
52
5.8k
Self-Hosted WebAssembly Runtime for Runtime-Neutral Checkpoint/Restore in Edge–Cloud Continuum
chikuwait
0
340
Visualization
eitanlees
150
17k
Transcript
STUDIO ARCANA CO.,LTD TS CSS
PSI JavaScript CSS View
FV ↪︎ gma PSI ↪︎JS ↪︎ CSS PC SP PC
SP PC SP
CSS BEM( ) OOCSS( ) SMACCS( ):bootstrap( ) ↪︎ .header-top__main-title
wine-red class Bootstrap CSS
MindBEMding .block__element--modi er Block: Element: Block Modi er: Block Element
.header__button red .recommendCondition ぽ .headerTop__mainTitle wineRed × .header-top__main-title wine-red CSS BEM BEM CSS BEM block__element_modi er MindBEMding BEM BEM MindBEMding
CSS OOCSS Block e m class= btn btn large btn
red SMACCS class= menu is-active BEM modi er JS bootstrap ㅟ ㅟ ㅟ ㅟ ㅟ ㅟ CSS
CSS CSS CSS BEM
None
None
Block ↪︎Block
.b__e e modi er .b__e block element .b__e e A
.headerTop__logo image (.b__e e) B .headerTop__logoImage (.b__e)
block block .estateTable block block .estateTable
> Foreach
BEM block .e m " - Pattern Sass
CSS CSS CSS BEM
CSS Enduring CSS CSS CSS Ben Frain CSS CSS (
) ECSS
CSS CSS 策 ECSS
策 策 CSS
CSS 策 BEM CSS ↪︎ BEM BEM BEM
CSS 綻 CSS 策 Web web web CSS CSS nuxt.js
https://github.com/manabuyasuda/styleguide/blob/master/how-to-bem.md CSS / / 2021 /
STUDIO ARCANA CO.,LTD 終
補⾜
HTML ↪︎
.headerBottomMobile__li link __li link .headerBottomMobile __li > link Scss &
& block CSS