Mengapa sejumlah besar angka ajaib dapat diterima di CSS dan SVG?

Sering kali saya melihat pertanyaan pada daftar Pertanyaan Jaringan Panas seperti ini yang pada dasarnya bertanya "bagaimana cara menggambar bentuk sewenang-wenang ini di CSS". Selalu jawabannya adalah beberapa blok data CSS atau SVG dengan sekelompok nilai-nilai hard-coded yang tampaknya acak yang membentuk bentuk yang diminta.

Ketika saya melihat ini, saya pikir 'Yuck! Sungguh blok kode yang jelek. Saya harap saya tidak pernah melihat barang seperti ini di proyek saya '. Namun, saya melihat jenis T&J ini cukup sering dan dengan jumlah upvote yang tinggi, jadi jelas masyarakat tidak menganggapnya buruk.

Tetapi mengapa ini bisa diterima? Datang dari pengalaman back-end saya ini tidak masuk akal bagi saya. Jadi mengapa OK untuk CSS / SVG?

Pertama, nilai-nilai ajaib dihindari dalam pemrograman dengan menggunakan variabel atau konstanta. CSS tidak mendukung variabel, jadi bahkan jika nilai-nilai ajaib disukai, Anda tidak punya banyak pilihan (kecuali menggunakan preprosesor sebagai SASS, tetapi Anda tidak akan melakukannya untuk cuplikan tunggal).

Kedua, nilai-nilai mungkin tidak sama ajaibnya dalam bahasa khusus domain seperti CSS. Dalam pemrograman, angka ajaib adalah angka di mana makna atau maksudnya tidak jelas. Jika sebuah baris mengatakan:

x += 23;

Anda akan bertanya "mengapa 23"? Apa alasannya? Variabel dapat mengklarifikasi maksud:

x += defaultHttpTimeoutSeconds;

Ini karena nomor bebas bisa berarti apa saja dalam kode tujuan umum. Tetapi pertimbangkan CSS:

background-color: #ffffff;
font-size: 16px;

Tinggi dan warna bukanlah sihir, karena maknanya sangat jelas dari konteksnya. Dan alasan untuk memilih nilai spefic sederhana karena para desainer berpikir itu akan terlihat bagus. Memperkenalkan variabel tidak akan membantu apa pun, karena Anda hanya akan memberinya nama seperti " defaultBackgroundColor" dan " defaultFontSize".

Ini dapat diterima karena format ini bukan kode , tetapi data . Jika Anda menghapus semua "angka ajaib," pada dasarnya Anda akan menduplikasi setiap label, dan berakhir dengan file yang tampak konyol seperti:

