Keluar dari Tailwind sambil belajar menata struktur CSS

• Sambil memindahkan beberapa situs dari Tailwind ke HTML semantik dan CSS vanilla, hanya aturan yang benar-benar diperlukan dari Tailwind yang diimplementasikan ulang secara manual
• Sistem yang sudah familier seperti preflight reset Tailwind, palet warna, dan font scale tetap dipertahankan, lalu dipindahkan ke CSS vanilla dengan variabel CSS dan pemisahan file
• Sebagian besar CSS dibagi menjadi file per komponen dan diberi kelas unik, sehingga perubahan pada satu komponen mengurangi kemungkinan diam-diam merusak komponen lain
• Alasan meninggalkan Tailwind mencakup ketergantungan pada build system di Tailwind modern, tailwind.min.css berukuran 2.8MB, campuran dengan CSS vanilla, dan keterbatasan CSS
• Untuk desain responsif, pendekatannya bergeser dari breakpoint ke pemanfaatan CSS grid seperti auto-fit dan grid-template-areas, sambil menjadikan @layer, @scope, dan container queries sebagai hal yang ingin dipelajari

---

Memindahkan struktur yang dipelajari dari Tailwind ke CSS vanilla

• Saat pertama kali memakai Tailwind 8 tahun lalu, belum tahu bagaimana menata kode CSS, dan Tailwind jauh lebih baik daripada kekacauan total
• Dalam sekitar seminggu terakhir, beberapa situs dipindahkan dari Tailwind ke HTML semantik + CSS vanilla, sambil memilih sendiri dan mengimplementasikan ulang hanya bagian aturan Tailwind yang dibutuhkan
• Setelah membaca A whole cascade of layers dan How I write CSS in 2024, menjadi jelas bahwa setiap codebase CSS membutuhkan sistem untuk mengelola perhatian yang berbeda seperti layout, font, warna, dan komponen umum
• Tailwind sudah memiliki sistem seperti reset stylesheet, palet warna, dan font scale, dan bagian yang sudah familier serta berguna bisa ditiru juga di CSS vanilla

Sistem utama yang dipakai dalam codebase CSS

• reset

  • preflight styles dari Tailwind awalnya disalin sekitar 200 baris dari tailwind.css untuk dipakai
  • Karena sudah lama terbiasa dengan reset Tailwind, aturan yang menerapkan box-sizing: border-box ke semua elemen membuat lebar elemen ikut mencakup padding

    * { box-sizing: border-box; }
  

  • Ada kemungkinan selama ini juga tanpa sadar bergantung pada aturan reset lain seperti html {line-height: 1.5;}, dan rasanya akan butuh banyak penyesuaian untuk menulis CSS tanpa aturan seperti ini

• components

  • Sebagian besar CSS disusun dalam file per komponen, mirip dengan cara mengatur komponen Vue atau React
  • Setiap komponen punya kelas unik, dan disusun agar CSS satu komponen tidak menimpa CSS komponen lain
  • Dalam praktiknya, sekitar 80% CSS yang benar-benar ingin diubah ada di dalam file komponen, jadi saat mengedit komponen 100 baris, cukup memikirkan 100 baris itu saja
  • Misalnya, komponen .zine bisa memiliki HTML seperti berikut

    <figure class="zine horizontal">
        <img src="whatever.jpg">
    </figure>
  

  • CSS mengumpulkan state seperti .horizontal, .vertical, dan :hover di dalam komponen dengan nested selector

    .zine {
      ...
      &.horizontal {
        ...
      }
      &.vertical {
        ...
      }
      &:hover {
        ...
      }
    }
  

  • Tidak sampai memblokir gangguan antarkomponen secara terprogram seperti Web Components atau @scope, tetapi hanya dengan menetapkan dan menaati konvensi pun rasanya sudah jauh lebih baik

• colours

  • colours.css mengumpulkan variabel CSS yang bisa digunakan saat diperlukan
  • Warna itu sulit, dan karena tidak ingin meninjau ulang penggunaan warna dalam refactor kali ini, pendekatan sebelumnya tetap dipertahankan
  • Satu-satunya aturan adalah semua warna yang dipakai di situs harus didaftarkan di file ini

    :root {
      --pink: #fea0c2;
      --pink-light: #F9B9B9;
      --red: #f91a55;
      --orange: rgb(222, 117, 31);
      ...
    }
  

• font sizes

  • Di Tailwind cukup memilih tingkat ukuran seperti text-lg, xl, atau 2xl, jadi tidak perlu mengingat apakah memakai em, px, atau rem
  • Untuk mempertahankan itu juga di CSS vanilla, didefinisikan variabel ukuran yang diambil dari Tailwind

    --size-xs: 0.75rem;
      --line-height-xs: 1rem;
  
      --size-sm: 0.875rem;
      --line-height-sm: 1.25rem;
  

  • Ukuran font ditentukan lewat variabel; memang sedikit lebih bertele-tele dibanding Tailwind, tetapi untuk sekarang terasa memuaskan

    h3 {
      font-size: var(--size-lg);
      line-weight: var(--line-weight-lg);
    }
  

