Magento 2 - Anular CSS sin usar! Importante en todas partes

Estoy trabajando en un sitio de Magento 2 en este momento para un cliente. Supongamos que la marca de mi cliente es boofary el tema que estoy tratando de extender / anular es foobarque he establecido como tema principal usandofrontend/Foobarthemes/boofar/theme.xml

<theme xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Config/etc/theme.xsd">
<title>Boofar</title>
<parent>Foobarthemes/foobar1</parent>
<media>
    <preview_image>media/preview.jpg</preview_image>
</media>

Luego, debajo frontend/Foobarthemes/boofar/web/css/source/_theme.less, he escrito el código CSS que quiero anular. También he intentado esto con _extend.less.

.magicmenu {
  .home {
    display: none !important;
  }
  .nav-desktop .level0 .level-top > span {
    font-size: 12px;
    font-weight: normal;
    text-transformation: none;
  }
}

Me veo obligado a usar !importantcualquier cosa para trabajar aquí. Ninguna de las fuentes y texto funciona en el código anterior.

¿No he entendido correctamente el flujo de trabajo de la interfaz de Magento 2?

Solo desea tener sus estilos en el _theme.lessarchivo si desea anular el _theme.lessarchivo del tema principal . Para ese archivo, solo se carga uno de ellos, y siempre será el tema seleccionado si el archivo existe allí. A partir de ahí, usará el esquema de reserva para encontrar ese archivo y usarlo.

Entonces, en su caso, usar el _extend.lessarchivo es el archivo correcto para usar.

Sin embargo, esto es un poco confuso, ya que el código que se coloca en el _extend.lessarchivo se carga en último lugar cuando Magento compila todos los estilos que existen en el sitio. Así que me pregunto si hay algún problema con el orden de carga.

Revisando la forma en que lo configuró, intente configurar su tema en un espacio de nombres diferente y no en el mismo tema. Esto podría no resolver el problema, ya que la forma en que configura su tema es la misma que Magento tiene configurado el tema luma / blank. Pero por todo el trabajo que he hecho, tengo mi espacio de nombres de vendedor que luego se extenderá desde un tema de terceros o desde luma / blank.

Lo siguiente que debe intentar sería envolver su código en las consultas multimedia integradas. Entro aquí con más detalle , pero básicamente evita que sus estilos se carguen dos veces en styles-l.csslos styles-m.cssarchivos.

//
//    Common
//--------------------------------------
& when (@media-common = true) {}  

A partir de ahí, todo se reduce a la especificidad CSS. Si hay algo más que es más alto que el tuyo, debes ser más específico en tu definición de clase / id en los estilos. Es posible que desee publicar una imagen de la estructura DOM para mostrar lo que está apuntando y lo que está por encima de lo que está buscando apuntar.

Si puede aplicar sus estilos en el archivo _extend.less, esto significa que tiene problemas con la especificidad de CSS. Como Magento2 usa menos compilación, la mayoría de los estilos son muy específicos. Para anularlos, los selectores de estilos deben ser más o igualmente específicos. No publicaré detalles del concepto en sí mismo ya que se pueden encontrar muchos artículos en línea.

Si está utilizando la configuración MENOS predeterminada, asegúrese de que TODOS sus MENOS estén escritos dentro de las consultas multimedia M2 MENOS. Si no lo hace, terminará con CSS duplicado y probablemente problemas de especificidad.

Todo esto se reduce a la especificidad y al orden de carga, su CSS debe cargarse después de los temas principales (o módulos), por lo que para anular esto, todo lo que necesita hacer es cumplir con su especificidad.

Por ejemplo, si el tema principal usa

.parent-selector .selector {
    ...
}

Entonces necesitaría escribir el mismo selector, si por alguna razón eso no funciona, solo necesita agregar otro selector antes. Una manera fácil es agregar un cuerpo antes, ya que cubre cada selector y agrega especificidad. Al igual que:

body .parent-selector .selector {
    ...
}

Este artículo contiene buena información sobre la especificidad de CSS.

Alternativamente, puede sobrescribir todo el archivo

Si está haciendo muchas personalizaciones, es mejor sobrescribir todo el archivo en lugar de extenderlo. Para hacer esto, simplemente agregue el archivo a su tema usando la misma ruta y nombre de archivo.

Para mayor prioridad puede duplicar el selector:

  .home.home {
    display: none;
  }

Debe anular el mismo .lessarchivo del tema principal que desea anular, como si desea anular el _theme.lessarchivo, entonces debe copiar este archivo al tema secundario aquí (asegúrese de la misma ruta del tema principal)

frontend/Foobarthemes/boofar/web/css/source/_theme.less

Puedes anular tu CSS aquí.

Inyectar sus archivos CSS personalizados es mejor.

Leer más: Cómo agregar un archivo CSS personalizado en Magento 2

Y Mage Docs: http://devdocs.magento.com/guides/v2.1/frontend-dev-guide/css-topics/css-overview.html

Recuerde compilar usando grunt / less para procesar el css: http://devdocs.magento.com/guides/v2.0/frontend-dev-guide/css-topics/css_debug.html