ฉันเกลียดพวกเขาก็มาได้อย่างหวุดหวิดธรรมชาติของ cascading CSS !importantและถ้าคุณไม่ใช้พวกเขากับการดูแลคุณจะจบลงในวงของการเพิ่มมากขึ้น

แต่ฉันอยากรู้ว่ามันแย่สำหรับการแสดงหรือไม่?

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

แก้ไข 2
BoltClock ชี้ให้เห็นว่าหากมี 2 !importantการประกาศรายละเอียดบอกว่ามันจะเลือกหนึ่งที่เฉพาะเจาะจงมากที่สุด

มันไม่ควรมีผลกระทบใด ๆ กับการแสดงจริงๆ เห็นCSS parser ของ firefox ที่/source/layout/style/nsCSSDataBlock.cpp#572และฉันคิดว่านั่นเป็นกิจวัตรที่เกี่ยวข้องการจัดการการเขียนทับกฎ CSS

ดูเหมือนว่าเป็นการตรวจสอบอย่างง่ายสำหรับ "สำคัญ"

  if (aIsImportant) {
    if (!HasImportantBit(aPropID))
      changed = PR_TRUE;
    SetImportantBit(aPropID);
  } else {
    // ...

นอกจากนี้ยังมีความคิดเห็นที่ source/layout/style/nsCSSDataBlock.h#219

    /**
     * Transfer the state for |aPropID| (which may be a shorthand)
     * from |aFromBlock| to this block.  The property being transferred
     * is !important if |aIsImportant| is true, and should replace an
     * existing !important property regardless of its own importance
     * if |aOverrideImportant| is true.
     * 
     * ...
     */

1. Firefox ใช้ parser จากบนลงล่างเขียนด้วยตนเอง ในทั้งสองกรณีแต่ละไฟล์ CSS จะถูกแยกวิเคราะห์เป็นวัตถุ StyleSheet แต่ละวัตถุมีกฎ CSS

2. Firefox จะสร้างแผนผังบริบทของสไตล์ซึ่งมีค่าสิ้นสุด (หลังจากใช้กฎทั้งหมดตามลำดับที่ถูกต้อง)

จาก: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

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

อย่างไรก็ตามการบำรุงรักษาใช้เวลาตี (ตามคำตอบอื่น ๆ ที่กล่าวถึง) ซึ่งอาจเป็นข้อโต้แย้งของคุณกับพวกเขาเท่านั้น

ฉันไม่คิดอย่างนั้น !importantมันเลวร้ายในแง่ของความเร็วของเบราว์เซอร์ที่ตรงกับกฎ (มันไม่ได้เป็นส่วนหนึ่งของตัวเลือกเพียงบางส่วนของการประกาศ)

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

ถ้าคุณจู้จี้จุกจิกจริงๆคุณอาจพูดได้ว่า!importantเพิ่ม 11 ไบต์พิเศษลงในไฟล์ CSS ของคุณนี่มันไม่มากนัก แต่ฉันเดาว่าถ้าคุณมีจำนวนไม่มากนัก!importantในสไตล์ชีทของคุณ

แค่ความคิดของฉันโชคไม่ดีที่ฉันไม่สามารถหาเกณฑ์มาตรฐานว่า!importantจะส่งผลต่อประสิทธิภาพได้อย่างไร

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

อย่างไรก็ตามเช่นเดียวกับสิ่งส่วนใหญ่มันถูกทารุณกรรม แต่ไม่จำเป็นต้องกังวลเกี่ยวกับ 'ประสิทธิภาพ' ฉันจะวางเดิมพัน 1x1 GIF ขนาดเล็กหนึ่งรายการที่มีประสิทธิภาพมากกว่าบนหน้าเว็บมากกว่า!

หากคุณต้องการเพิ่มประสิทธิภาพหน้าเว็บของคุณมีเส้นทางสำคัญมากมายให้เลือก;);)

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

