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
Quand Symfony, ApiPlatform, OpenAI et LangChain s'allient pour exploiter vos PDF : de la théorie à la production…
ahmedbhs123
0
150
技術同人誌をMCP Serverにしてみた
74th
1
630
初学者でも今すぐできる、Claude Codeの生産性を10倍上げるTips
s4yuba
16
10k
生成AI時代のコンポーネントライブラリの作り方
touyou
1
120
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
2
620
Select API from Kotlin Coroutine
jmatsu
1
230
LINEヤフー データグループ紹介
lycorp_recruit_jp
0
2.3k
Porting a visionOS App to Android XR
akkeylab
0
370
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
910
都市をデータで見るってこういうこと PLATEAU属性情報入門
nokonoko1203
1
600
今ならAmazon ECSのサービス間通信をどう選ぶか / Selection of ECS Interservice Communication 2025
tkikuc
21
3.9k
WindowInsetsだってテストしたい
ryunen344
1
240
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Rails Girls Zürich Keynote
gr2m
94
14k
How GitHub (no longer) Works
holman
314
140k
Building Better People: How to give real-time feedback that sticks.
wjessup
367
19k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Bash Introduction
62gerente
614
210k
Build your cross-platform service in a week with App Engine
jlugia
231
18k
Navigating Team Friction
lara
187
15k
Writing Fast Ruby
sferik
628
62k
The World Runs on Bad Software
bkeepers
PRO
69
11k
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