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
tatsumiakahori
June 27, 2022
Programming
0
360
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
200
self introduction 2
tatsumiakahori
0
62
Self introduction-Tatsumi Akahori
tatsumiakahori
0
520
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
450
ふつうの技術スタックでアート作品を作ってみる
akira888
0
220
dbt民主化とLLMによる開発ブースト ~ AI Readyな分析サイクルを目指して ~
yoshyum
2
200
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
PHPで始める振る舞い駆動開発(Behaviour-Driven Development)
ohmori_yusuke
2
240
deno-redisの紹介とJSRパッケージの運用について (toranoana.deno #21)
uki00a
0
160
What Spring Developers Should Know About Jakarta EE
ivargrimstad
0
360
A2A プロトコルを試してみる
azukiazusa1
2
1.3k
Blazing Fast UI Development with Compose Hot Reload (droidcon New York 2025)
zsmb
1
270
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
690
CursorはMCPを使った方が良いぞ
taigakono
1
210
エラーって何種類あるの?
kajitack
5
330
Featured
See All Featured
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Into the Great Unknown - MozCon
thekraken
39
1.9k
Art, The Web, and Tiny UX
lynnandtonic
299
21k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.3k
A better future with KSS
kneath
239
17k
Scaling GitHub
holman
459
140k
Bash Introduction
62gerente
614
210k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Done Done
chrislema
184
16k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
5
230
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.4k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
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