Cách tốt nhất để vượt qua CSS plugin?

36

Hiện tại, tôi sử dụng tính đặc hiệu CSS để ghi đè các kiểu plugin. Tôi thích điều này để chỉnh sửa plugin vì nó làm giảm bớt đau đầu khi bạn cập nhật.

Sẽ thật tuyệt nếu bảng định kiểu của tôi được tải sau các plugin, do đó tôi chỉ phải cụ thể, không hơn. Điều này sẽ làm cho bảng định kiểu của tôi đẹp hơn nhiều.

plugins css

— Fuzz nhẹ
nguồn

1

upvote đã dạy tôi về Tính đặc hiệu của CSS, chưa bao giờ nghe về nó trước câu hỏi của bạn và nó đã giúp tôi rất nhiều!

— luke_mclachlan

21

Như bạn đề xuất, cách tiếp cận thanh lịch nhất là khi các phần ghi đè CSS của bạn được tải sau khi CSS được các plugin bổ sung. Điều này khá dễ dàng để đạt được - bạn chỉ cần đảm bảo rằng các header.phpcuộc gọi của bạn wp_head()trước khi nó tham chiếu biểu định kiểu của bạn:

<head>
    <!-- all the usual preamble stuff goes here -->

    <?php wp_head(); ?>

    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>

— Tim Coulter
nguồn

Và nếu tôi đang sử dụng một chủ đề trẻ em thì sao? Tôi không muốn ghi đè tiêu đề.php của chủ đề gốc.

— Jules

19

Có một số cách plugin có thể xử lý CSS.

trường hợp tốt nhất: plugin xếp hàng CSS và cung cấp tùy chọn để vô hiệu hóa nó (vô hiệu hóa nó, sao chép mã CSS vào biểu định kiểu của bạn và hài lòng);
trường hợp tốt: plugin hook chức năng xếp hàng kiểu (chức năng unsook, hook của riêng bạn với mod nếu cần);
trường hợp thông thường: plugin xếp hàng CSS trực tiếp. Xem làm thế nào để loại bỏ một kịch bản? (áp dụng cho phong cách là tốt). Phiên bản ngắn - sẽ có chức năng dequeue trong bản phát hành WP trong tương lai, hiện tại có thể hoạt động vớiwp_deregister_*
trường hợp xấu: plugin lặp lại CSS giữa một loạt những thứ khác. Từng trường hợp...

Nhìn chung, theo tôi, tốt hơn và dễ dàng hơn để vô hiệu hóa các bảng định kiểu riêng biệt và kết hợp chúng theo cách riêng của bạn để giảm thiểu các vấn đề và cải thiện hiệu suất (ít tệp để tìm nạp).

— Đầu tiên
nguồn

Làm thế nào tôi biết nó là cái gì?

— IanEdington

1

Bằng cách nhìn vào mã là chủ yếu. :)

— Hết

2

Một cách khá thanh lịch khác là sử dụng tính đặc hiệu của CSS.

Vì vậy, nếu css của plugin nói:

div.product div.images img {
  ......
}

bạn xác định trong css của bạn:

body div.product div.images img {
  ......
}

Cũng xem câu trả lời của Michael Rader cho một câu hỏi tương tự.

— Andreas
nguồn

OK cảm ơn bạn rất nhiều. Đây sẽ là câu trả lời được chấp nhận cho tôi. Chỉ cần sử dụng style.css chung và tính đặc hiệu hoạt động như một sự tỏa sáng!

— Luca Reghellin

1

Tôi lưu một bản sao của CSS plugin "không sẵn sàng" vào thư mục chủ đề và nhập nó vào css chủ đề bằng cách thêm

@import url('name-of-the-plugin-css.css');

với nó (tất nhiên, thay thế tên của .css bằng tên tôi đang tiêm). Sau đó, tôi sửa đổi bản sao css trong thư mục chủ đề và lưu nó vào máy chủ như tôi làm cho các tệp khác. Ồ, vâng, đôi khi có thể cần phải "đóng đinh" ID hoặc các lớp bị thay đổi bằng cách gán cho chúng một "! Quan trọng".

Tôi không biết nếu đây là trạng thái của nghệ thuật, nhưng nó không có hại và hoạt động tốt.

— Sven Knoch
nguồn

0

Để ghi đè css của plugin, đã sử dụng tính đặc hiệu và quan trọng, tôi đã sử dụng id để ghi đè các lớp. Điều này đã làm sạch mã của tôi một chút. Tất nhiên, nó cũng không phải là một giải pháp hoàn hảo ở chỗ nó chỉ hoạt động khi có id được gán cho các phần tử cũng như các lớp.

Bạn cũng có thể sử dụng các bộ chọn thuộc tính trong lý thuyết. Tuy nhiên, tôi vẫn chưa đưa lý thuyết đó vào thử nghiệm.

— Sean H. Smith
nguồn

0

Tôi đã kết thúc bằng cách sử dụng! Quan trọng cho css tùy chỉnh của mình và điều đó ghi đè lên kiểu dáng cho plugin mà tôi gặp sự cố. Nhà phát triển plugin đã sử dụng! Quan trọng trong toàn bộ css plugin và đó là lý do tại sao tôi không thể ghi đè lên mà không quan trọng!

body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;    
}

— Randy D
nguồn

-1

Để ghi đè css của plugin, đã sử dụng tính đặc hiệu và quan trọng, tôi đã sử dụng id để ghi đè các lớp. Điều này đã làm sạch mã của tôi một chút. Tất nhiên, nó cũng không phải là một giải pháp hoàn hảo ở chỗ nó chỉ hoạt động khi có id được gán cho các phần tử cũng như các lớp.

Bạn cũng có thể sử dụng các bộ chọn thuộc tính trong lý thuyết. Tuy nhiên, tôi vẫn chưa đưa lý thuyết đó vào thử nghiệm.

— DSSdd
nguồn