การใช้! สำคัญใน CSS ของคุณมักจะหมายถึงนักพัฒนาหลงตัวเอง & เห็นแก่ตัวหรือขี้เกียจ เคารพผู้พัฒนาที่จะมา ...

ความคิดของนักพัฒนาเมื่อใช้!important:

1. CSS โยกของฉันไม่ทำงาน ... grrrr
2. สิ่งที่ฉันควรทำตอนนี้??
3. และ!importantใช่แล้ว.... ตอนนี้มันใช้งานได้ดี

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

เราสามารถ!importantใช้ แต่ใช้เท่าที่จำเป็นและเมื่อไม่มีทางออกอื่น

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

แต่สำหรับคำถามเกี่ยวกับประสิทธิภาพการทำงาน: ไม่ไม่ควรสังเกตเห็นได้ชัด มันอาจจะมีผลกระทบบางอย่าง แต่มันควรจะเป็นอย่างเล็ก ๆ ที่คุณไม่ควรแจ้งให้ทราบว่าไม่ควรต้องกังวล

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

ให้ฉันตอบคำถามของคุณพร้อมคำถามย้อนกลับ มุมที่คุณอาจไม่พิจารณา: เบราว์เซอร์ใดที่คุณหมายถึง

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

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

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

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

ฉันต้องใช้!importantหลายครั้งก่อนหน้านี้ฉันสังเกตว่าไม่มีการแสดงที่ใช้งานได้ดีเมื่อใช้งาน

ในฐานะโน้ตให้ดูคำตอบสำหรับคำถามสแต็กนี้ด้วยเหตุผลที่คุณอาจต้องการใช้!importantสำหรับเหตุผลที่คุณอาจต้องการที่จะใช้

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

อืม ... ! สำคัญหรือ !! สำคัญ?

ลองทำตามขั้นตอนนี้:

1. Parser ต้องตรวจสอบ! สำคัญสำหรับแต่ละคุณสมบัติไม่ว่าคุณจะใช้หรือไม่ก็ตามดังนั้นความแตกต่างของประสิทธิภาพที่นี่คือ 0
2. เมื่อเขียนทับคุณสมบัติตัวแยกวิเคราะห์จะต้องตรวจสอบว่าคุณสมบัติที่ถูกเขียนทับนั้นสำคัญหรือไม่ - ดังนั้นความแตกต่างของประสิทธิภาพที่นี่คือ 0 อีกครั้ง
3. หากคุณสมบัติที่ถูกเขียนทับมีความสำคัญ !! จะต้องเขียนทับคุณสมบัติ - ประสิทธิภาพการทำงานของการเข้าชม -1 ไม่ได้ใช้! สำคัญ
4. หากคุณสมบัติที่ถูกเขียนทับนั้นสำคัญ! มันจะข้ามการเขียนทับคุณสมบัติ - การเพิ่มประสิทธิภาพของ +1 สำหรับการใช้! สำคัญ
5. ถ้าคุณสมบัติใหม่คือ! important คำสั่งจะต้องเขียนทับมันโดยไม่คำนึงถึงคุณสมบัติที่ถูกเขียนทับคือ! important หรือ !! important - ความแตกต่างของประสิทธิภาพ 0 อีกครั้ง

ดังนั้นฉันเดา! สำคัญจริง ๆ มีประสิทธิภาพที่ดีขึ้นเนื่องจากมันสามารถช่วย parser ข้ามคุณสมบัติหลายอย่างที่มันจะไม่ข้ามเป็นอย่างอื่น

และในขณะที่ @ryan กล่าวถึงด้านล่างวิธีเดียวที่จะแทนที่ inline css และหลีกเลี่ยงการใช้ javascript ... ดังนั้นอีกวิธีหนึ่งในการหลีกเลี่ยงการทำงานที่ไม่จำเป็น

อืม ... ปรากฎว่าสำคัญ!

และนอกจากนี้ยังมี,

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

ดังนั้นฉันเดาว่าใช้! สำคัญสามารถทำให้นักพัฒนามีความสุขและฉันคิดว่านั่นสำคัญมาก : D

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

