Cea mai bună metodă de a suprascrie CSS-ul unui plugin?

Există mai multe moduri în care plugin-urile pot gestiona CSS-ul.

• cel mai bun caz: plugin-ul încarcă CSS-ul în coadă și oferă opțiunea de a-l dezactiva (dezactivează-l, copiază codul CSS în fișierul tău de stiluri și fii fericit);
• caz bun: plugin-ul folosește un hook pentru funcția care încarcă stilul (deconectează funcția, conectează-o pe a ta cu modificări dacă este necesar);
• caz obișnuit: plugin-ul încarcă CSS-ul direct. Vezi Cum să scoți un script din coadă? (se aplică și stilurilor). Varianta scurtă - va exista o funcție de deque în viitoarele versiuni de WP, deocamdată se poate folosi wp_deregister_*
• caz rău: plugin-ul afișează CSS-ul printre o grămadă de alte lucruri. De analizat caz cu caz...

În general, în opinia mea, este mai bine și mai ușor să dezactivezi fișierele CSS separate și să le încorporezi în cele proprii pentru a minimiza problemele și a îmbunătăți performanța (mai puține fișiere de încărcat).

O altă metodă destul de elegantă este utilizarea specificității CSS.

Deci, dacă CSS-ul plugin-ului spune:

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

tu poți defini în CSS-ul tău:

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

Vezi și răspunsul lui Michael Rader pentru o întrebare similară.

Salvez o copie a CSS-ului plugin-ului "not willing" în folderul temei și îl import în CSS-ul temei prin adăugarea

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

în el (înlocuind, desigur, numele fișierului .css cu cel pe care îl injectez). Apoi modific copia CSS în folderul temei și o salvez pe server, așa cum fac pentru celelalte fișiere. Ah, da, uneori poate fi necesar să "fixez" ID-urile sau clasele modificate atribuindu-le un "!important".

Nu știu dacă aceasta este cea mai modernă metodă, dar nu face rău și funcționează perfect.

Am ajuns să folosesc !important pentru CSS-ul meu personalizat și asta a suprascris stilizarea pentru plugin-ul cu care aveam probleme. Dezvoltatorul plugin-ului folosea !important în întregul CSS al plugin-ului și de aceea nu puteam să-l suprascriu fără !important.

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

Pentru a suprascrie CSS-ul unui plugin care folosea deja specificitate și !important, am utilizat ID-uri pentru a suprascrie clasele. Acest lucru mi-a simplificat puțin codul. Desigur, nici această soluție nu este perfectă, deoarece funcționează doar dacă elementele au atât ID-uri cât și clase atribuite.

Teoretic, ai putea folosi și selectori de atribut. Cu toate acestea, încă nu am testat această teorie în practică.

Pentru a suprascrie CSS-ul unui plugin, care deja utiliza specificitate și !important, am folosit ID-ul pentru a suprascrie clasele. Acest lucru mi-a simplificat puțin codul. Desigur, nici aceasta nu este o soluție perfectă, deoarece funcționează doar dacă există ID-uri atribuite elementelor, pe lângă clase.

Teoretic, ai putea folosi și selectoarele de atribute. Totuși, încă nu am testat această teorie în practică.