ปัญหา
- ระหว่างการทำสไตล์ด้วย CSS มักเกิดการชนกันของ CSS จนทำให้มีการใช้สไตล์ที่ไม่ต้องการ
- ความขัดแย้งลักษณะนี้มักเกิดจากไลบรารี UI, วิดเจ็ตจากบุคคลที่สาม หรือโค้ด CSS ที่ดูแลโดยทีมอื่น ซึ่งในกรณีแบบนี้ก็มักไม่สามารถแก้ไข CSS ได้ตามต้องการ
- โดยเฉพาะเมื่อชนกับ CSS จากไลบรารี UI หรือจากภายนอก ก็อาจเพิ่ม class หรือ ID ใน HTML เพิ่มเติมได้ยากเช่นกัน
- ยิ่งไปกว่านั้น หากโค้ด CSS ที่เป็นต้นเหตุของการชนถูกเขียนมาอย่างเจาะจงมาก ก็อาจเป็นไปไม่ได้ที่จะเขียน CSS ของเราให้เจาะจงยิ่งกว่าเพื่อเพิ่มลำดับความสำคัญ
- ในสถานการณ์แบบนี้ นักพัฒนาหลายคนมักหยิบ
!important มาใช้ได้ง่าย ๆ แต่ไม่ใช่วิธีที่แนะนำ
วิธีแก้
- ใช้ selector เดิมซ้ำก็พอ
- ตัวอย่างเช่น
.checkbox__icon.checkbox__icon จะมีลำดับความสำคัญสูงกว่า .checkbox__icon เพียงตัวเดียว
- แม้ว่าวิธีนี้อาจดูเหมือนเป็น CSS hack แต่ใน ข้อกำหนด CSS Selectors Level 4 ระบุไว้ชัดเจนว่า "Repeated occurrences of the same simple selector are allowed and do increase specificity.(อนุญาตให้มีการใช้ simple selector เดิมซ้ำ และจะเพิ่ม specificity ด้วย)"
7 ความคิดเห็น
ตอนนี้ CSS Cascade Layers (
@layer) รองรับในเบราว์เซอร์หลักทั้งหมดแล้ว จึงไม่จำเป็นต้องพึ่งพาแฮ็กประเภทนี้อีกต่อไปhttps://developer.mozilla.org/en-US/docs/Web/CSS/@layer
https://caniuse.com/css-cascade-layers
อ้อ งั้นที่ใช้
&&ใน styled-components ก็เพื่อโอเวอร์ไรด์สไตล์แบบนั้นนี่เองใช่ไหม?บทความของนักเรียนถูกลบลง
ให้ความรู้สึกเหมือนมนตร์ดำเลย 555
ต่อไปคงได้เห็นโค้ดแบบนี้กันแล้วนะ
.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon.checkbox__icon
โอ้ ไม่เคยรู้เรื่องนี้มาก่อนเลย...
ขึ้นอยู่กับสถานการณ์ อาจลองทำพรีโปรเซสเซอร์ที่ใช้โดยทำซ้ำตัวเลือกหลาย ๆ ครั้งก็ได้ครับ
โอ้ เป็นวิธีที่ไม่เคยรู้มาก่อนเลยนะ