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
370
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
65
Self introduction-Tatsumi Akahori
tatsumiakahori
0
520
Other Decks in Programming
See All in Programming
私の後悔をAWS DMSで解決した話
hiramax
4
210
AIを活用し、今後に備えるための技術知識 / Basic Knowledge to Utilize AI
kishida
22
5.9k
請來的 AI Agent 同事們在寫程式時,怎麼用 pytest 去除各種幻想與盲點
keitheis
0
130
Tool Catalog Agent for Bedrock AgentCore Gateway
licux
7
2.5k
Android 16 × Jetpack Composeで縦書きテキストエディタを作ろう / Vertical Text Editor with Compose on Android 16
cc4966
2
270
CJK and Unicode From a PHP Committer
youkidearitai
PRO
0
110
Kiroで始めるAI-DLC
kaonash
2
630
複雑なドメインに挑む.pdf
yukisakai1225
5
1.2k
🔨 小さなビルドシステムを作る
momeemt
4
690
Ruby Parser progress report 2025
yui_knk
1
460
はじめてのMaterial3 Expressive
ym223
2
900
Zendeskのチケットを Amazon Bedrockで 解析した
ryokosuge
3
320
Featured
See All Featured
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
Agile that works and the tools we love
rasmusluckow
330
21k
Navigating Team Friction
lara
189
15k
Rebuilding a faster, lazier Slack
samanthasiow
83
9.2k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
229
22k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
Why Our Code Smells
bkeepers
PRO
339
57k
The Pragmatic Product Professional
lauravandoore
36
6.9k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
RailsConf 2023
tenderlove
30
1.2k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
12
1.1k
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