CSS: #1 Visual consistency.

Functional, Static, Immutable CSS

Well, you say Visual consistency. Let's talk about what we want to achieve first.
Mungkin yang kami maksud konsistensi berbeda dengan statis. Apakah memang begitu? Coba aku ceritakan apa perbedaan konsisten di kode dan konsistensi tampilan.

  1. Konten berbeda membutuhkan konteks berbeda, kode mengalami perubahan mengikuti konten yang ditampilkan, desain punya aturan dalam mengelola konteks, keduanya berubah saling melengkapi agar konten mudah dipahami pengguna.
  2. Konten yang ditampilkan memiliki prioritas untuk penggunaan desain token, seperti ukuran, warna, dan garis. Rasio menjadi single source of truth dari sebuah desain agar perubahan dapat diprediksi (bukan menuju inkonsistensi laten). Perubahan ditindaklanjutkan melalui tahapan-tahapan implementasi prototype sebelum menjadi kode, terutama dalam menyikapi dinamika konten yang dimuat, desain memiliki andil yang cukup besar meningkatkan acceptability.
  3. Penggunaan atribut di elemen HTML juga harus dipertimbangkan agar semantic, selain pemisahan berkas berdasarkan fungsi yang wajib dalam usaha mengedepankan konsistensi kode. Gunakan class attribute jika mengedepankan konsistensi pada kode HTML. Biarkan berkas CSS terpisah agar lebih fokus mengerjakan kode yang menentukan visual-styling daripada content-markup.
  4. Kode dikatakan konsisten jika dapat digunakan di berbagai kondisi dengan tipe konten yang sama, memberikan fungsi kepada konten dan menggunakan CSS untuk menghasilkan tampilan yang relevan.
  5. Class selector menjadi tonggak utama dalam konsistensi kode. Elemen HTML akan lebih baik jika semantic dan digunakan sesuai dengan jenis konten yang dibawanya sedangkan class attribute menjadi dekorasi yang membuat konteks bagi konten tersebut.