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

63

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?

— Pasang kembali Monica
sumber

38

Apa itu gambar, jika bukan sekelompok angka ajaib acak (bayangkan stroke antara 2 (x, y) poin, atau array piksel, dll.) Yang kebetulan terlihat bagus?

68

Apakah CSS memiliki variabel? Apakah SVG?

— Oded

36

Inilah sebabnya mengapa banyak proyek yang lebih besar memiliki preprocessor CSS seperti SASS atau KURANG yang mendukung variabel.

— Ixrec

2

@Daftar Untuk CSS, ada sekitar 40% dukungan global untuk variabel (jadi, tidak disarankan kecuali jika Anda ingin memberi tahu semua pengunjung Microsoft Anda bahwa mereka tidak diterima). Microsoft mungkin akan mengikuti tren di Edge, dan perangkat seluler pada akhirnya akan menyusul. SVG, di sisi lain, memiliki konsep variabel dalam beberapa dokumen status draf yang menyedihkan, tetapi mereka mungkin tidak akan pernah diimplementasikan.

— phyrfox

12

Mengapa? Karena mereka bukan angka ajaib. CSS menyimpan data, tidak seperti program yang menyimpan instruksi. Meskipun CSS bisa dikatakan selesai, itu bukan bahasa pemrograman.

— Derek 朕會功夫

117

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".

— JacquesB
sumber

16

Beberapa nilai memang hanya dipilih karena "mereka terlihat bagus". Tetapi contoh OP yang tertaut berisi nilai yang sama beberapa kali, tetapi tidak jelas apakah mereka mewakili hal yang sama atau hanya memiliki nilai yang sama secara kebetulan. Juga menggunakan nilai 198pxyang merupakan perbedaan ukuran sesuatu yang lain ( 200px) dan 2pxperbatasan.

— CodesInChaos

1

@CodesInChaos: Ya, ada beberapa kasus di mana variabel atau semacam ekspresi dependensi akan menjadi keren.

— JacquesB

21

Perhatikan bahwa CSS tidak variabel dukungan

— phihag

28

@ phihag Dalam spesifikasi, ya, tetapi di alam liar , tidak begitu banyak (saya tidak menganggap 40% dukungan global pada saat komentar ini sebagai "banyak didukung". Namun, Anda benar dalam mengatakan itu, di di masa depan , kita akan memiliki variabel CSS. Dan saya memang belajar sesuatu yang baru hari ini, jadi terima kasih untuk itu.

— phyrfox

2

@JaredSmith Tidak apa-apa untuk webapp skala yang relatif besar, namun untuk halaman umum (mungkin statis) termasuk polyfill besar adalah berlebihan.

— Derek 朕會功夫

80

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.

— Karl Bielefeldt
sumber

22

Memberi +1 karena: "Ini dapat diterima karena format ini bukan kode, tetapi data."

— Pieter B

1

"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." - Mungkin lebih baik dilakukan dengan kelas .main_color { color: .. }

— :,

1

Kode yang menentukan tampilan dan nuansa aplikasi masih berupa kode dan bukan data.

— ESR

25

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 .

— candied_orange
sumber

4

Jika Anda memiliki cukup objek untuk memerlukan variabel, Anda memiliki cukup objek untuk membuat kelas baru.

— Jaketr00

1

Ini adalah jawaban terbaik, karena menunjukkan intinya: Itu bukan angka ajaib.

— TheBlastOne

2

"5 benda yang semuanya harus memiliki lebar yang sama dan masing-masing secara bebas mengkodekan lebarnya, aku akan mengalahkanmu dengan tongkat." Selamat datang di dunia desain web yang menyenangkan.

— whatsisname

2

Angka ajaib tidak hanya bermasalah karena "Membuat keputusan di satu tempat" (alias KERING), tetapi juga karena mereka sulit dimengerti.

— sleske

Apakah ada alternatif untuk dikalahkan dengan tongkat?

— djechlin

10

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 :-)

— Dorus
sumber

Mengapa penting di mana redundansi itu? Bukankah pemeliharaan akan menjadi masalah di mana pun lokasinya?

— Peter Mortensen

@PeterMortensen Ini selalu menjadi pertimbangan antara waktu pengembangan rendah, atau rawatan tinggi. Redundansi tinggi mudah dikembangkan karena Anda dapat dengan cepat mengubah hal-hal di sana-sini, redundansi rendah mudah perawatannya karena Anda dapat dengan cepat mengubah gaya global. Dalam praktiknya Anda ingin berada di antara keduanya, karena hadapi itu, memiliki gaya global membuatnya jauh lebih mudah bahkan untuk menambahkan halaman baru, tetapi memiliki setiap fitur yang tidak jelas mematuhi setiap perubahan gaya global yang mungkin diperlukan untuk berkembang selamanya.

— Dorus

Ada baiknya CSS memiliki fitur di kedua arah. Dan terserah pengembang web untuk memutuskan berapa banyak waktu yang dihabiskan untuk mengurangi redundansi dan meningkatkan rawatan, atau waktu untuk menghabiskan halaman-halaman / fitur-fitur baru. Cukup menarik, hal yang sama berlaku untuk bahasa pemrograman lain di mana Anda dapat menghabiskan waktu berbulan-bulan untuk merancang desain yang sempurna, atau berhari-hari untuk menghancurkan program Anda, dan berbulan-bulan untuk memburu bug yang tidak mungkin.

— Dorus

Cukup menarik saya hanya berlari ke pertanyaan ini yang berbicara tentang mengambil abstraksi terlalu jauh, dan kehilangan pada kedua rawatan dan waktu pengembangan.

— Dorus

5

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.

— Jackson
sumber