ทำไมจำนวนเวทมนต์จำนวนมากจึงยอมรับได้ใน CSS และ SVG

63

บ่อยครั้งที่ฉันเห็นคำถามในรายการคำถามเครือข่ายที่น่าสนใจเช่นนี้ซึ่งโดยทั่วไปแล้วถามว่า "ฉันจะวาดรูปทรงโดยพลการใน CSS ได้อย่างไร" คำตอบก็คือบล็อกข้อมูล CSS หรือ SVG สองกลุ่มที่มีค่าฮาร์ดโค้ดแบบสุ่มจำนวนมากซึ่งสร้างรูปร่างตามที่ร้องขอ

เมื่อฉันดูที่นี้ฉันคิดว่า 'Yuck! สิ่งที่น่าเกลียดของรหัส ฉันหวังว่าฉันจะไม่เห็นสิ่งประเภทนี้ในโครงการของฉัน ' อย่างไรก็ตามฉันเห็นประเภทของคำถาม & บ่อยครั้งมากและมีผู้ติดตามจำนวนมากดังนั้นชุมชนจึงไม่คิดว่าพวกเขาจะไม่ดี

แต่ทำไมถึงเป็นที่ยอมรับ? มาจากประสบการณ์การใช้งานส่วนหลังของฉันสิ่งนี้ไม่สมเหตุสมผลสำหรับฉัน เหตุใดจึงเป็นเช่นนั้นสำหรับ CSS / SVG

— Reinstate Monica
แหล่งที่มา

38

รูปวาดคืออะไรหากไม่ใช่ตัวเลขมายากลแบบสุ่ม (คิดว่าเป็นลายเส้นระหว่าง 2 (x, y) คะแนนหรืออาร์เรย์พิกเซล ฯลฯ ) ที่ดูดี?

68

CSS มีตัวแปรหรือไม่ SVG หรือไม่

— Oded

36

นี่คือเหตุผลที่โครงการขนาดใหญ่จำนวนมากมีตัวประมวลผลล่วงหน้า CSS เช่น SASS หรือ LESS ที่รองรับตัวแปร

— Ixrec

2

@Oded สำหรับ CSS มีการสนับสนุนทั่วโลก 40% สำหรับตัวแปร (ดังนั้นไม่แนะนำเว้นแต่คุณต้องการบอกผู้เยี่ยมชม Microsoft ทุกคนว่าพวกเขาไม่ต้อนรับ) Microsoft อาจจะติดตามแนวโน้มใน Edge และอุปกรณ์มือถือจะตามทัน ในทางกลับกัน SVG มีแนวคิดเกี่ยวกับตัวแปรในเอกสารสถานะแบบร่างบางฉบับที่ไม่มีการแยกแยะ แต่อาจจะไม่มีการนำไปใช้เลย

— phyrfox

12

ทำไม? เพราะพวกเขาไม่ใช่เลขอาถรรพ์ CSS เก็บข้อมูลไม่เหมือนโปรแกรมที่เก็บคำสั่ง แม้ว่า CSS นั้นสามารถทำให้สมบูรณ์ได้ แต่ไม่ใช่ภาษาโปรแกรม

— Derek 朕會功夫

118

ประการแรกค่าเวทย์จะถูกหลีกเลี่ยงในการเขียนโปรแกรมโดยใช้ตัวแปรหรือค่าคงที่ CSS ไม่สนับสนุนตัวแปรดังนั้นแม้ว่าค่าเวทย์มนตร์จะขมวดคิ้วคุณไม่มีทางเลือกมากนัก (ยกเว้นการใช้พรีโพรเซสเซอร์เป็น SASS แต่คุณจะไม่ทำอย่างนั้นสำหรับข้อมูลโค้ดเดียว)

ประการที่สองค่าอาจไม่วิเศษในภาษาเฉพาะโดเมนเช่น CSS ในการเขียนโปรแกรมหมายเลขอาถรรพ์คือหมายเลขที่ความหมายหรือเจตนาไม่ชัดเจน ถ้าเส้นบอกว่า:

x += 23;

คุณจะถามว่า "ทำไม 23" อะไรคือเหตุผล? ตัวแปรสามารถชี้แจงเจตนา:

x += defaultHttpTimeoutSeconds;

นี่เป็นเพราะหมายเลขเดียวอาจหมายถึงอะไรก็ตามอย่างแน่นอนในรหัสวัตถุประสงค์ทั่วไป แต่พิจารณา CSS:

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

