Что такое эффективный способ работы с несколькими таблицами стилей CSS?

Question

Существуют разные сайты, имеющие практически одинаковый макет, но разные стили. Хорошим примером будет рассмотрение всех сайтов в сети stackexchange. Все они имеют похожую планировку, но разный внешний вид.

Рассмотрим 5 сайтов и для каждого сайта, если нам нужно поддерживать от 3 до 4 таблиц стилей для разных браузеров, то есть почти 20 различных таблиц стилей, которыми мы должны управлять. С этим трудно справиться, особенно если мы пытаемся воспроизвести похожий сайт с другим внешним видом.

Так есть ли способ, которым мы можем отслеживать таблицы стилей (например, хранение в базе данных?), И мы можем динамически добавлять их?

Или как эффективно обрабатывать различные таблицы стилей для растущего числа веб-сайтов?

Я смотрел на источник office.com, там был тупой URL, тянущий таблицу стилей, и я верю, что у нее тоже есть номер версии. Они хранят таблицы стилей в центральном хранилище? Если вы просматриваете источник в stackoverflow, вы увидите похожий URL.

Answer 1

Ваш вопрос касается нескольких аспектов, я постараюсь охватить два из них здесь.

Многоразовое использование CSS

Если несколько сайтов используют один и тот же базовый макет, это хорошая идеячтобы они использовали один базовый файл CSS.После этого вы можете внести изменения, специфичные для сайта, в меньших файлах CSS для каждого сайта.

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

Управление версиями

Использование номеров версий в URL-адресах CSS в основном связано с Cache Busting .Часто это выглядит так: style.css? V = 20110326 Обычно вы хотите, чтобы браузер ваших пользователей кэшировал (сохранял) таблицу стилей, поэтому его не нужно перезагружать каждый раз, когда новыйстраница загружена.Но если вы внесете изменения в файл, новая версия должна быть доставлена ​​всем возвращающимся посетителям.Добавляя новую строку другой версии, вы заставляете браузер «думать», что это другой файл, и перезагружаете его.

Строка версии в большинстве случаев автоматически добавляется каким-либо языком сценариев на стороне сервера, например PHP:

<link href="style.css?v=<?php echo $css_version; ?>" rel="stylesheet" type="text/css" />

Сам номер версии (или строка) иногда просто получен из файла mtime (измененная временная метка) или взят из системы контроля версий, такой как Git или Subversion.

Answer 2

Лично я не знаю, как делается хитрость для «запутывания» имен и местоположений файлов. Я предполагаю, что это какой-то сценарий, замаскированный под файл .css, который передает содержимое, указанное в запросе (all.css?v=e1214b61bb44). Веб-серверы могут быть настроены на анализ файлов с расширениями, отличными от php или asp, как обычные файлы php или asp, поэтому я считаю это то, что делается в этом случае.
Что касается таблиц стилей, вы можете установить домен третьего уровня, в котором вы будете хранить любые общие файлы.
После этого вы должны разработать базовый макет в главной таблице стилей, которая будет доступна всем вашим сайтам. Затем вы можете продолжить стилизацию каждого отдельного сайта в отдельной таблице стилей.
В заголовке страницы вы можете связать их так:

<link rel="stylesheet" type="text/css" href="http://common.domain.com/style/basic.css" />
<link rel="stylesheet" type="text/css" href="http://common.domain.com/style/sitespecific.css" />