Taking control back to CSS
@aravindballa
🧳
Isn't maintaining CSS hard?
Pains
❌ Nomenclature
Pains
❌ Nomenclature
❌ Pile of Unused CSS
Pains
❌ Nomenclature
❌ Pile of Unused CSS
❌ Re - usable?
div.card {
.card--hero-img {
...
}
.card--content {
display: flex;
flex-direction: column;
...
.card--content--user {
display: flex;
img {
width: 100%;
border-radius: 999;
}
...
}
}
}Pains
❌ Nomenclature
❌ Pile of Unused CSS
❌ Re - usable?
❌ Code Style
The best way to maintain CSS is to stop writing CSS.
Atomic CSS 🎉
<div class="max-w-sm rounded overflow-hidden shadow-lg">
<img class="w-full" src="/img/card-top.jpg" alt="Sunset in the mountains">
<div class="px-6 py-4">
<div class="font-bold text-xl mb-2">The Coldest Sunset</div>
<p class="text-gray-700 text-base">
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus quia, nulla! Maiores et perferendis eaque, exercitationem praesentium nihil.
</p>
</div>
<div class="px-6 py-4">
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#photography</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700 mr-2">#travel</span>
<span class="inline-block bg-gray-200 rounded-full px-3 py-1 text-sm font-semibold text-gray-700">#winter</span>
</div>
</div>Isn't that bad???
Wait, those aren't inline styles
- Responsiveness
- Pseudo selectors
- Reusability
<div class="bg-yellow-500 text-2xl">hi</div>
!==
<div style="background: yellow; font-size: 64px;">hi</div>Myths
👉 Separation of concerns
Can you really separate concerns?
(or is it just checking ✅ a best practice box)
Myths
👉 Separation of concerns
👉 Your HTML will blow up
Myths
👉 Separation of concerns
👉 Your HTML will blow up
👉 But, it looks ugly
Utility-first CSS framework
- Constant size of CSS file
- You still right your own styles
- Speed and reusability 🔥
- Not opinionated
- All changes are local
❌ Nomenclature
❌ Pile of Unused CSS
❌ Re - usable
❌ Code Style
What about those pains?
Editing workflow
👁 ➡ HTML ➡ CSS ➡ edit both ➡ (repeat)
👁 ➡ HTML ➡ edit ➡ (repeat)