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)

Roses are red ❤️

Violets are blue 💙

Maintaining CSS is hard

Tailwind is the new cool!

css-deck

By Aravind Balla