¿La mejor manera de anular el complemento CSS?

36

Actualmente, uso la especificidad CSS para anular los estilos de complementos. Prefiero esto para editar el complemento, ya que hace menos dolores de cabeza cuando actualizas.

Sería bueno que mi hoja de estilo se cargara después de los complementos, de modo que solo tenga que ser tan específico, no más. Esto haría que mis hojas de estilo fueran mucho más bonitas.

plugins css Fuzz suave
fuente
1
¡Voto por enseñarme sobre la especificidad de CSS, nunca había oído hablar de él antes de tu pregunta y me ayudó mucho!
luke_mclachlan

Respuestas:

21

Como sugiere, el enfoque más elegante es cuando las anulaciones de CSS se cargan después de que los complementos inyectan el CSS. Esto es bastante fácil de lograr: solo necesita asegurarse de que sus header.phpllamadas wp_head()antes de que hagan referencia a su 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>
Tim Coulter
fuente
¿Y si uso un tema infantil? No me gusta anular el header.php de mi tema principal.
Jules
19

Hay varias formas en que los complementos pueden manejar CSS.

  • el mejor de los casos: el complemento pone en cola CSS y brinda la opción de deshabilitarlo (deshabilítelo, copie el código CSS en su hoja de estilo y sea feliz);
  • buen caso: los complementos enganchan la función que pone en cola el estilo (desenganche la función, enganche los suyos con modificaciones si es necesario);
  • caso habitual: el complemento pone en cola CSS directamente. Ver ¿Cómo quitar un guión? (se aplica también a los estilos). Versión corta: habrá una función de eliminación de cola en el futuro lanzamiento de WP, por ahora podría solucionarse conwp_deregister_*
  • mal caso: el plugin hace eco de CSS entre muchas otras cosas. Caso por caso...

En general, en mi opinión, es mejor y más fácil deshabilitar hojas de estilo separadas e incorporarlas en las suyas propias para minimizar problemas y mejorar el rendimiento (menos archivos para recuperar).

Rarst
fuente
¿Cómo sabría cuál es?
IanEdington
1
Al mirar el código principalmente. :)
Rarst
2

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 {
  ......
}

También vea la respuesta de Michael Rader para una pregunta similar.

Andreas
fuente
Vale, muchas gracias. Esta sería la respuesta aceptada para mí. ¡Solo usa el estilo general.css y la especificidad funciona como un brillo!
Luca Reghell en
1

Guardo una copia del complemento CSS "no dispuesto" en la carpeta del tema y lo importo al tema CSS agregando

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

(reemplazando, por supuesto, el nombre de .css por el que estoy inyectando). Luego modifico la copia css en la carpeta del tema y la guardo en el servidor como lo hago para los otros archivos. Ah, sí, a veces puede ser necesario "clavar" las identificaciones o clases alteradas asignándoles un "! Importante".

No sé si esto es lo último, pero no hace daño y funciona bien.

Sven Knoch
fuente
0

Para anular el CSS del complemento, que ya estaba usando especificidad e importante, utilicé la identificación para anular las clases. Esto limpió un poco mi código. Por supuesto, tampoco es una solución perfecta, ya que solo funciona cuando hay identificadores asignados a elementos y clases.

También podría usar selectores de atributos en teoría. Sin embargo, todavía tengo que poner a prueba esa teoría.

Sean H. Smith
fuente
0

Terminé usando! Importante para mi CSS personalizado y eso anula el estilo del complemento con el que estaba teniendo problemas. El desarrollador del complemento estaba usando! Important en todo el plugin css y es por eso que no podría sobrescribirlo sin! Important.

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

Para anular el CSS del complemento, que ya estaba usando especificidad e importante, utilicé la identificación para anular las clases. Esto limpió un poco mi código. Por supuesto, tampoco es una solución perfecta, ya que solo funciona cuando hay identificadores asignados a elementos y clases.

También podría usar selectores de atributos en teoría. Sin embargo, todavía tengo que poner a prueba esa teoría.

dsdsd
fuente