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
ふつうの技術スタックでアート作品を作ってみる
akira888
0
420
Composerが「依存解決」のためにどんな工夫をしているか #phpcon
o0h
PRO
1
250
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
なぜ「共通化」を考え、失敗を繰り返すのか
rinchoku
1
630
#kanrk08 / 公開版 PicoRubyとマイコンでの自作トレーニング計測装置を用いたワークアウトの理想と現実
bash0c7
1
680
AI時代のソフトウェア開発を考える(2025/07版) / Agentic Software Engineering Findy 2025-07 Edition
twada
PRO
58
16k
PHP 8.4の新機能「プロパティフック」から学ぶオブジェクト指向設計とリスコフの置換原則
kentaroutakeda
2
740
VS Code Update for GitHub Copilot
74th
2
600
すべてのコンテキストを、 ユーザー価値に変える
applism118
3
1.2k
Modern Angular with Signals and Signal Store:New Rules for Your Architecture @enterJS Advanced Angular Day 2025
manfredsteyer
PRO
0
190
コードの90%をAIが書く世界で何が待っているのか / What awaits us in a world where 90% of the code is written by AI
rkaga
50
32k
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
14
9.5k
Featured
See All Featured
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Done Done
chrislema
184
16k
Statistics for Hackers
jakevdp
799
220k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.5k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Typedesign – Prime Four
hannesfritz
42
2.7k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
Facilitating Awesome Meetings
lara
54
6.4k
Code Review Best Practice
trishagee
69
18k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
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