CSS !สำคัญ: คืออะไรและใช้เมื่อใด

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

CSS มีความสำคัญอย่างไร

คุณสมบัติ !important ใน CSS บ่งชี้ว่ากฎใดๆ ที่แนบมานั้นจะมีความสำคัญเหนือกว่ากฎอื่นๆ เป็นความสำคัญสูงสุดสำหรับองค์ประกอบและตัวเลือกที่ใช้ ดังนั้นจึงช่วยให้นักพัฒนาและนักออกแบบสามารถควบคุมการจัดสไตล์สำหรับแต่ละส่วนของไซต์ได้โดยเฉพาะ ในกรณีส่วนใหญ่ นั่นหมายถึงการแทนที่สไตล์เริ่มต้นสำหรับไซต์ที่อยู่ใน styles.css หรือ custom.css

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

.example-class {
	color:#fff!important;
}

สิ่งสำคัญที่ต้องจำไว้ด้วย !important คือสองเท่า:

1. คำว่า สำคัญ ต้องนำหน้าด้วยเครื่องหมายอัศเจรีย์เสมอ (!)
2. อัฒภาคต้องอยู่ ท้ายบรรทัดเสมอ หลังการประกาศ !important

!important สามารถใช้ได้ทั้งแบบหน้าต่อหน้าหรือแบบทีละโมดูล (ในกรณีของตัวสร้างหน้าเช่น Divi) ถ้าคุณต้องการ — นั่นคือวิธีที่คุณใส่รหัสปาเก็ตตี้ของสิ่งที่แทนที่องค์ประกอบบน หน้าไหนและลำดับไหน

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

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

เมื่อใดควรใช้ CSS สำคัญ

การใช้งาน !important หลัก (และเป็นที่ยอมรับกันมากที่สุด) คือเมื่อคุณต้องการให้คลาสที่โต้ตอบกับตัวเลือกหลักมีรูปแบบที่แตกต่างกัน บางทีคุณอาจต้องการให้ หัวเรื่อง และ ข้อมูลเมตา ในบล็อกของคุณเป็นแบบอักษรและสีที่แตกต่างจากที่คุณทำในส่วนที่เหลือของไซต์ของคุณ สไตล์เริ่มต้นสำหรับองค์ประกอบเหล่านี้สืบทอดมาจากตัวเลือก h1 และ p ในไฟล์ CSS ของคุณ สิ่งที่คุณตั้งไว้สำหรับไซต์เริ่มต้นในไฟล์ .css หรือเครื่องมือปรับแต่งธีมของ WordPress จะแสดงขึ้น

p {
	font-weight: 400;
	font-size: 1.1rem;
	line-height: 1.7;
	color: #111;
	font-family:'Roboto';
}

h1 {
	margin-top: 30px;
	margin-bottom: 15px;
	color: #000;
	font-family:'Lato';
}

คุณสามารถเปลี่ยนแต่ละองค์ประกอบที่คุณต้องการ (ชื่อโพสต์บล็อกและข้อมูลเมตา) ด้วยคลาส entry-title และ . post-meta และเนื่องจากคุณต้องการให้พวกเขายังคงสืบทอดสไตล์ บางส่วน จากพาเรนต์ h1 และ p คุณจะต้องใช้ h1.entry-title และ p.post-meta เพื่อเรียกสิ่งเหล่านี้โดยเฉพาะ

h1.entry-title, p.post-meta {
	color: white!important;
	font-family:'Poppins'!important;
}

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

การปรับแต่งส่วนบุคคลประเภทนี้เป็นการใช้งานหลักของ !important แต่ไม่ใช่คนเดียว

ใช้ CSS สำคัญเพื่อปกป้องคลาส ID และองค์ประกอบ

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

เพียงตั้งชื่อองค์ประกอบด้วยคลาสหรือ ID แล้วใส่ !important ลงบนแต่ละบรรทัด

.youtube-embed {
	font-family:'Exo'!important;
	font-weight: 700!important;
	line-height:1.4rem!important;
	margin-top:25px!important;
	margin-left:auto!important;
	margin-right:auto!important
	color:#449928!important;
	padding:11px!important;
	background:#998899;
}

โว้ว! ป้องกันอนาคตจากการเปลี่ยนแปลงตามปกติในสไตล์ชีตของคุณ

การใช้รูปแบบอินไลน์

นี่เป็นหนึ่งในกรณีการใช้งานที่อาจหรือไม่เกิดขึ้นสำหรับคนจำนวนมาก มันเคยเป็นเรื่องธรรมดามาก แต่ก็น้อยลงเมื่อเราเปลี่ยนจากการเขียนบทความและหน้าของเราด้วยมือ อย่างไรก็ตาม หากคุณเคยเจาะเข้าไปใน HTML ของบล็อก Gutenberg หรือมุมมองข้อความของตัวแก้ไข WordPress แบบคลาสสิก คุณสามารถใช้ !important กับการจัดรูปแบบ CSS แบบอินไลน์ได้อย่างแน่นอน

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now!</p>
</div>

นี่เป็นสิ่งสำคัญด้วยเหตุผลสองประการ อย่างแรกคือคุณสามารถควบคุมโค้ดบรรทัดใดก็ได้ในหน้าของคุณโดยเฉพาะโดยใช้ style=”x:y!important;” และอย่างที่สองคือคุณสามารถแทนที่ CSS ที่ใช้กับหน้านั้นอยู่แล้ว แม้ว่าค่านั้นจะมี !important ด้วยเช่นกัน ตัวอย่างเช่น:

<style> 
	p { 
	    color:#313373!important;
	    font-size:2rem; 
	} 

    </style> 

<div class="special-paragraph" style="color:#blue!important;">
	<p>This text will show up blue now, even though there's another !important tag
		applied to the paragraph selector on this page!</p>
</div>

แม้ว่าจะมีการกำหนดสไตล์ HTML แบบฝังโดยใช้ <style></style> ที่ใช้ !important ในตัวเลือกเดียวกัน แต่ CSS ในบรรทัดที่กำหนดเป้าหมายไปยังย่อหน้าเฉพาะจะเป็นตัวแสดง

ระวังการซ้อนแท็กที่สำคัญ

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

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

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

ห่อ

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

คุณรู้สึกอย่างไรกับการใช้ CSS !important ในโครงการของคุณ?

บทความ ภาพโดย wan wei / shutterstock.com