mainkite_width = 200px
...
.mainkite {
  width: mainkite_width;
  ...

Setiap kali Anda perlu mengubah beberapa data, Anda perlu mencari di dua tempat. Memang, ada situasi di mana menyenangkan untuk menghindari duplikasi, seperti jika Anda memiliki warna yang sering diulang dan Anda mungkin ingin mengubah untuk mengubah tema. Ada preprocessor dan ekstensi yang diusulkan untuk mengatasi situasi itu, tetapi secara umum, diinginkan untuk memiliki angka bersama dengan struktur dalam format data.

Larangan angka ajaib adalah versi primordial prinsip desain ini:

Buat keputusan di satu tempat .

Tapi ini bukan angka ajaib . Setidaknya, tidak sejauh panduan gaya pengkodean yang saya ketahui.

lebar: 200px;
tinggi: 200px;

Mereka diberi label dengan jelas. Tentu, angkanya sama. Tapi lebarnya adalah lebarnya dan tingginya adalah tingginya. Mereka dirancang untuk bervariasi secara independen.

Sekarang jika Anda memiliki 5 objek yang semuanya harus memiliki lebar yang sama dan masing-masing secara bebas hardcoded lebar mereka, saya akan mengalahkan Anda dengan tongkat tipuan .

Saya tidak akan menyebut mereka nomor ajaib jika mereka diberi label, tapi saya masih akan mengalahkan Anda dengan tongkat tipuan .

Karena CSS bukan bahasa pemrograman, sebaliknya, itu adalah file konfigurasi yang berisi data variabel untuk program Anda.

Saat ini CSS sangat kuat sehingga Anda benar - benar dapat memprogram di dalamnya, tapi itu intinya. Intinya itu masih bahasa stylesheet .

Mari kita mundur selangkah. Bayangkan kita memiliki bahasa pemrograman yang bisa menggambar di layar. Bayangkan kita ingin memprogramnya untuk melukis halaman web.

Awalnya kami akan memasukkan banyak angka ajaib dalam kode kami. Lebar margin, tinggi teks, lekukan, dll., Dll.

jump(100) // The margin
drawTable(500, 500)
writeText("Hello World", 12)

Jadi kami mengekstrak angka ajaib, dan meletakkannya di atas file kami.

int margin = 100
int table = 500
int text_size = 12
jump(margin) // The margin
drawTable(table, table)
writeText("Hello World", text_size)

Sekarang ini agak jelek. Kami lebih suka membaca nomor variabel kami dari file konfigurasi.

margin 100
table 500
text size 12

Mm, itu agak tidak jelas ... Apa arti angka-angka itu? Apa arti nama-nama itu? Mari kita formalisasikan sedikit.

margin_left 10em
table_width 500px
table_height 500px
font_size 12px

Tapi tahukah Anda, kami ingin sedikit memperluas program kami. Kami juga ingin menggambar halaman dengan beberapa tabel, halaman tanpa tabel, halaman dengan paragraf atau tombol dan apa lagi. Mari kita tambahkan pemilih ke file konfigurasi kita sehingga kita dapat menentukan paragraf apa yang harus memiliki font yang lebih besar, atau warna teks yang berbeda, mungkin kita dapat mendukung elemen bersarang, mungkin kita dapat menggunakan properti umum dalam file konfigurasi kita, dan kemudian menimpanya dengan spesifik satu dalam beberapa elemen bersarang.

Anda merasakan ke mana arahnya, pada akhirnya Anda tiba sebagai CSS. (Dan browser untuk merendernya.)

Haruskah kita menambahkan kemampuan ke file konfigurasi kita sehingga kita dapat menghindari angka ajaib lagi? Tambahkan variabel? Tambahkan file konfigurasi untuk file CSS kami? Rasanya agak sia-sia jika Anda ingat file CSS kami adalah file konfigurasi yang sama.

Tetapi tentu saja itu tidak benar; file CSS Anda tumbuh lebih besar dan lebih besar, dan akhirnya Anda mengalami masalah yang sama seperti dengan angka ajaib asli, angka yang sama berulang di semua tempat, kadang-kadang dengan transformasi kecil, dll.

Namun CSS modern, memungkinkan banyak cara untuk menghindari pengulangan ini. Anda dapat menggunakan kelas yang berlaku untuk banyak elemen, Anda dapat mengatur gaya untuk semua div, tetapi kemudian menimpanya secara khusus, dan CSS 3 bahkan memungkinkan beberapa jenis penggunaan variabel.

Itu tidak berarti Anda harus mulai menggunakan variabel CSS di setiap lokasi yang memungkinkan. Gunakan di tempat yang masuk akal dan gunakan di tempat Anda menghindari duplikasi atau di mana teknik lain juga tersedia gagal.

Pada akhirnya, Anda tidak ingin terlalu banyak angka ajaib dalam file konfigurasi Anda :-)

Mengapa [sekelompok nilai acak yang tampak acak] OK untuk CSS / SVG?

Itu tidak baik. Ini mungkin untuk menulis dan memelihara polos "Css" file, tetapi nilai-nilai dikodekan keras akhirnya acak akan menjadi beban lazim.

Untuk apa pun selain halaman web yang sangat sederhana, Anda harus mengembangkan strategi "temukan dan ganti" yang disiplin, atau gunakan preprocessor CSS dengan variabel, atau tentukan gaya melalui JavaScript.