Tôi ghét chúng, nó bất chấp bản chất xếp tầng của CSS và nếu bạn không sử dụng chúng một cách cẩn thận thì cuối cùng bạn sẽ thêm một vòng nữa !important.

Nhưng tôi muốn biết họ có tệ cho hiệu suất không?

EDIT
Từ các câu trả lời (nhanh) Tôi có thể kết luận rằng nó sẽ không có tác động (đáng kể) đến hiệu suất. Nhưng thật tuyệt khi biết, ngay cả khi đó chỉ là một cuộc tranh luận thêm để làm nản lòng người khác;).

EDIT 2
BoltClock chỉ ra rằng nếu có 2 !importantkhai báo, thông số kỹ thuật nói rằng nó sẽ chọn một khai báo cụ thể nhất.

Nó không có bất kỳ ảnh hưởng đến hiệu suất thực sự. Nhìn thấy trình phân tích cú pháp CSS của firefox/source/layout/style/nsCSSDataBlock.cpp#572 và tôi nghĩ đó là thói quen có liên quan, xử lý việc ghi đè các quy tắc CSS.

nó chỉ có vẻ là một kiểm tra đơn giản cho "quan trọng".

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

Ngoài ra, ý kiến ​​tại 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 sử dụng trình phân tích cú pháp từ trên xuống được viết thủ công. Trong cả hai trường hợp, mỗi tệp CSS được phân tích cú pháp thành một đối tượng StyleSheet, mỗi đối tượng chứa các quy tắc CSS.

2. Firefox sau đó tạo các cây ngữ cảnh kiểu chứa các giá trị cuối (sau khi áp dụng tất cả các quy tắc theo đúng thứ tự)

Từ: http://taligarsiel.com/Projects/howbrowserswork1.htm#CSS_parsing

Bây giờ, bạn có thể dễ dàng thấy, như trong trường hợp với Mô hình đối tượng được mô tả ở trên, trình phân tích cú pháp có thể đánh dấu các quy tắc bị ảnh hưởng !importantdễ dàng, mà không phải trả nhiều chi phí tiếp theo. Suy giảm hiệu suất không phải là một lý lẽ tốt chống lại !important.

Tuy nhiên, khả năng duy trì sẽ gây ấn tượng (như các câu trả lời khác được đề cập), đây có thể là lý lẽ duy nhất của bạn chống lại chúng.

Tôi không nghĩ rằng điều đó !importantvốn đã tệ về mặt trình duyệt khớp với các quy tắc một cách nhanh chóng (nó không phải là một phần của bộ chọn, chỉ là một phần của tuyên bố)

Tuy nhiên, như đã được nêu, nó sẽ làm giảm khả năng duy trì mã của bạn và do đó có thể khiến nó tăng kích thước không cần thiết do những thay đổi trong tương lai. Việc sử dụng !importantcũng có khả năng làm giảm hiệu suất của nhà phát triển.

Nếu bạn thực sự kén chọn, bạn cũng có thể nói rằng !importantthêm 11 byte bổ sung vào tệp CSS của mình, điều này thực sự không nhiều, nhưng tôi đoán nếu bạn có một vài !importants trong biểu định kiểu của mình thì nó có thể tăng thêm.

Chỉ là suy nghĩ của tôi, thật không may, tôi không thể tìm thấy bất kỳ điểm chuẩn nào về cách !importantcó thể ảnh hưởng đến hiệu suất.

!importantcó vị trí của nó. Tôi tin tưởng rằng một ngày. Nó đã tiết kiệm cho tôi nhiều lần và thường hữu ích hơn như một giải pháp ngắn hạn, trước khi có thể tìm ra phương pháp dài hơn và thanh lịch hơn cho vấn đề của bạn.

Tuy nhiên, giống như hầu hết mọi thứ, nó đã bị lạm dụng, nhưng không cần phải lo lắng về "hiệu suất". Tôi sẽ đặt cược một GIF 1x1 nhỏ có nhiều điểm nhấn về hiệu suất trên trang web hơn là quan trọng.

