• Блог
  • Подключаем свои стили

Часто сайты разрабатываются на основе фреймворков, в которых уже есть готовые шаблоны оформления для многих элементов сайта. Самые известные из них это Bootstrap, UI Kit, Semantic UI, MaterializeCSS и другие. Про Bootstrap уж точно все слышали. Но так как хочется придать сайту индивидуальность, возникает необходимость подправить стандартные стили. Для таких целей принято создавать отдельный файл стилей, чтобы вносить изменения в оформление сайта не затрагивая базовый файл стилей. Во-первых, проще контролировать файл с несколькими строчками, чем искать в тысячах строках кода нужный класс. А во-вторых, это поможет избежать проблем с переходом на новую версию фреймворка — заменили базовый файл и ваши изменения не потеряются.

При использовании фреймворка Bootstrap для изменений стилей самого Bootstrap используют обычно файл bootstrap-theme.css, который подключают после основного bootstrap.css. Именно в него вносят правки для стилей этого фреймворка. Но ещё рекомендуют стили, не относящиеся к фреймворку, выносить в отдельный файл. Например, main.css или default.css. В этом файле прописывают собственные стили, определяющие дизайн сайта. Так вот о нём я и хочу сказать пару слов.

Обычно стили подключают в секции head страницы сайта. Выглядеть это может, например, так.

<link rel="stylesheet" href="/assets/inc/css/bootstrap.css" type="text/css" />
<link rel="stylesheet" href="/assets/inc/css/bootstrap-theme.css" type="text/css" />
<link rel="stylesheet" href="/assets/inc/css/main.css" type="text/css" id="site-style" />

Опускаю тот факт, что в целях оптимизации стили нужно минимизирвоать. Речь сейчас не об этом.

В данном случае переопределяемые стили имеют приоритет над базовыми, указанными в bootstrap.css. Но часто на сайт устанавливают различные дополнения, которые самостоятельно подключают файлы стилей и скриптов. У меня это делает Tickets. И эти файлы подключаются уже после нашего главного файла main.css (в котором мы определяем дизайн) и, соответственно, замещают наши стили.

Есть несколько решений данной проблемы.

Изменение стилей дополнения

Хорошее дополнение (а Tickets безусловно является таким) позволяет подключать свои собственные стили вместо стандартных. Для этого нужно сделать копию файла стилей дополнения, внести нужные изменения и в системных настройках указать изменённый файл. Но тут возникает та же проблема, что и с фреймворком — при обновлении дополнения нужно найти новые стили и перенести их в свой файл. Эту проблему можно решить подключением в своём файле через @import файла с базовыми стилями. Т.е. в своём файле подключаем через @import базовый файл стилей и ниже переопределяем нужные стили, которые заместят базовые. Но есть мнение, что @import лучше не использовать.

Указывать !important

Использование инструкции !important повышает приоритет стиля и может решить проблему. Но что если стилей много? Не будешь же для каждого писать !important. Кроме того, это может сломать уже настроенные стили. А еще может возникнуть ситуация, когда у стилей дополнения также указано !important. В общем, тоже не идеальный вариант.

Перенести main.css

Ну и последний вариант, это перенести наш главный файл скриптов в конец секции head, чтобы он был самым последним. Сделать это нужно после полной загрузки страницы, т.е. когда уже все стили подключены. Для этого можно использовать jQuery.

$(document).ready(function($) {
	$("#main-style").detach().appendTo("head");
});

Как видно из кода, мы берем элемент с id="#main-style" и переносим его в конец секции head. А элементом с этим id будет как раз наш файл стилей.

<link id="main-style" rel="stylesheet" href="/assets/inc/css/main.css" type="text/css" />

Но при использовании этого способа может возникнуть небольшая проблема. Так как наш файл стилей переносится после того, как страница уже готова, то пользователь может увидеть эти изменения — изменится цвет текста или размер отступа блогов. Исправить этот эффект можно указав стилям, которые вызывают самое заметное мигание, инструкцию !important. Я использую именно этот способ для изменения стилей Tickets.

Заключение

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

0   9070

Комментарии ()

    Вы должны авторизоваться, чтобы оставлять комментарии.

    Выделите опечатку и нажмите Ctrl + Enter, чтобы отправить сообщение об ошибке.