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
330
TSデザイン改修で得たCSS設計の学び
デザイン改修に併せて行ったCSS設計の見直しについてまとめました。
tatsumiakahori
June 27, 2022
Tweet
Share
More Decks by tatsumiakahori
See All by tatsumiakahori
Most Valuable Bug(?) ~インシデント未遂から得た学び~
tatsumiakahori
0
240
clip-path使ってみた
tatsumiakahori
0
260
リッチでいい感じなWebサイトをお金も労力もかけずに作る方法
tatsumiakahori
0
200
self introduction 2
tatsumiakahori
0
39
Self introduction-Tatsumi Akahori
tatsumiakahori
0
500
Other Decks in Programming
See All in Programming
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
プロンプトエンジニアリング入門
tomokusaba
2
970
Open Source Swiftc Workshop
kitasuke
1
180
Prepare for Jakarta EE 11 - Performance and Developer Productivity
ivargrimstad
0
490
WinUI 3デモ - "CommunityToolkit.Mvvm"NuGetパッケージ編
andrewkeepcoding
0
130
Introduction for Open Source Swift Workshop
giginet
PRO
0
180
Compiling Python to WebAssembly with py2wasm
syrusakbary
0
130
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
Enhancing Applications with Accessibility API
kishikawakatsumi
3
880
上手な探索的テストとその上達方法について
matsu802
4
650
Why 1 + 1 = 2 in Swift?
1plus4
1
240
ここ1~2年くらいで 使えるようになった(主要ブラウザーの最新版 がすべて対応した ) ウェブの新機能について ランダムに喋る!
myzkyy
9
6.4k
Featured
See All Featured
Clear Off the Table
cherdarchuk
82
310k
Bash Introduction
62gerente
604
210k
The Art of Programming - Codeland 2020
erikaheidi
40
12k
Making Projects Easy
brettharned
106
5.4k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
67
38k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
6
950
Automating Front-end Workflow
addyosmani
1353
200k
How to name files
jennybc
62
92k
The Language of Interfaces
destraynor
150
23k
Web Components: a chance to create the future
zenorocha
304
41k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
501
140k
GraphQLの誤解/rethinking-graphql
sonatard
48
9.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