Nếu bạn muốn tối ưu hóa các trang của mình, có nhiều tuyến đường quan trọng hơn nữa ;);)

Điều xảy ra ở đây đằng sau hậu trường là khi CSS của bạn đang được xử lý, trình duyệt sẽ đọc nó, gặp một !importantthuộc tính và trình duyệt quay lại để áp dụng các kiểu được xác định bởi !important. Quá trình bổ sung này có vẻ như là một bước bổ sung nhỏ, nhưng nếu bạn đang phục vụ nhiều yêu cầu thì bạn sẽ đạt được hiệu quả. (Nguồn)

Sử dụng! Quan trọng trong CSS của bạn thường có nghĩa là nhà phát triển tự ái & ích kỷ hoặc lười biếng. Tôn trọng các nhà phát triển đến ...

Suy nghĩ của một nhà phát triển khi sử dụng !important:

1. CSS rocking của tôi không hoạt động ... grrrr.
2. Tôi nên làm gì bây giờ??
3. Và sau đó !importantyeah .... bây giờ nó hoạt động tốt.

Tuy nhiên, đây không phải là cách tiếp cận tốt để sử dụng !importantchỉ vì chúng tôi không quản lý CSS tốt. Nó tạo ra rất nhiều vấn đề thiết kế - tệ hơn vấn đề về hiệu năng - nhưng nó cũng buộc chúng ta phải sử dụng nhiều dòng mã bổ sung vì chúng ta đang ghi đè các thuộc tính khác !importantvà CSS của chúng ta bị lộn xộn với mã vô dụng. Thay vào đó, điều đầu tiên chúng ta nên làm là quản lý CSS thật tốt và không để các thuộc tính đè lên nhau.

Chúng ta có thể sử dụng !important. Nhưng sử dụng nó một cách tiết kiệm và chỉ khi không có lối thoát khác.

Tôi đồng ý với bạn về việc không sử dụng nó vì đó là cách thực hành tồi, bất kể hiệu suất. Trên cơ sở đó, tôi sẽ tránh sử dụng !importantbất cứ nơi nào có thể.

Nhưng về câu hỏi về hiệu suất: Không, nó không nên được chú ý. Nó có thể có một số tác dụng, nhưng nó sẽ rất nhỏ bạn không bao giờ nên chú ý đến nó, bạn cũng không nên lo lắng về nó.

Nếu nó đủ quan trọng để trở nên đáng chú ý thì có khả năng bạn đã gặp vấn đề lớn hơn trong mã của mình !important. Việc sử dụng đơn giản một yếu tố cú pháp thông thường của các ngôn ngữ cốt lõi mà bạn đang sử dụng sẽ không bao giờ là vấn đề về hiệu suất.

Hãy để tôi trả lời câu hỏi của bạn với một câu hỏi trả đũa; một góc mà bạn có thể không cân nhắc: Ý bạn là trình duyệt nào?

Mỗi trình duyệt rõ ràng có công cụ kết xuất riêng, với sự tối ưu riêng. Vì vậy, câu hỏi bây giờ trở thành: ý nghĩa hiệu suất trong mỗi trình duyệt là gì? Có lẽ hoạt động !importantkém trong một trình duyệt nhưng thực sự tốt trong một trình duyệt khác? Và có lẽ trong các phiên bản tiếp theo, nó sẽ là cách khác?

Tôi đoán quan điểm của tôi ở đây là chúng ta với tư cách là nhà phát triển web không nên nghĩ về (hoặc cần phải suy nghĩ) về ý nghĩa hiệu suất của các cấu trúc cú pháp riêng lẻ của các ngôn ngữ chúng ta đang sử dụng. Chúng ta nên sử dụng các cấu trúc cú pháp đó bởi vì chúng là cách phù hợp để đạt được những gì chúng ta không muốn vì cách chúng thực hiện.