หากคุณต้องการที่จะเขียน CSS ที่มีประสิทธิภาพแล้วคุณอยากจะเป็นเพียงเป็นเฉพาะที่คุณจะต้องและเขียนCSS แบบแยกส่วน CSSขอแนะนำให้หลีกเลี่ยงการใช้ ID (ที่มีแฮช) ตัวเลือกการผูกมัดหรือตัวเลือกที่มีคุณสมบัติ

รหัสที่ขึ้นต้นด้วย#ใน CSS มีความเฉพาะเจาะจงมากจนถึงจุดที่255 คลาสจะไม่แทนที่รหัส (ซอโดย: @Faust ) ID มีปัญหาการกำหนดเส้นทางที่ลึกกว่าด้วยเช่นกันพวกเขาจะต้องไม่ซ้ำกันซึ่งหมายความว่าคุณไม่สามารถใช้พวกเขาซ้ำสำหรับสไตล์ที่ซ้ำกันดังนั้นคุณจึงต้องเขียน css เชิงเส้นด้วยสไตล์การทำซ้ำ ผลกระทบของการทำเช่นนี้จะแตกต่างกันไปตามโครงการขึ้นอยู่กับขนาด แต่การบำรุงรักษาจะประสบปัญหาอย่างมากและในกรณีขอบประสิทธิภาพการทำงานเช่นกัน

คุณจะเพิ่มความเจาะจงได้อย่างไรโดยไม่ต้อง!importantผูกมัดมีคุณสมบัติหรือ ID (เช่น#)

HTML

<div class="eg1-foo">
    <p class="eg1-bar">foobar</p>
</div>
<div id="eg2-foo">
    <p id="eg2-bar">foobar</p>
</div>
<div class="eg3-foo">
    <p class="eg3-foo">foobar</p>
</div>

CSS

.eg1-foo {
    color: blue;
}
.eg1-bar {
    color: red;
}
[id='eg2-foo'] {
    color: blue;
}
[id='eg2-bar'] {
    color: red;
}
.eg3-foo {
    color: blue;
}
.eg3-foo.eg3-foo {
    color: red;
}

JSFiddle

โอเคแล้วมันทำงานอย่างไร

ตัวอย่างแรกและตัวที่สองทำงานเหมือนกันอย่างแรกคือคลาสจริงๆและตัวที่สองคือตัวเลือกคุณลักษณะ ตัวเลือกคลาสและแอตทริบิวต์มีความจำเพาะที่เหมือนกัน .eg1/2-barไม่สืบทอดสีของมันจาก.eg1/2-fooเนื่องจากมีกฎของตัวเอง

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

ฉันไม่แน่ใจว่าคุณจะเรียกเทคนิคนี้ว่าอะไร แต่พฤติกรรมดังกล่าวตั้งใจและบันทึกไว้โดย W3C

อนุญาตให้มีการเกิดขึ้นซ้ำ ๆ ของตัวเลือกอย่างง่ายเดียวกันและเพิ่มความจำเพาะ

จะเกิดอะไรขึ้นเมื่อความจำเพาะระหว่างกฎทั้งสองนั้นเหมือนกัน?

ดังที่@BoltClock ชี้ให้เห็นหากมีการประกาศที่สำคัญหลายรายการข้อมูลจำเพาะจะบอกว่าสิ่งที่เฉพาะเจาะจงที่สุดควรมีความสำคัญกว่า

ในตัวอย่างด้านล่างทั้งสอง.fooและ.barมีความเฉพาะเจาะจงที่เหมือนกันดังนั้นพฤติกรรมที่ตกหล่นกับลักษณะซ้อนของ CSS โดยกฎล่าสุดที่ประกาศใน CSS อ้างว่ามีความสำคัญ.fooกว่า

HTML

<div>
    <p class="foo bar">foobar</p>
</div>

CSS

.bar {
    color: blue !important;
}
.foo {
    color: red !important;
}

JSFiddle