ความสูงและสีไม่ใช่เวทมนตร์เพราะความหมายนั้นชัดเจนจากบริบทอย่างสมบูรณ์ และเหตุผลในการเลือกค่า spefic นั้นง่ายเพราะนักออกแบบคิดว่ามันจะดูดี การแนะนำตัวแปรจะไม่ช่วยอะไรเลยเพราะคุณแค่ตั้งชื่อมันว่า " defaultBackgroundColor" และ " defaultFontSize" อย่างไรก็ตาม

— JacquesB
แหล่งที่มา

16

ค่าบางค่านั้นถูกเลือกเพียงเพราะ "ดูดี" แต่ตัวอย่างของ OP ที่เชื่อมโยงมีค่าเท่ากันหลายครั้ง แต่ไม่ชัดเจนว่ามันแสดงถึงสิ่งเดียวกันหรือมีค่าเดียวกันโดยบังเอิญ นอกจากนี้ยังใช้ค่า198pxซึ่งเป็นความแตกต่างของขนาดของสิ่งอื่น ( 200px) และ2pxเส้นขอบ

— CodesInChaos

1

@CodesInChaos: ใช่มีบางกรณีที่ตัวแปรหรือการแสดงออกของการพึ่งพาบางประเภทจะเย็น

— JacquesB

21

หมายเหตุ CSS ที่ไม่ ตัวแปรสนับสนุน

— phihag

28

