mildfuzz
  • 0
Мастер

Лучший способ переопределить CSS плагина?

  • 0

В настоящее время я использую специфику CSS для переопределения стилей плагинов. Я предпочитаю это для редактирования плагина, так как это избавляет от головной боли при обновлении.

Было бы неплохо, если бы моя таблица стилей загружалась после плагинов, так что я должен быть только конкретным, не более того. Это сделало бы мои таблицы стилей намного красивее.

Share
  1. голосую за то, что научил меня специфичности CSS, никогда не слышал об этом до твоего вопроса, и это мне очень помогло!

    • 0
  2. Как вы предполагаете, самый элегантный подход — это когда ваши переопределения CSS загружаются после CSS, введенного плагинами. Этого довольно легко добиться — вам просто нужно убедиться, что ваши header.php вызовы wp_head() до того, как они ссылаются на вашу таблицу стилей:

    <head>
        <!-- all the usual preamble stuff goes here -->
    
        <?php wp_head(); ?>
    
        <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
    </head>
    
    • 0
  3. Плагины могут обрабатывать CSS несколькими способами.

    • в лучшем случае: плагин ставит CSS в очередь и предоставляет возможность отключить его (отключите его, скопируйте код CSS в свою таблицу стилей и будьте счастливы);
    • хороший случай: плагины перехватывают функцию, которая ставит стиль в очередь (отцепите функцию, при необходимости подключите свою собственную с помощью модов);
    • обычный случай: плагин ставит CSS в очередь напрямую. См. Как удалить скрипт из очереди? (относится и к стилям). Краткая версия — в будущем выпуске WP будет функция удаления из очереди, на данный момент можно обойтиwp_deregister_*
    • плохой случай: плагин повторяет CSS среди множества других вещей. От случая к случаю…

    В целом, на мой взгляд, лучше и проще отключить отдельные таблицы стилей и включить их в свои собственные, чтобы свести к минимуму проблемы и повысить производительность (меньше файлов для выборки).

    • 0
  4. Еще один довольно элегантный способ — использовать специфику CSS.

    Итак, если css плагина говорит:

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

    вы определяете в своем css:

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

    Также см. ответ Майкла Рейдера на аналогичный вопрос.

    • 0
  5. Я сохраняю копию CSS-плагина «не желают» в папку темы и импортирую ее в css темы, добавляя

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

    к нему (заменив, конечно, имя.css на то, которое я ввожу). Затем я изменяю копию css в папке темы и сохраняю ее на сервере, как и для других файлов. О, да, иногда может быть необходимо «прибить» измененные идентификаторы или классы, назначив им «!важно».

    Я не знаю, является ли это современным, но это не вредит и работает просто отлично.

    • 0
  6. В итоге я использовал !important для своего пользовательского css и переопределял стиль для плагина, с которым у меня возникли проблемы. Разработчик плагина использовал !important во всем плагине css, поэтому я не мог перезаписать его без !important.

    body {
    font-family: "Open Sans", Arial, sans-serif !important;
    font-weight: 300 !important;    
    }
    
    • 0
  7. Чтобы переопределить css плагина, который уже использовал специфичность и !important, я использовал идентификатор для переопределения классов. Это немного очистило мой код. Конечно, это тоже не идеальное решение, поскольку оно работает только тогда, когда идентификаторы назначены элементам, а также классам.

    Теоретически вы также можете использовать селекторы атрибутов. Однако мне еще предстоит проверить эту теорию.

    • 0
  8. Чтобы переопределить css плагина, который уже использовал специфичность и !important, я использовал идентификатор для переопределения классов. Это немного очистило мой код. Конечно, это тоже не идеальное решение, поскольку оно работает только тогда, когда идентификаторы назначены элементам, а также классам.

    Теоретически вы также можете использовать селекторы атрибутов. Однако мне еще предстоит проверить эту теорию.

    • 0

Оставить ответ

You must login to add an answer.