Các câu hỏi về hiệu suất nên được hỏi cùng với việc sử dụng các trình định hình để phân tích vị trí các điểm chốt trong hệ thống của bạn. Sửa chữa những điều thực sự làm bạn chậm lại trước tiên. Gần như chắc chắn sẽ có nhiều vấn đề lớn hơn rất nhiều để bạn khắc phục trước khi bạn xuống cấp độ của các cấu trúc CSS riêng lẻ.

Nó không ảnh hưởng đáng kể đến hiệu suất. Tuy nhiên, điều này làm giảm khả năng duy trì mã của bạn và do đó có khả năng làm giảm hiệu suất trong thời gian dài.

Phải sử dụng !importantnhiều lần trước đây, cá nhân tôi nhận thấy không có hiệu suất rõ ràng nào khi sử dụng nó.

Như một lưu ý, xem câu trả lời cho câu hỏi ngăn xếp này vì một lý do bạn có thể muốn sử dụng !important.

Ngoài ra tôi sẽ đề cập đến một cái gì đó mà mọi người khác đã không đề cập đến. !importantlà cách duy nhất để ghi đè css nội tuyến bằng cách viết một hàm javascript (sẽ ảnh hưởng đến hiệu suất của bạn nếu chỉ một chút). Vì vậy, nó thực sự có thể giúp bạn tiết kiệm một số thời gian hiệu suất nếu bạn cần ghi đè css nội tuyến.

hmm ...! quan trọng hay !! quan trọng?

Chúng ta hãy thực hiện từng bước này:

1. Trình phân tích cú pháp phải kiểm tra! Quan trọng đối với từng thuộc tính, bất kể bạn có sử dụng hay không - vì vậy sự khác biệt về hiệu suất ở đây là 0
2. Khi ghi đè một thuộc tính, trình phân tích cú pháp phải kiểm tra xem thuộc tính được ghi đè có quan trọng hay không - vì vậy sự khác biệt về hiệu suất ở đây là 0 lần nữa
3. Nếu thuộc tính bị ghi đè là !! quan trọng, thì nó phải ghi đè lên thuộc tính - hiệu suất đạt -1 vì không sử dụng! Quan trọng
4. Nếu thuộc tính bị ghi đè là quan trọng, thì nó bỏ qua ghi đè lên thuộc tính - tăng hiệu suất +1 để sử dụng! Quan trọng
5. Nếu thuộc tính mới là quan trọng, phân tích cú pháp phải ghi đè lên nó bất kể thuộc tính bị ghi đè là gì! Quan trọng hoặc !! quan trọng - hiệu suất chênh lệch 0 lần nữa

Vì vậy, tôi đoán! Quan trọng thực sự có hiệu suất tốt hơn vì nó có thể giúp trình phân tích cú pháp bỏ qua nhiều thuộc tính mà nó sẽ không bỏ qua.

và như @ryan đề cập dưới đây, cách duy nhất để ghi đè css nội tuyến và tránh sử dụng javascript ... vì vậy, một cách khác để tránh một cú đánh hiệu suất không cần thiết

hmm ... hóa ra là quan trọng

và cũng

• sử dụng! quan trọng tiết kiệm rất nhiều thời gian cho một nhà phát triển
• đôi khi giúp bạn tiết kiệm thiết kế lại toàn bộ css
• đôi khi tệp html hoặc tệp css cha không nằm trong tầm kiểm soát của bạn, vì vậy nó sẽ cứu cuộc sống của bạn ở đó
• rõ ràng ngăn chặn! các yếu tố quan trọng không bị ghi đè bởi các yếu tố quan trọng khác !!
• và đôi khi các trình duyệt không chọn đúng thuộc tính, mà không quá cụ thể trong bộ chọn, vì vậy việc sử dụng! quan trọng thực sự trở nên quan trọng và giúp bạn tiết kiệm hàng tấn bộ chọn css cụ thể trong css của bạn. Vì vậy, tôi đoán ngay cả khi bạn sử dụng nhiều byte hơn để viết! quan trọng, nó có thể giúp bạn tiết kiệm byte ở những nơi khác. và tất cả chúng ta đều biết, bộ chọn css có thể trở nên lộn xộn.