@phihag ในสเปคใช่ แต่ในป่าไม่มาก (ฉันไม่คิดว่าจะได้รับการสนับสนุนระดับโลก 40% ในขณะที่ความคิดเห็นนี้ว่า "สนับสนุนอย่างกว้างขวาง" อย่างไรก็ตามคุณพูดถูก ในอนาคตเราจะมีตัวแปร CSS และฉันได้เรียนรู้สิ่งใหม่ในวันนี้ดังนั้นขอบคุณสำหรับสิ่งนั้น

— phyrfox

2

@ JaredSmith มันดีสำหรับ webapp ที่มีขนาดค่อนข้างใหญ่ แต่สำหรับหน้าเว็บทั่วไป (อาจจะเป็นแบบคงที่) รวมถึง polyfill ขนาดใหญ่เกินไป

— Derek 朕會功夫

81

มันเป็นเรื่องที่ยอมรับได้เพราะรูปแบบเหล่านี้ไม่ได้รหัสแต่ข้อมูล หากคุณต้องลบ "หมายเลขมายากล" ทั้งหมดคุณจะต้องทำซ้ำทุกป้ายกำกับและจบลงด้วยไฟล์ที่ดูไร้สาระเช่น:

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

ทุกครั้งที่คุณต้องการเปลี่ยนแปลงข้อมูลบางอย่างคุณจะต้องดูสองที่ ได้รับมีสถานการณ์ที่ดีที่จะหลีกเลี่ยงการทำซ้ำเช่นถ้าคุณมีสีที่ทำซ้ำบ่อยและคุณอาจต้องการเปลี่ยนเพื่อเปลี่ยนธีม มีตัวประมวลผลล่วงหน้าและส่วนขยายที่เสนอเพื่อแก้ไขสถานการณ์เหล่านั้น แต่โดยทั่วไปแล้วเป็นที่พึงปรารถนาที่จะมีตัวเลขพร้อมกับโครงสร้างในรูปแบบข้อมูล

— Karl Bielefeldt
แหล่งที่มา

22

+1 เพราะ: "เป็นที่ยอมรับเพราะรูปแบบเหล่านี้ไม่ใช่รหัส แต่เป็นข้อมูล"

— Pieter B

1

"ได้รับแล้วมีสถานการณ์ที่ดีที่จะหลีกเลี่ยงการทำซ้ำเช่นถ้าคุณมีสีที่ทำซ้ำบ่อยและคุณอาจต้องการเปลี่ยนเพื่อเปลี่ยนธีม" - น่าจะทำได้ดีกว่ากับคลาสต่อไป: .main_color { color: .. }และการใช้คลาสนั้นเป็นวิธีการลดความซ้ำซ้อน

— Izkata

รหัสที่กำหนดรูปลักษณ์ของแอปพลิเคชันยังคงเป็นรหัสและไม่ใช่ข้อมูล

— ESR

26

ข้อห้ามเกี่ยวกับหมายเลขเวทย์มนตร์เป็นเวอร์ชั่นดั้งเดิมของหลักการออกแบบนี้:

ทำให้การตัดสินใจในสถานที่หนึ่ง

แต่เหล่านี้ไม่ได้หมายเลขมายากล อย่างน้อยไม่เท่าที่คู่มือรูปแบบการเข้ารหัสที่ฉันรู้ว่าเกี่ยวข้อง

ความกว้าง: 200px;
ความสูง: 200px;

พวกเขามีข้อความชัดเจน แน่นอนว่าตัวเลขนั้นเหมือนกันทุกประการ แต่ความกว้างคือความกว้างและความสูงคือความสูง พวกเขาถูกออกแบบมาให้แตกต่างกันอย่างอิสระ

ตอนนี้ถ้าคุณมี 5 วัตถุที่ทั้งหมดได้ที่จะมีความกว้างเท่ากันและแต่ละ hardcoded อิสระความกว้างของพวกเขาฉันจะชนะคุณด้วยความร้ายติด

ฉันจะไม่เรียกพวกเขาหมายเลขมายากลถ้าพวกเขามีความโดดเด่น แต่ฉันยังคงชนะคุณด้วยความร้ายติด

— candied_orange
แหล่งที่มา

4

ถ้าคุณมีวัตถุมากพอที่จะต้องการตัวแปรคุณมีวัตถุเพียงพอที่จะสร้างคลาสใหม่

— Jaketr00

1

นี่คือคำตอบที่ดีที่สุดเพราะมันแสดงให้เห็นถึงประเด็น: นั่นไม่ใช่ตัวเลขเวทย์มนตร์

— TheBlastOne

2

"วัตถุ 5 ชิ้นที่ทุกคนต้องมีความกว้างเท่ากันและแต่ละชิ้นก็ทำการฮาร์ดโค้ดความกว้างของมันได้อย่างอิสระ ยินดีต้อนรับสู่โลกแห่งความสนุกของการออกแบบเว็บ

— whatsisname

2

ตัวเลขเวทย์ไม่เพียง แต่เป็นปัญหาเพราะ "ตัดสินใจในที่เดียว" (aka DRY) แต่ยังเพราะพวกเขาเข้าใจยาก

— sleske

มีทางเลือกอื่นในการเอาชนะด้วยไม้หรือไม่?

— djechlin

11

เนื่องจาก CSS ไม่ใช่ภาษาการเขียนโปรแกรมดังนั้นจึงเป็นไฟล์กำหนดค่าที่มีข้อมูลตัวแปรสำหรับโปรแกรมของคุณ

ปัจจุบัน CSS มีพลังมากที่คุณสามารถตั้งโปรแกรมได้จริง ๆ แต่มันก็ยังอยู่นอกเหนือประเด็น ในสาระสำคัญก็ยังคงเป็นภาษาสไตล์ชีต

ลองย้อนกลับไปก่อน ลองนึกภาพเรามีภาษาการเขียนโปรแกรมที่สามารถวาดบนหน้าจอ ลองนึกภาพเราต้องการตั้งโปรแกรมเพื่อทาสีหน้าเว็บ

ตอนแรกเราจะใส่หมายเลขเวทย์มนตร์ตันในรหัสของเรา ความกว้างของขอบความสูงของข้อความการเยื้อง ฯลฯ เป็นต้น

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

ดังนั้นเราจึงแยกหมายเลขเวทย์มนตร์และวางไว้บนไฟล์ของเรา

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

ตอนนี้มันค่อนข้างน่าเกลียด เราค่อนข้างอ่านตัวเลขตัวแปรของเราจากไฟล์กำหนดค่า

margin 100
table 500
text size 12

อืมมันไม่ค่อยชัดเจน ... ตัวเลขเหล่านี้หมายถึงอะไร? ชื่อเหล่านั้นหมายถึงอะไร มาทำเป็นระเบียบกันหน่อย

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

แต่คุณรู้ไหมว่าเราต้องการขยายโปรแกรมของเราเล็กน้อย นอกจากนี้เรายังต้องการให้วาดหน้าเว็บที่มีตารางหลายหน้าโดยไม่มีตารางหน้ากับย่อหน้าหรือปุ่มและอีกมากมาย ลองเพิ่มตัวเลือกไปยังไฟล์กำหนดค่าของเราเพื่อให้เราสามารถระบุว่าย่อหน้าใดควรมีแบบอักษรขนาดใหญ่ขึ้นหรือสีข้อความที่แตกต่างกันบางทีเราสามารถรองรับองค์ประกอบที่ซ้อนกันบางทีเราสามารถใช้คุณสมบัติทั่วไปในไฟล์กำหนดค่าของเรา หนึ่งในองค์ประกอบที่ซ้อนกันไม่กี่

คุณรู้สึกว่าจะเกิดอะไรขึ้นในที่สุดคุณก็มาถึงในฐานะ CSS (และเบราว์เซอร์ที่จะแสดงผล)

เราควรเพิ่มความสามารถในไฟล์การกำหนดค่าของเราเพื่อให้เราสามารถหลีกเลี่ยงหมายเลขเวทย์มนตร์ได้อีกครั้ง เพิ่มตัวแปรหรือไม่ เพิ่มไฟล์กำหนดค่าสำหรับไฟล์ CSS ของเราหรือไม่ มันให้ความรู้สึกบิตไม่มีจุดหมายถ้าคุณจำไฟล์ CSS ของเราเป็นที่การตั้งค่าไฟล์เดียวกันมากแล้ว

แต่นั่นไม่เป็นความจริงแน่นอน ไฟล์ CSS ของคุณขยายใหญ่ขึ้นเรื่อย ๆ และในที่สุดคุณก็พบกับปัญหาเดียวกันกับตัวเลขเวทย์มนตร์ดั้งเดิมหมายเลขเดิมซ้ำทั่วทุกที่บางครั้งก็มีการเปลี่ยนแปลงเล็กน้อย ฯลฯ

CSS ที่ทันสมัยช่วยให้หลายวิธีในการหลีกเลี่ยงการทำซ้ำ คุณสามารถใช้คลาสที่ใช้กับองค์ประกอบต่าง ๆ ได้คุณสามารถกำหนดสไตล์สำหรับทุกdivs ได้ แต่จะแทนที่หนึ่งโดยเฉพาะและ CSS 3 ยังอนุญาตให้ใช้ตัวแปรบางชนิดได้

ไม่ได้หมายความว่าคุณต้องเริ่มใช้งานตัวแปร CSS ในทุกตำแหน่งที่เป็นไปได้ ใช้มันในที่ที่เหมาะสมและใช้งานในที่ที่คุณหลีกเลี่ยงการทำซ้ำหรือในกรณีที่มีเทคนิคอื่น ๆ

ในท้ายที่สุดคุณไม่ต้องการตัวเลขเวทย์มนตร์มากเกินไปในไฟล์กำหนดค่าของคุณ :-)

