スタイリングの風 : クラス名の断捨離へ
⚠一部過激な内容が含まれます⚠
tailwind cssはご存知ですか？🙋♂️
とはなにか
Zero Runtimeのutility-first CSS framework
display: flex; = flexpadding-top: 1rem; = pt-4
tailwindcss学校3年生hishoです
Hisho Ohmasu
Frontend Developer
TypeScriptとNext.jsのApp RouterとGraphQLが好き
趣味は音楽で、よくライブやフェスに行きます🤟
最近の推しアーティストははPEOPLE 1です🐶
tailwindcssを採用した経緯
- css設計は破綻する💥
- scssが使いづらくなってしまった👎
- web制作でも使える😎
tailwindcssのデメリット
- tailwindcss独自の書き方を覚える必要がある😇
- HTMLが汚くなるんでしょ🤨
- 同じclassのコピペだるい😡
- tailwindcss独自の書き方を覚える必要がある😇
- HTMLが汚くなるんでしょ🤨
- 同じclassのコピペだるい😡
leading-tight = line-height: 1.25;
わかる
line-height: 1.25; = line-height-1.25
こうなるべき🤬
- tailwindcss独自の書き方を覚える必要がある😇
- HTMLが汚くなるんでしょ🤨
- 同じclassのコピペだるい😡
<button
className={
'rounded-full bg-violet-500 px-5 py-2 text-sm font-semibold leading-5 text-white hover:bg-violet-600 focus:outline-none focus:ring focus:ring-violet-300 active:bg-violet-700'
}
type={'button'}
>
Save changes
</button>それな
- tailwindcss独自の書き方を覚える必要がある😇
- HTMLが汚くなるんでしょ🤨
- 同じclassのコピペだるい😡
Kristen Ramos
kristen.ramos@example.com
Floyd Miles
floyd.miles@example.com
<ul className="divide-y divide-slate-200 p-6" role="list">
<li className="flex py-4 first:pt-0 last:pb-0">
<img
alt=""
className="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
/>
<div className="ml-3 overflow-hidden">
<p className="text-sm font-medium text-slate-900">Kristen Ramos</p>
<p className="truncate text-sm text-slate-500">
kristen.ramos@example.com
</p>
</div>
</li>
<li className="flex py-4 first:pt-0 last:pb-0">
<img
alt=""
className="h-10 w-10 rounded-full"
src="https://images.unsplash.com/photo-1463453091185-61582044d556?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
/>
<div className="ml-3 overflow-hidden">
<p className="text-sm font-medium text-slate-900">Floyd Miles</p>
<p className="truncate text-sm text-slate-500">
floyd.miles@example.com
</p>
</div>
</li>
</ul>ループ使いましょう
tailwindcssのメリット
- cssが書ければかける😁
- 再利用しないコードに名前をつけなくてよい🥰
- めんどいファイル移動をしなくてよい😽
- 命名を考える必要がない😎
- cssが書ければかける😁
- 再利用しないコードに名前をつけなくてよい🥰
- めんどいファイル移動をしなくてよい😽
- 命名を考える必要がない😎
display: flex; = flexwidth: 16px; = w-4
- cssが書ければかける😁
- 再利用しないコードに名前をつけなくてよい🥰
- めんどいファイル移動をしなくてよい😽
- 命名を考える必要がない😎
FLOCSSで言うlayoutの名前考えるのめんどくさくない？
<div>
<ul className={'list'}>
<li className={'listItem'}>
<div>this is card component</div>
</li>
</ul>
</div>→
<div>
<ul className={'flex gap-2'}>
<li>
<div>this is card component</div>
</li>
</ul>
</div>- cssが書ければかける😁
- 再利用しないコードに名前をつけなくてよい🥰
- めんどいファイル移動をしなくてよい😽
- 命名を考える必要がない😎
cssのこの行に飛んで編集して確認…
だるい🫠
- cssが書ければかける😁
- 再利用しないコードに名前をつけなくてよい🥰
- めんどいファイル移動をしなくてよい😽
- 命名を考える必要がない😎
<div>
<ul className={'list'}>
<li className={'listItem'}>
<div className={'hogeCard'}>this is card component</div>
</li>
</ul>
</div>→
<div>
<ul className={'flex gap-2'}>
<li>
<div className={'h-full flex flex-col'}>this is card component</div>
</li>
</ul>
</div>