Если вы еще не читали мою статью о CSS-файлах blacklabel , сейчас самое время. В этой статье будет предложено улучшение работы с этими типами таблиц стилей, поэтому, если вы не знаете, о чем они, все это будет довольно бесполезно. В этой статье я объясню проблемы с первоначальной концепцией и как мы можем обойти эти проблемы. Время для магии.
Проблемы с черной меткой
Если вы хорошо помните, целью Blacklabel CSS является создание дизайна без последних штрихов, чтобы можно было легко создавать и поддерживать производные проекты. Цвета, стили шрифта, границы и тому подобное были изгнаны в определенный файл CSS для каждого производного дизайна. Поля, плавающие и все другие структурные декларации CSS были помещены в файл CSS Blacklabel.
Я не думаю, что многие из вас уже имели удовольствие попробовать этот метод, но я сразу же начал его. После хорошего рабочего дня я пришел к выводу, что есть еще некоторые проблемы, которые необходимо решить. Хотя я надеялся, что конкретный файл css станет обзором «вещей, которые нужно изменить, чтобы создать производный дизайн» , он наполнился объявлениями фонового изображения, полностью испортив мою приятную и теоретическую концепцию.
Теперь, если вы помните мою первоначальную концепцию, фоновые изображения принадлежат конкретной таблице стилей. Тем не менее, с настройкой, которую я использовал, объявления изображений для каждой производной были точно такими же. Они ссылались на один и тот же относительный путь, но поскольку каждый конкретный файл CSS находился в отдельном физическом месте, они ссылались на другой файл. Помещение этих объявлений в конкретный CSS противоречит идее, что эти файлы CSS будут содержать только элементы, которые необходимо адаптировать для каждой производной.
Время для некоторого анализа
Проблема была на самом деле довольно ясна. Декларации фонового изображения принадлежали классу blacklabel, мне просто нужно было найти хороший способ, чтобы они ссылались на правильное изображение. Конечно, это работает только тогда, когда объявление фонового изображения идентично для каждой конкретной таблицы стилей.
В действительности это означает одну папку для вашего дизайна с черной меткой и одну отдельную папку для каждого производного дизайна. Все папки должны иметь одинаковую структуру, содержащую папку с одинаковыми именами и содержащие изображения с одинаковыми именами. Если вы настроите его так, вы увидите, что объявления фонового изображения станут идентичными для каждой конкретной таблицы стилей, что позволит отправить все эти объявления в blacklabel css.
Это только оставляет нам проблему получения правильного файла. Немного поинтересовавшись, я нашел два возможных решения, оба из которых оказались полезными. Оба решения требуют от вас некоторой настройки сервера, поэтому, если вы просто простой парень по html / css, как я, вам, вероятно, следует обратиться за дополнительными рекомендациями.
Создание псевдонима в вашем веб-сервере
Псевдоним сопоставим с ярлыком, только умнее. В то время как ярлык ссылается только на файл где-то еще в файловой системе, псевдоним делает вид, что файл фактически находится в расположении псевдонима. Это означает, что все относительные пути будут применены из местоположения псевдонима, а не исходного файла. Это не то, что мы ищем.
quote пример: Alias / image / ftp / pub / image — запрос http: //myserver/image/foo.gif заставил бы сервер вернуть файл /ftp/pub/image/foo.gif. unquote
Предоставляя псевдоним для blacklabel css в каждой производной папке, мы можем добавить объявления фонового изображения в файл blacklabel css, продолжая ссылаться на папку image производного проекта. Опухать!
Больше информации об псевдонимах доступно на apache.org .
Файл .htaccess
Решение с псевдонимом хорошо, но требует, чтобы вы создали один псевдоним для каждого производного проекта. Не всегда самое чистое решение, особенно когда производятся новые производные (что усложняет обслуживание). Еще один способ исправить ситуацию — сделать очень похожую вещь, но теперь использовать файлы .htaccess. Вместо того, чтобы создавать один псевдоним для каждой производной, мы собираем вместе одно правило переписывания, которое исправит его для всех.
RewriteRule ^(.*)style-admin/onderhond.css$ /style/onderhond.css
Приведенное выше правило я буду использовать в последней версии моего блога. Он перенаправляет файл onderhond.css в папке style-admin на файл в папке style. Если вы посмотрите на саму структуру каталогов, вы не найдете файл onderhond.css в папке style-admin, хотя css будет вести себя так, как на самом деле.
Дополнительную информацию о файлах .htaccess и перезаписи можно найти на сайте askapache.org .
Вывод
Оба вышеупомянутых решения предназначены для веб-серверов Apache, но аналогичные решения можно найти и для других веб-серверов. Я не вдавался в подробности о реальных решениях, так как мне просто не хватает знаний, чтобы объяснить их в мельчайших деталях, но эта статья должна дать вам достаточно информации, чтобы начать подстраивать себя (или задавать вопросы окружающим, которые знают об этом). Такие вещи).
В любом случае, используя этот трюк, вы можете разгрузить все объявления фонового изображения в css черной метки, чтобы они больше не загромождали ваши конкретные css-файлы. Это делает их намного проще в адаптации и намного приятнее в обслуживании. Единственным ограничением является то, что вы сохраняете одинаковую структуру папок для каждой производной, но это должно быть довольно легко сделать.
Я применяю эту технику пару раз, и результат довольно интересный. Мой бэк-офис таким образом был полностью рестайлинг и получил полностью инвертированный цвет, просто изменив какое-то цветовое выражение в конкретном CSS.
Отзывы о Blacklabel CSS и о том, как улучшить ее, приветствуются!