— Dorus
แหล่งที่มา

เหตุใดจึงมีความสำคัญที่ความซ้ำซ้อนคืออะไร การบำรุงรักษาจะไม่เป็นปัญหาไม่ว่าจะอยู่ที่ไหน

— Peter Mortensen

@PeterMortensen นี่คือการพิจารณาเสมอระหว่างเวลาในการพัฒนาต่ำหรือการบำรุงรักษาสูง ความซ้ำซ้อนสูงนั้นง่ายต่อการพัฒนาเพราะคุณสามารถเปลี่ยนแปลงสิ่งต่าง ๆ ได้อย่างรวดเร็วที่นี่ความซ้ำซ้อนต่ำนั้นง่ายต่อการบำรุงรักษาเพราะคุณสามารถเปลี่ยนรูปแบบทั่วโลกได้อย่างรวดเร็ว ในทางปฏิบัติคุณต้องการอยู่ที่ไหนสักแห่งระหว่างทั้งสองเพราะเผชิญหน้ากับมันการมีสไตล์แบบสากลทำให้มันง่ายยิ่งขึ้นกว่าเดิมในการเพิ่มหน้าใหม่

— Dorus

เป็น CSS ที่ดีมีคุณสมบัติทั้งสองทิศทาง และขึ้นอยู่กับผู้พัฒนาเว็บที่จะตัดสินใจว่าจะใช้เวลานานเท่าใดในการลดความซ้ำซ้อนและเพิ่มความสามารถในการบำรุงรักษาหรือเวลาที่ต้องใช้ในการแยกหน้า / คุณสมบัติใหม่ออก น่าสนใจมากพอ ๆ กับภาษาการเขียนโปรแกรมอื่น ๆ ที่คุณสามารถใช้เวลาเป็นเดือนในการออกแบบที่สมบูรณ์แบบหรือวันที่จะตีโปรแกรมของคุณและใช้เวลาหลายเดือน

— Dorus

น่าสนใจพอฉันเพิ่งพบกับคำถามนี้ที่พูดถึงสิ่งที่เป็นนามธรรมมากเกินไปและเสียเวลาในการบำรุงรักษาและการพัฒนา

— Dorus

5

ทำไมมัน [กลุ่มของฮาร์ดโค้ดที่สุ่มค่าดูเหมือน] ตกลงสำหรับ CSS / SVG

ไม่เป็นไร เป็นไปได้ที่จะเขียนและดูแลรักษาไฟล์ ".css" แบบธรรมดา แต่ในที่สุดค่าสุ่มที่กำหนดรหัสยากจะกลายเป็นภาระที่แพร่หลาย

สำหรับสิ่งอื่นนอกเหนือจากหน้าเว็บที่แสนง่ายคุณจะต้องพัฒนากลยุทธ์ "ค้นหาและแทนที่" ที่มีระเบียบวินัยหรือใช้ CSS พรีโปรเซสเซอร์ที่มีตัวแปรหรือกำหนดสไตล์ผ่าน JavaScript

— แจ็คสัน
แหล่งที่มา