CSS: #2 No more Style Sheet

Stop writing CSS!
Iya, ga usah ngetik CSS lagi.

Style Sheet itu mengalir ke bawah. Dari element yang disebut html alias :root sampai element paling kecil seperti i. Jadi, kalau tak mau repot menentukan visual styles untuk kode HTML. Jangan pernah coba ngetik CSS di editor kalian. Gunakan css-framework pada semantic HTML!

Gunakan berulang kali class yang tersedia, selector asal memuat deklarasi jahat (property: value !important) untuk membuat komponen baru wajib dihapuskan. Ingat ini, What makes style sheet reusable is context agnostic! No redefining className in different context. Each className should be independent.

Kalau kalian mau repot, gunakan CSS Pre-Processors (SCSS, LESS, etc), buat abstract di awal, tentukan naming convention, kembangkan sesuai kebutuhan sehingga tak lagi mengetik ulang deklarasi yang dibutuhkan untuk membuat komponen baru, ke depannya tinggal pakai include, mixins, atau import. Jika perlu deklarasi baru jangan gunakan extend, tentukan dulu urgensi deklarasi tersebut buatlah kode dasar sebagai placeholder, gunakan prinsip no overrides small inheritance.

Aku pernah repot dengan Sass sewaktu membuat content-semantic classnames. Solusiku untuk keluar dari kerepotan itu adalah jangan pernah ngetik CSS! Apalagi inline style sheet, please don't. Semantic itu untuk HTML bukan untuk CSS! Lalu bagaimana selesaikan kerjaannya?

  1. Bikin user-agent reset minimal untuk browser populer, seperti Mozilla Firefox (Gecko), Google Chrome (Blink) dan Safari (WebKit) agar tampilan konsisten saat diakses dari perangkat berbeda.
  2. Bikin layout helper seperti spacing atau positioning dengan berbagai ukuran berdasarkan rasio. Gunakan satuan yang relatif terhadap konten.
  3. Bikin wrapper untuk setiap komponen baru, bikin responsive dan berbasis konten.
  4. Bikin styling untuk setiap jenis konten mulai dari coloring hingga variations.
  5. Bikin sizing untuk setiap konten 2 dimensi dengan aspect-ratio dan berdasarkan rasio untuk 1 dimensi.
  6. Bikin state mulai dari disabled, hover, focus yang menandakan komponen bisa menerima user-interactions.
  7. Bikin animation bisa memperhalus user-experience, namun gunakan pada lingkup komponen saja.