.NET - Как создавать темы для больших файлов CSS
Я отвечаю за обеспечение функциональности темы для сайта с использованием большого файла CSS (тысячи элементов), который я только что унаследовал. По сути, мы хотим позволить пользователю изменять цвета на экране.
Каждый элемент CSS, помимо определения цвета, также имеет множество других атрибутов - размер, шрифт, число с плавающей запятой и т. д. Также определенный цвет появляется в различных элементах CSS.
Если я использую функциональные возможности ASP.NET для создания отдельного файла CSS для каждой темы, мне придется дублировать свой файл CSS во всех темах, и это становится кошмаром обслуживания.
Оптимально я хотел бы иметь один файл CSS (для обслуживания) и иметь возможность изменять только атрибуты цвета.
Какие здесь варианты?
Ответы 6
Вам нужно только продублировать атрибуты цвета, поэтому, если у вас есть
a:hover
{
text-decoration:none;
color:Black;
display:block
}
в вашем файле css в вашей теме вам нужно только:
a:hover
{
color:Red;
}
Теперь на своей странице вы хотите убедиться, что вы по-прежнему ссылаетесь на исходный файл css, и браузер объединит все стили.
Если различия незначительны, возможный подход - это правила каскада CSS, например:
html:
<body class = "dark">
<a ...>some text</a>
</body>
css:
/* default */
body { color:white }
a { color:blue }
/* dark theme */
body.dark { color:black }
.dark a { color:white }
Я думаю, что сохранение одного файла CSS может быть плохой идеей, тем более, что цель тем - иметь несколько. Я предлагаю использовать два файла CSS: базовый (который вы уже используете) и текущую тему, которые включаются / связываются после базовой и заменяют то, что вы хотите отличать от базовой.
Помните: элементы могут иметь несколько классов стилей. Поскольку макет остается статическим и будет отделен от раскраски, вы хотите определить классы для макета и цвета отдельно, в совершенно разных файлах.
Итак, что вы хотите сделать для тем, это определить несколько цветов в отдельном файле css, например:
.DefaultBackgroundColor { background-color: white; }
.PrimaryColor { background-color: #123456; }
.PrimaryAsForeground { color: #123456; }
.AccentColor { background-color: #654321; }
.AccentAsForeground { color: #654321; }
.ComplementColor { background-color: #333333; }
.ComplementAsForeground { color: #333333; }
.DefaultTextColor { color:black; }
.HighlightTextColor { color:black; font-style:bold; }
.ComplementTextColor { color:white; }
Вы можете добавить больше цветов, но идею вы поняли. Затем в HTML вы добавляете эти классы к элементам в дополнение к классам макета. Например, используя эти классы, вы можете стилизовать кнопки навигации для StackOverflow следующим образом:
<div class = "nav ComplementTextColor">
<ul class = "primarynav">
<li class = "PrimaryColor"><a href = "/questions">Questions</a></li> <!-- selected -->
<li class = "ComplementColor"><a href = "/tags">Tags</a></li>
<li class = "ComplementColor"><a href = "/users">Users</a></li>
<li class = "ComplementColor"><a href = "/badges">Badges</a></li>
<li class = "ComplementColor"><a href = "/unanswered">Unanswered</a></li>
</ul>
</div>
Очевидно, что эти цвета придуманы и не будут работать вместе, но в этом вся прелесть этой настройки. Это позволяет легко играть и настраивать цвета, поскольку вам не нужно определять один и тот же цвет повсюду. Вы настраиваете его один раз, а затем нужно внести очень небольшое количество изменений, чтобы полностью перекрасить сайт.
Обратной стороной является то, что вы ограничены. Например, используя опубликованный мною html, вы не могли бы тогда пойти и сделать кнопки здесь другого цвета, чем все остальное, просто изменив файл css, потому что мы не настроили для него «крючок». Но вы можете изменить этот уродливый оранжевый цвет, который они используют здесь повсюду, с помощью одного простого редактирования.
Как и TravisO, я бы предложил использовать два файла CSS ... но я бы не хотел, чтобы базовый был тем, что вы уже используете. Я бы извлек все данные о цвете из вашей базовой и добавил их в новую тему «по умолчанию».
Таким образом, все ваши данные о расположении будут в одном месте, а ваши темы будут содержать только информацию о цвете. Экономит время браузера от загрузки и интерпретации цветов по умолчанию в дополнение к цветам темы.
Я собираюсь согласиться с идеей TravisO по этому поводу.
В этом случае использование одного файла фактически приведет к большим накладным расходам на обслуживание, чем создание отдельных файлов css. Что вам нужно, так это файл для базового css в некотором месте, который применяется ко всем темам (обычно для меня папка root / styles), а затем файл в каждой теме для информации о цвете (или любой другой css для конкретной темы).
Как вы сказали - это хорошо для незначительных отличий, что, к сожалению, не так.