Vì vậy, tôi đoán việc sử dụng! Quan trọng có thể khiến các nhà phát triển hài lòng và tôi nghĩ điều đó rất quan trọng : D

Tôi không thể thấy trước !importanthiệu suất cản trở, dù sao thì không. Tuy nhiên, nếu CSS của bạn bị đánh đố !important, điều đó cho thấy rằng bạn đã vượt quá các bộ chọn đủ điều kiện và quá cụ thể và bạn đã hết cha mẹ hoặc vòng loại để thêm tính cụ thể. Do đó, CSS của bạn sẽ trở nên cồng kềnh ( sẽ cản trở hiệu suất) và khó duy trì.

Nếu bạn muốn viết CSS hiệu quả thì bạn muốn chỉ cụ thể như bạn cần và viết CSS mô-đun . Bạn không nên sử dụng ID (có băm), bộ chọn chuỗi hoặc bộ chọn đủ điều kiện.

Các ID có tiền tố #trong CSS rất đặc biệt, đến mức 255 lớp sẽ không ghi đè lên một id (fiddle by: @Faust ). ID cũng có một vấn đề được định tuyến sâu hơn, chúng phải là duy nhất, điều này có nghĩa là bạn không thể sử dụng lại chúng cho các kiểu trùng lặp, vì vậy cuối cùng bạn sẽ viết css tuyến tính với các kiểu lặp lại. Tác động của việc làm này sẽ thay đổi dự án theo dự án, tùy thuộc vào quy mô, nhưng khả năng bảo trì sẽ bị ảnh hưởng rất lớn và trong các trường hợp cạnh, hiệu suất cũng vậy.

Làm thế nào bạn có thể thêm tính đặc hiệu mà không cần !important, xâu chuỗi, đủ điều kiện hoặc ID (cụ thể #)

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

Được rồi, vậy làm thế nào để làm việc?

Các ví dụ thứ nhất và thứ hai hoạt động như nhau, đầu tiên là một lớp và thứ hai là bộ chọn thuộc tính. Các lớp và bộ chọn thuộc tính có tính đặc hiệu giống hệt nhau. .eg1/2-barkhông kế thừa màu sắc của .eg1/2-foonó bởi vì nó có quy tắc riêng của nó.

Ví dụ thứ ba trông giống như bộ chọn vòng loại hoặc chuỗi, nhưng không phải vậy. Xâu chuỗi là khi bạn chọn tiền tố với cha mẹ, tổ tiên, v.v. điều này thêm tính đặc hiệu. Đủ tiêu chuẩn là tương tự, nhưng bạn xác định thành phần mà bộ chọn đang áp dụng. đủ điều kiện: ul.classvà chuỗi:ul .class

Tôi không chắc bạn gọi kỹ thuật này là gì, nhưng hành vi này là có chủ ý và được W3C ghi lại

Sự xuất hiện lặp đi lặp lại của cùng một bộ chọn đơn giản được cho phép và làm tăng tính đặc hiệu.

Điều gì xảy ra khi tính đặc hiệu giữa hai quy tắc là giống hệt nhau?

Như @BoltClock đã chỉ ra , Nếu có nhiều tuyên bố quan trọng thì hãy xác định rằng điều cụ thể nhất sẽ được ưu tiên.

Trong ví dụ dưới đây, cả hai .foovà .barđều có tính đặc hiệu giống hệt nhau, do đó, hành vi rơi vào bản chất xếp tầng của CSS, theo đó quy tắc cuối cùng được khai báo trong CSS yêu cầu quyền ưu tiên tức là .foo.

HTML

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

CSS

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

JSFiddle