ข้อผิดพลาด CSS ที่โง่ที่สุดของฉัน

เผยแพร่ซ้ำโดยเพลโต

ผู้ติดตาม: 0

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

อู้หู้.

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

เช่นเดียวกับสิ่งนี้ ฉันพบว่าตัวเองมีเวลามากกว่าที่ฉันต้องการยอมรับ:

.element {
  display: flexbox; /* 🤦‍♂️ */
}

หรือเมื่อฉันลองตั้งค่าการไล่ระดับสีโดยไม่ใช้ a background คุณสมบัติ:

.gradient {
  linear-gradient(45deg, rgb(50% 100% 90%), rgb(62% 85% 93%));
}

เกลียดความใกล้ชิด X และ C อยู่บนคีย์บอร์ดเพราะไม่สามารถนับได้ว่าฉันเจออะไรผิดพลาดไปกี่ครั้งแล้ว px for pc หน่วย

.element {
  font-size: 16pc; /* I meant pixels! */
}

ข้อผิดพลาด CSS อีกประการหนึ่งที่ฉันจับได้บ่อยๆ คือสิ่งที่ฉันรู้ว่าคนอื่น ๆ ทำเพราะฉันพบเห็นบ่อยเกินไปในโพสต์บล็อกที่มีข้อมูลโค้ด:

// This is not a CSS comment.
.element {
  /* This is a CSS comment. */
}

คุณเคยลืมใช้ไหม var() รอบตัวแปร CSS? ฉันแน่ใจว่ามี

.element {
  color: --primary-color;
}

เมื่อพูดถึงตัวแปร CSS การตั้งชื่อมันยาก (ชอบทุกอย่าง) และฉันมักใช้ตัวแปรที่ตั้งชื่อผิดรุ่น!

:root {
  --color-primary: #FF5722;
  --color-secondary: #3E2723;
}

/* Much later on... */

.element {
  color: var(--primary-color); /* 🙃 */
}

ใช่ ฉันได้คัดลอกตัวอย่าง CSS มาก่อนแล้วเพียงเพื่อให้มีเครื่องหมายคำพูดแฟนซีเข้ามาขัดขวางการทำงาน:

.element::before {
  content: “”; /* Should be "" */
}

และใช่ ฉันใช้เวลานานเกินไปในการหาว่าคำพูดเหล่านั้นเป็นตัวการ

มองดูอันสุดท้ายนั้นทำให้นึกถึงว่าบางทีก็ลืมตั้ง content คุณสมบัติเมื่อฉันทำงานด้วย ::before or ::after. ซึ่งทำให้ผมนึกถึงว่าผมลืมตั้งค่าองค์ประกอบอย่างไร position ก่อนที่จะพยายามชดเชยหรือเปลี่ยนมัน z-index. อย่างจริงจังสิ่งเหล่านี้เกิดขึ้น!

มันยากที่จะพูดถึงความผิดพลาด

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

แม้แต่บทความที่น่าขันเหล่านั้นก็ต้องล้มเหลวก่อนที่จะได้ทั้งหมด อุ๊ย และ อ้ากกก.

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

แต่ถ้าฉันซื่อสัตย์กับคุณ ฉันมักจะประหลาดใจ (และสนใจ) ใน การเดินทาง มันต้องใช้เพื่อให้บรรลุบางสิ่งบางอย่าง หูดและทั้งหมด การเดินทางเป็นเพียงแวบเดียวว่ามันเป็นอย่างไร คิดอย่างนักพัฒนา front-end. นั่นคือที่ที่การเรียนรู้ที่แท้จริง (และมีค่าที่สุด) เกิดขึ้น

และทั้งหมดนี้เป็นเพียงการสร้างขึ้นกับสิ่งที่ฉันอยากจะถามจริงๆ ...