Membina Sistem Reka Bentuk Tanpa Mencipta Semula CSS

Sistem reka bentuk sering terperangkap dalam satu jerat.

Anda bermula dengan menambah kelas utiliti. Anda menambah pilihan responsif. Anda menambah pembantu susun atur. Tidak lama kemudian, anda membina sintaks baharu. Akhirnya, anda melakukan perkara yang sama seperti yang sudah dilakukan oleh CSS.

Berhenti cuba menggantikan CSS.

Sebaliknya, bina satu lapisan di atas CSS. Fokus pada tujuan.

Pembangun mahukan fleksibiliti. Namun, fleksibiliti membawa kepada kerumitan. Banyak sistem mendedahkan setiap titik henti (breakpoint) dan pilihan susun atur. Ini menjadikan markup sukar dibaca. Kod anda menghabiskan lebih banyak masa untuk menerangkan cara membina susun atur berbanding apa yang dilakukan oleh susun atur tersebut.

Sistem menjadi sukar difahami kerana ia cuba menerangkan segalanya.

Ubah fokus anda. Kurangkan berfikir tentang bagaimana susun atur dibina. Fikirkan lebih banyak tentang apa yang dicapai oleh susun atur tersebut.

Lihat contoh ini:

Ini tidak menggantikan CSS. Ia menyatakan tujuan.

  • Kandungan menyesuaikan diri kepada grid.
  • Pada peranti mudah alih, ia disusun bertindan.

Pelaksanaan kekal di dalam sistem. Ini bukan tentang lebih banyak abstraksi. Ini adalah tentang komunikasi yang lebih baik.

Tetapan lalai (defaults) yang baik adalah lebih baik daripada konfigurasi yang tidak berkesudahan. Kebanyakan susun atur mengikut corak biasa. Kebanyakan pembangun mahu menyusun kandungan, bukan mencipta sistem susun atur baharu.

Sistem reka bentuk harus menyediakan tetapan lalai yang teliti. Jika anda cuba mendedahkan setiap keupayaan CSS, anda akan gagal. CSS sudah pun berkuasa dan terstandard.

Tugas sistem reka bentuk adalah untuk:

  • Mengurangkan beban kognitif.
  • Mencipta konsistensi.
  • Menyampaikan tujuan.
  • Memudahkan corak biasa.

Tanya diri anda soalan ini semasa mereka bentuk API: "Bolehkah saya memahami ini enam bulan dari sekarang?"

Jangan tanya:

  • "Bolehkah saya mengkonfigurasi segalanya?"
  • "Bolehkah saya menyokong setiap kes terpencil (edge case)?"

Kebolehbacaan boleh diskalakan. Kerumitan tidak.

Kesederhanaan bukanlah satu had. Matlamatnya adalah untuk meletakkan kuasa di tempat yang sepatutnya. Aliran kerja biasa harus kekal ringkas. Aliran kerja lanjutan mesti kekal boleh dilakukan.

Sistem reka bentuk yang terbaik mencipta bahasa yang dikongsi bersama. Ia fokus pada tujuan dan bukannya pelaksanaan. Ia membantu pembangun menyampaikan maksud.

Pembangun tidak mahu membina susun atur. Mereka mahu membina produk. Susun atur hanyalah sebahagian daripada tugas tersebut.

Sumber: https://dev.to/stinklewinks/building-a-design-system-without-recreating-css-1a41