.NET - Как создавать темы для больших файлов CSS

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

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

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

Оптимально, я хотел бы иметь один файл CSS (для обслуживания) и иметь возможность изменять только атрибуты цвета.

Какие варианты здесь?

10.12.2008 20:21:34
6 ОТВЕТОВ
РЕШЕНИЕ

Вам нужно только скопировать атрибуты цвета, так что если у вас есть

a:hover
{
   text-decoration:none;
   color:Black;
   display:block    
}

в вашем файле CSS в вашей теме вам нужно только:

a:hover
{
    color:Red;
}

Теперь на вашей странице вы хотите убедиться, что вы все еще ссылаетесь на оригинальный файл CSS, и браузер объединит все стили.

4
10.12.2008 20:26:12

Если различия незначительны, возможный подход будет каскадными правилами 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 }
1
10.12.2008 20:30:49
Как вы сказали, это хорошо для незначительных различий, которые, к сожалению, не в данном случае
LeJeune 10.12.2008 20:36:19

Я думаю, что сохранение одного CSS-файла может быть плохой идеей, тем более что цель тем - иметь несколько. Я предлагаю использовать два CSS-файла: базовый (тот, который вы уже используете) и текущую тему, которая включается / link'd после базового и переопределяет то, что вы хотите, отличается от базовой.

1
10.12.2008 20:33:44

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

Итак, что вы хотите сделать для тем - это определить несколько цветов в отдельном файле 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, потому что мы не настроили для него «ловушку». Но вы могли бы изменить этот уродливый оранжевый цвет, который они используют здесь по всей доске, с помощью одного простого редактирования.

0
10.12.2008 22:13:31

Как и TravisO, я бы предложил использовать два CSS-файла ... но я бы не использовал базовый файл, который вы уже используете. Я бы извлек все данные о цветах из вашей базы и добавил бы их в новую тему «по умолчанию».

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

1
10.12.2008 20:40:38

Я собираюсь пойти с идеей TravisO в этом.

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

0
10.12.2008 22:45:06