Actualmente, utilizo la especificidad de CSS para anular los estilos de complementos. Prefiero esto para editar el complemento, ya que causa menos dolores de cabeza al actualizar.
Sería bueno si mi hoja de estilo se cargara después de los complementos, de modo que solo tengo que ser tan específico, no más. Esto haría que mis hojas de estilo sean mucho más bonitas.
Como sugieres, el enfoque más elegante es cuando tus anulaciones de CSS se cargan después de la CSS inyectada por los complementos. Esto es bastante fácil de lograr, solo debes asegurarte de que tu header.php llama a wp_head() antes de que haga referencia a tu hoja de estilo:
<head>
<!-- all the usual preamble stuff goes here -->
<?php wp_head(); ?>
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
</head>
Hay varias formas en que los complementos pueden manejar CSS.
wp_deregister_*
En general, en mi opinión, es mejor y más fácil deshabilitar las hojas de estilo separadas e incorporarlas por su cuenta para minimizar los problemas y mejorar el rendimiento (menos archivos para recuperar).
Guardo una copia del complemento "no deseado" en la carpeta del tema y lo importo al css del tema agregando
@import url('name-of-the-plugin-css.css');
a él (reemplazando, por supuesto, el nombre de .css por el que estoy inyectando). Luego modifico la copia css en la carpeta de temas y la guardo en el servidor como lo hago para los otros archivos. Oh, sí, a veces puede ser necesario "clavar" los ID o las clases modificadas asignándoles un "! Important".
No sé si esto es lo último en tecnología, pero no hace daño y funciona bien.
Otra forma bastante elegante es usar la especificidad de CSS.
Entonces, si el css del complemento dice:
div.product div.images img {
......
}
usted define en su css:
body div.product div.images img {
......
}
Consulte también la respuesta de Michael Rader para una pregunta similar.
Para anular el css del complemento, que ya estaba usando especificidad y! importante, usé el ID para anular las clases. Esto limpió un poco mi código. Por supuesto, tampoco es una solución perfecta, ya que solo funciona cuando se asignan identificadores a elementos y clases.
También puedes usar selectores de atributos en teoría. Sin embargo, todavía tengo que poner esa teoría a prueba.
Terminé usando! important para mi css personalizado y eso anula el estilo del complemento con el que estaba teniendo problemas. El desarrollador del plugin estaba usando! Important en todo el css del plugin y es por eso que no podría sobrescribirlo sin! Important.
body {
font-family: "Open Sans", Arial, sans-serif !important;
font-weight: 300 !important;
}
Para anular el css del complemento, que ya estaba usando especificidad y! importante, usé el ID para anular las clases. Esto limpió un poco mi código. Por supuesto, tampoco es una solución perfecta, ya que solo funciona cuando se asignan identificadores a elementos y clases.
También puedes usar selectores de atributos en teoría. Sin embargo, todavía tengo que poner esa teoría a prueba.