ปรับปรุงประสิทธิภาพการเขียนโค้ด CSS ศึกษาลำดับการเขียนโค้ด CSS และทำให้เป็นมืออาชีพมากขึ้น

ในบทความก่อนหน้าบน downcodes.com เราได้กล่าวถึง "การเขียนไฟล์ CSS ของคุณใหม่เพื่อให้มีระเบียบและมีโครงสร้างที่ชัดเจนยิ่งขึ้น" แม้ว่านี่จะเป็นหนึ่งในวิธีการ แต่การพัฒนานิสัยการเขียนโค้ดที่ดีเป็นสิ่งที่ฉันชอบเกี่ยวกับ CSS มาโดยตลอด บทความในวันนี้จะกล่าวถึงเนื้อหานี้

สไตล์ CSS สุดท้ายที่กำหนดไว้จะแทนที่สไตล์ที่มีอยู่หรือที่ขัดแย้งกันที่กำหนดไว้ก่อนหน้า เช่นตัวอย่างต่อไปนี้:


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



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