• utilities

  • Elemen seperti tombol yang berulang di banyak komponen diklasifikasikan sebagai utilities
  • Beberapa utility class seperti .sr-only untuk elemen yang hanya perlu terlihat oleh pengguna screen reader disalin dari Tailwind
  • Area ini ingin dijaga tetap kecil, dan diubah dengan hati-hati

• base

  • Style “base” adalah style yang diterapkan langsung ke seluruh situs
  • Karena belum cukup yakin untuk memaksakan banyak style ke seluruh situs, area ini dijaga sangat kecil
  • Saat ini aturan yang terasa oke hanya dua: untuk <section> dan a, dan aturan <section> bisa saja berubah nanti

    /* put a 950px column in the middle of each <section> */
    section {
      --inner-width: 950px;
      padding: 3rem max(1rem, (100% - var(--inner-width))/2);
    }
  
    a {
      color: var(--orange);
    }
  

  • Untuk style base, pendekatan bottom-up tampaknya paling mudah: mulai dengan hampir kosong, lalu memindahkan hal-hal yang diinginkan bersama dari komponen ke base saat pola umumnya terlihat

• spacing

  • Cara mengelola padding dan margin masih belum sepenuhnya diputuskan
  • Saat memakai Tailwind, padding dan margin sering ditambahkan spontan di sana-sini sampai tampilannya terasa pas, dan sekarang sedang mencari pendekatan yang lebih berprinsip
  • Untuk saat ini, sebisa mungkin komponen layout luar yang bertanggung jawab atas jarak
  • Jika ingin memberi jarak seragam antar anak dalam <section> yang punya beberapa anak, aturan berikut bisa dipakai

    section > *+* {
      margin-top: 1rem;
    }
  

  • Referensi yang dipakai antara lain the owl selector dan “no outer margin”

• responsive design

  • Di Tailwind, sering digunakan sintaks berbasis media query seperti md:text-xl untuk menerapkan style text-xl di atas ukuran tertentu
  • Sekarang tujuannya adalah membuat layout CSS grid yang lebih fleksibel sehingga tidak perlu banyak breakpoint
  • Dengan auto-fit, layar besar bisa otomatis memakai 2 kolom dan layar kecil 1 kolom

    display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), max-content));
      justify-content: center;
  

  • grid-template-areas juga sering dipakai, dan dianggap sebagai fitur luar biasa yang tidak tersedia di Tailwind
  • Salah satu referensi yang dipakai adalah artikel CSS Tricks A responsive grid layout with no media queries

• build system

  • Saat pengembangan, tidak diperlukan build system terpisah
  • CSS punya pernyataan @import bawaan untuk memisah dan memuat file

    @import "reset.css";
    @import "typography.css";
    @import "colors.css";
  

  • CSS juga sudah punya nested selector bawaan

    .page {
      h2 { ...}
    }
  

  • Jika ingin menggabungkan file CSS untuk produksi, bisa memakai esbuild

    esbuild style.css --bundle --loader:.svg=dataurl  --loader:.woff2=file --outfile=/tmp/out.css
  

  • Biasanya berusaha menghindari build system untuk CSS dan JS, tetapi esbuild dianggap oke karena berbasis web standard dan berupa binary Go statis
  • Tentang esbuild, pernah menulis artikel terkait esbuild dan Vue pada 2021

Alasan meninggalkan Tailwind

• Sejak 2018, Tailwind menjadi jauh lebih bergantung pada build system, dan Tailwind modern tampaknya tidak mungkin dipakai tanpa build system, sehingga selama beberapa tahun tetap memakai Tailwind v2
• Sebagai alternatif untuk memakai Tailwind tanpa build system, tampaknya ada litewind
• Tailwind pada dasarnya memang diasumsikan dipakai bersama build system, tetapi dalam praktiknya tidak begitu digunakan, sehingga banyak proyek berakhir dengan file tailwind.min.css 2.8MB, dan itu terasa agak janggal
• Kemampuan CSS sekarang lebih baik dibanding saat pertama kali memakai Tailwind
• Tailwind pada akhirnya punya keterbatasan, dan ketika ingin melakukan sesuatu yang aneh atau spesifik di CSS, itu tidak selalu memungkinkan
• Keterbatasan itu bisa sangat berguna, dan sebenarnya saat memindahkan ke CSS vanilla beberapa batasan Tailwind juga diimplementasikan kembali, tetapi sekarang ingin bisa memilih hanya batasan yang memang diperlukan
• Muncul situs-situs dalam proyek yang sama yang mencampur CSS vanilla dan Tailwind, dan merawatnya bukan pengalaman yang menyenangkan
• Ada rasa penasaran seperti apa hasilnya jika menulis HTML yang lebih semantik

Fitur CSS yang ingin dipelajari selanjutnya

• @layer adalah fitur untuk menangani cascade layer; belum dipakai, tetapi ingin dipelajari
• @scope adalah fitur yang menarik untuk menangani style dalam komponen atau cakupan tertentu
• container queries adalah fitur untuk desain responsif berbasis container yang ingin dipelajari
• subgrid ada dalam daftar fitur CSS grid yang diminati

