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
CSSのクラス名は 機能じゃなくて 役割でつけたい話
Search
takanorip
December 19, 2017
Technology
1
360
CSSのクラス名は 機能じゃなくて 役割でつけたい話
takanorip
December 19, 2017
Tweet
Share
More Decks by takanorip
See All by takanorip
Eleventy3.0 で始める爆速個人ブログ開発!
takanorip
0
100
Webフォント選定の極意!フォントの基本から最新トレンドまで徹底解説
takanorip
5
780
効果的な管理画面を デザインをするために 避けるべき5つの罠
takanorip
14
6.9k
社内管理画面のデザインもプロダクトデザイン
takanorip
4
1.8k
早わかり W3C Community Group
takanorip
0
460
Ubieとアクセシビリティのこれからを考える
takanorip
0
420
2023年版 デザインシステム 技術選定の勘所 - フロントエンドカンファレンス沖縄
takanorip
2
3.8k
Astroで始める爆速個人サイト開発
takanorip
15
11k
後悔しないデザインシステムの始め方
takanorip
4
3.1k
Other Decks in Technology
See All in Technology
Apache Iceberg Case Study in LY Corporation
lycorptech_jp
PRO
0
330
Iceberg Meetup Japan #1 : Iceberg and Databricks
databricksjapan
0
380
クラウド関連のインシデントケースを収集して見えてきたもの
lhazy
8
1.2k
事業モメンタムを生み出すプロダクト開発
macchiitaka
0
100
ESXi で仮想化した ARM 環境で LLM を動作させてみるぞ
unnowataru
0
180
自分だけの仮想クラスタを高速かつ効率的に作る kubefork
donkomura
0
100
IAMポリシーのAllow/Denyについて、改めて理解する
smt7174
2
210
【5分でわかる】セーフィー エンジニア向け会社紹介
safie_recruit
0
19k
データエンジニアリング領域におけるDuckDBのユースケース
chanyou0311
9
2.2k
IAMのマニアックな話2025
nrinetcom
PRO
4
950
ExaDB-XSで利用されているExadata Exascaleについて
oracle4engineer
PRO
3
260
Potential EM 制度を始めた理由、そして2年後にやめた理由 - EMConf JP 2025
hoyo
2
2.7k
Featured
See All Featured
Building Applications with DynamoDB
mza
93
6.2k
Why Our Code Smells
bkeepers
PRO
336
57k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Docker and Python
trallard
44
3.3k
Building Your Own Lightsaber
phodgson
104
6.2k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
248
1.3M
Learning to Love Humans: Emotional Interface Design
aarron
273
40k
Testing 201, or: Great Expectations
jmmastey
42
7.2k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
46
2.3k
Designing Experiences People Love
moore
140
23k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
29
1k
Faster Mobile Websites
deanohume
306
31k
Transcript
$44ͷΫϥε໊ ػೳ͡Όͳͯ͘ ׂͰ͚͍ͭͨ 5BLBOPSJ0LJ ΄ΖΑ͍ͯͬ͘ʢҎԼུʣ
ࣗݾհ w େଚلʢΦΦΩλΧϊϦ!UBLBOPSJQʣ w גࣜձࣾεϚʔτυϥΠϒ w ϑϩϯτΤϯυΤϯδχΞ w 3FBDUɺ7VFɺ8PSE1SFTTɺΣϒ੍࡞શൠ w
গྛࣉݓ๏ࡾஈʢϒϥϯΫʣ
None
5-%3 w Ϋϥε໊ͱελΠϧΛҰॹʹͨ͘͠ͳ͍ w Ϋϥε໊ͳΔ͘ݻ༗ͷ໊લΛ͚͍ͭͨ w ελΠϧͷڞ௨Խ4BTTͳͲͷNJYJOͳͲΛͬ ͯߦ͏ w ͦͷཁૉ͕ϖʔδͷதͰͲΜͳׂΛ͍࣋ͬͯ
Δͷ͔ʁΛߟ໊͑ͯલ͚͍ͭͨ
Α͋͘Δ໋໊ͷํ
<section class="section"> <h1 class=“section_title">about</h1> <p class=“section_text is-white“>hogehoge</p> </section> <section class="section">
<h1 class="section_title">works</h1> <p class="section_text">hogegegege</p> </section>
͖͡Όͳ͍ͱ͜Ζ w ҧ͏ׂΛ͍࣋ͬͯΔཁૉ͕ಉ໊͡લʹ ͳͬͯ͠·͏ͷ͕ؾ࣋ͪѱ͍ w ϑΥʔϜͷϘλϯͱηΫγϣϯதͷϘλϯɺ ݟͨಉ͚ͩ͡Ͳɺׂҧ͏ΑͶʁ w Ϋϥε໊ͰελΠϧཧͯ͠ΔͱɺελΠϧΛ ͪΐͬͱม͍͑ͨͳʔͬͯͱ͖ɺ৽͘͠Ϋϥ
ε͚ͭͳ͍ͱ͍͚ͳ͍
<button class="button-blue button-small button-left button- bottom"> BUTTON </button>
վળҊ
<section class="about"> <h1 class="about_title">about</h1> <p class="works_text">hogehoge</p> </section> <section class="works"> <h1
class="works_title">works</h1> <p class="works_text">hogegegege</p> </section>
$section() { margin-bottom: 36px; } $title() { font-size: 24px; }
$text() { font-size: 14px; }
.about { $section(); } .about_title { $title(); } .about_text {
$text(); } .works { $section(); } .works_title { $title(); color: #f00; } .works_text { $text(); }
ܽ w େنϓϩδΣΫτʹ͔ͳ͍ w ෳਓͰ։ൃ͢Δ࣌ɺΫϥε໊͔ΒελΠϧ ͕૾Ͱ͖ͳ͍ͱΊΜͲͯ͘͘͞ࢮ͵ w NJYJOΛ࠷ॳʹ࡞͓͚ͬͯେৎ͔ w NJYJOͷཧ͕ΊΜͲ͍͘͞
w ෳਓͰNJYJO࡞Γ·͘Δͱࢮ͵
ྑ͍͓Λʂ