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
40
Self introduction-Tatsumi Akahori
tatsumiakahori
0
500
Other Decks in Programming
See All in Programming
StoreKit2によるiOSのアプリ内課金のリニューアル
kangnux
0
110
Hanami and htmx
bkuhlmann
0
210
0→1と1→10の狭間で Javaという技術選定を振り返る/Reflecting on the Decision to Choose Java Between Scaling from 0 to 1 and 1 to 10
jaguar_imo
2
390
Node.js v22 で変わること
yosuke_furukawa
PRO
10
3.6k
ADRを一年運用してみた/adr_after_a_year
hanhan1978
7
2.4k
Rubyでたのしむクリエイティブコーディング/Enjoy Creative coding with Ruby
chobishiba
1
210
Azure OpenAI Serviceのプロンプトエンジニアリング入門
tomokusaba
3
800
デフォルトにして至高、RubyMineの大好きな所
ruzia
0
480
効率化に挑戦してみたらモバイル開発が少し快適になった話
ryunakayama
0
130
ゆるい個人開発のススメ
kuroppe1819
10
1k
PHP8.3の機能を振り返る / Review of PHP 8.3 features
seike460
PRO
1
110
障害対応を起点としたもっといい開発と運用のサイクル作りのためにできること / Hatena Enginner Seminar #29
polamjag
0
250
Featured
See All Featured
Fireside Chat
paigeccino
21
2.6k
Building Adaptive Systems
keathley
31
1.9k
Automating Front-end Workflow
addyosmani
1356
200k
Infographics Made Easy
chrislema
238
18k
Practical Orchestrator
shlominoach
182
9.7k
Debugging Ruby Performance
tmm1
70
11k
Scaling GitHub
holman
457
140k
Creatively Recalculating Your Daily Design Routine
revolveconf
210
11k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
227
16k
Learning to Love Humans: Emotional Interface Design
aarron
267
39k
The MySQL Ecosystem @ GitHub 2015
samlambert
243
12k
GitHub's CSS Performance
jonrohan
1025
450k
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