Kesimpulan yang tidak sepenuhnya menolak Tailwind

• Walaupun sekarang sedang meninggalkan Tailwind, keputusan mulai memakai Tailwind dulu tetap terasa memuaskan
• Banyak hal dipelajari saat memakai Tailwind, dan bahkan setelah menghapus tailwind.min.css, sebagian dari Tailwind masih bisa terus dipakai di dalam situs
• Bagian CSS wizardzines.com yang awalnya dirancang dan ditulis oleh Melody Starling membantu membentuk sisi situs yang keren dan menyenangkan
• Saat mengerjakan CSS, banyak membaca tulisan CSS dari CSS Tricks, Smashing Magazine, dan lainnya, dan komunitas CSS sangat membantu karena banyak berbagi praktik yang mereka gunakan

[GN⁺]

Pendapat di Lobste.rs

• Untuk proyek pribadi, saya hampir tidak lagi memakai framework CSS/JavaScript
  Karena kalau tidak ada dependensi, tidak akan ada juga kerentanan rantai pasok. Tentu saja itu bukan satu-satunya jenis kerentanan, tapi tetap membantu

  • Saya juga cukup banyak kembali ke HTML/CSS/JS murni, lalu hanya menambahkan sedikit hal yang saya buat sendiri
    Ini hasil gabungan dari rasa lelah terhadap framework, beban berlebih dari npm audit, dan fakta bahwa berkat LLM saya jadi tidak terlalu peduli pada penilaian orang lain soal cara implementasi. Misalnya pertanyaan seperti “kenapa tidak pakai React dan Tailwind?”

• Ini memang hanya cara kerja CSS
  Kalau melihat orang memakai Tailwind secara membabi buta tanpa memahami ini, rasanya saya ingin keluar dan berteriak ke awan. Menurut saya, 90% dari Tailwind hanyalah inline style dengan sintaks yang berbeda, dan mungkin cuma setingkat lebih baik daripada tag <FONT>

  • Saya kurang paham tujuan komentar ini, tetapi setelah memakai Tailwind selama hampir 8 tahun, saya sudah tak terhitung melihat komentar seperti ini yang merendahkan pengguna Tailwind, dan tidak satu pun membantu saya untuk keluar dari Tailwind atau meningkatkan kemampuan CSS saya
    Tulisan blog ini justru menjelaskan hal-hal yang benar-benar perlu saya ketahui
  • Pernyataan bahwa “90% dari Tailwind hanyalah inline style dengan sintaks yang berbeda” tidak terlalu akurat
    Tailwind bekerja cukup berbeda dari inline style, dan justru jauh lebih mirip dengan CSS. Seperti yang juga dibahas di tulisan itu, banyak kebiasaan baik yang membuat seseorang mahir memakai Tailwind juga merupakan kebiasaan yang diperlukan untuk menulis CSS yang efektif. Tailwind lebih mendekati CSS yang menempelkan blok CSS dengan scope implisit ke setiap elemen, hanya saja memakai DSL yang unik
  • Mengetahui bagaimana CSS bekerja dan mengetahui cara memakainya secara efektif adalah dua hal yang sangat berbeda
    Saya paham betul cara kerja CSS, tetapi CSS murni tetap terasa membebani, dan saya juga lemah dalam desain grafis, jadi saya masih memakai Tailwind. Tulisan ini memberi ide untuk menata CSS dengan berangkat dari Tailwind

• Dari sudut pandang orang yang belakangan ini kurang mengikuti tren, tulisan ini tampaknya cukup bagus dalam menunjukkan praktik CSS modern
  Saya juga suka karena ada banyak tautan ke tulisan-tulisan yang menjadi inspirasinya. Kelihatannya bagus untuk bahan bacaan, dan sejauh ini saya baru membaca "no outer margin"
  Meski begitu, saya agak ragu dengan pendekatan menetapkan gaya dasar dari “bawah ke atas”. Saya juga tidak tahu harus melakukan apa sebagai gantinya, dan ini tampak layak dicoba, tetapi gaya dasar pada dasarnya memang rumit

• Saya sangat menyukai tulisan ini
  Saya juga belajar CSS sedikit demi sedikit sambil membuat banyak situs kecil, dan rasanya akan membantu kalau sejak awal saya lebih banyak berpikir secara sistematis seperti ini. Saya cukup punya resistensi terhadap framework, tetapi karena tidak memakainya, sering kali saya merasa meskipun saya tahu cara membuat sesuatu sesuai keinginan, semuanya seperti melayang tanpa struktur yang jelas

• Menyenangkan karena nadanya bukan “Tailwind jelek jadi pakailah CSS saja”, melainkan “Tailwind itu bagus, tetapi sekarang mungkin tidak lagi diperlukan”
  Saya selalu kesulitan menata CSS secara manual, dan berkat tulisan ini saya jadi memikirkannya dengan cara yang sangat berbeda

• Saat merapikan CSS, teknik penataan ini cukup berguna: https://rstacruz.github.io/rscss/
  Secara umum, ini sangat selaras dengan apa yang dijelaskan jvns di tulisan aslinya, lalu menambahkan sedikit lagi struktur dan keteraturan di atasnya