4½ способа реализации стилей темы в (S)CSS [Перевод]

CSS
4½ способа реализации стилей темы в (S)CSS [Перевод]

Оригинальные слайды:4½ Methods for Theming in (S)CSS; Автор: Гарри Робертс

PM сказал реализовать функцию настройки темы одним щелчком мыши, как технологию, какие методы реализации вы можете придумать?

1. Что такое темы?

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

Ниже приведена функция стиля темы: пользователи могут выбрать свой любимый цвет темы справа, чтобы получить «персонализированную» страницу.

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

В приведенном выше обсуждении, помимо «темы», мы ввели понятие — персонализация. Часто, когда мы говорим о темах, также используется термин: персонализированные темы. У этих двух есть два соответствующих слова в английском языке: Theming и Customization.

Когда мы говорим о темах и настройке, во многих случаях между ними нет различий. Но на самом деле между ними есть некоторые тонкие различия.

1.1 Разница между темами и персонализацией

Когда мы говорим о темах и настройке, все же есть некоторые тонкие различия.

Тема: Определено разработчиком

В основном в:

  • Вход в систему определяется разработчиком
  • обычно имеют ограниченное разнообразие
  • Имеет известные правила и константы

Например, некоторые из наших общих приложений предоставляют ночные темы и режимы чтения, которые также относятся к категории Theming.

Персонализация: определяется пользователем

Особенности:

  • Вход в систему осуществляется пользователем
  • вообще безграничные возможности
  • Правила более гибкие, и пользователи могут «делать все, что хотят».

Видно, что «персонализация» на самом деле подчеркивает влияние пользователей на систему.

Часто, когда мы говорим о «теме» и «персонализации», может не быть четкой границы. Из приведенного выше описания также видно, что они находятся на противоположных концах шкалы.Разница в основном заключается в контроле разработчика над правилами и достижимой степени дифференциации.

И мы больше о поиске баланса между двумя точками.

1.2. Предложения по реализации «функции темы»

У нас уже есть предварительное представление о стиле темы. Если вы также столкнулись с соответствующими потребностями стиля темы в продукте, вы можете взглянуть на следующие предложения:

  1. По возможности избегайте этой функции. Потому что часто это может быть просто псевдотребование.
  2. Принцип KISS (Keep It Simple, Stupid!). Максимально уменьшите его сложность.
  3. Старайтесь менять только внешний вид, а не коробочную модель элемента.
  4. Строго контролируйте свои правила и избегайте непредвиденных разногласий.
  5. Используйте это как вишенку на торте для увеличения продаж.

2. Как реализовать «стили темы»

2.1 Метод 1: Тематический слой

Overriding default style with additional CSS.

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

Реализация

Сначала мы вводим основные стилиcomponents.*документ

@import "components.tabs";
@import "components.buttons"

вcomponents.tabsСодержимое файла следующее

.tab {
    margin: 0;
    padding: 0;
    background-color: gray;
}

Затем предположим, что файлы стилей для одной из наших тем хранятся вtheme.*документ:

соответствуетcomponents.tabs,theme.tabsСодержимое файла следующее

.tab {
    background-color: red;
}

Поэтому нам нужно только ввести файл стиля темы

@import "components.tabs";
@import "components.buttons"

@import "theme.tabs";

Таким образом, текущий стиль становится

.tab {
    margin: 0;
    padding: 0;
    /* background-color: gray; */
    background-color: red;
}

преимущество

  • Простота реализации
  • Можно применить тему ко всем элементам

недостаток

  • Слишком много избыточного кода
  • Многие CSS бесполезны и тратят пропускную способность.
  • Разделение файлов стилей на множество файлов более тривиально

2.2. Метод 2: создание тем с сохранением состояния

Styling a UI based on a state or condition.

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

Реализация

По-прежнему аналогично примеру с вкладкой в ​​предыдущем разделе, мы можем изменить (S)CSS части вкладки на следующую форму:

.tab {
    background-color: gray;
    
    .t-red & {
        background-color: red;
    }
    
    .t-blue & {
        background-color: blue;
    }
}

Здесь мы ставим.t-redа также.t-blueВызывается контекстом элемента Tab. Элемент Tab будет отображать разные стили в зависимости от контекста.

Наконец мы даемbodyэлемент плюс этот переключатель

<body class="t-red">
    <ul class="tabs">...</ul>
</body>

В это время цвет вкладки красный.

когда мы будемt-redизменить наt-blue, вкладка изменится на синюю тему.

Кроме того, мы можем создать некоторые классы (S)CSS util (классы инструментов), чтобы специально управлять некоторыми свойствами CSS, чтобы помочь нам лучше управлять темой. Например, мы используем следующее.u-color-currentКласс для управления цветом шрифта в разных темах

.u-color-current {
    .t-red & {
        color: red;
    }
    
    .t-blue & {
        color: blue;
    }
}

Таким образом, когда мы используем его в разных тематических контекстах.u-color-current, вы можете управлять цветом шрифта элемента для отображения различных тем

<body class="t-red">
    <h1 class="page-title u-color-current">...</h1>
</body>

Приведенный выше код будет управлять<h1>Цвет цвета шрифта элемента при использовании красной темы.

преимущество

  • Поместите много тем в один и тот же код
  • Отличная функция для переключения тем
  • Отлично подходит для тематики сайта
  • Можно применить тему ко всем элементам

недостаток

  • Иногда смешивание многих тем в одном и том же фрагменте кода является недостатком.
  • может быть избыточность

2.3. Способ 3: Тематика конфигурации

Invoking a theme based on settings.

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

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

Реализация

Возьмем Sass в качестве примера:

Сначала будет файл конфигурации Sass, напримерsettings.config.scss, определите текущее значение темы и некоторые другие переменные в этой конфигурации

$theme: red;

Затем для компонента Tab мы пишем его файл Sass следующим образом.

.tab {
    margin: 0;
    padding: 0;
    
    @if ($theme == red) {
        background-color: red;
    } @else {
        background-color: gray;
    }
}

В это время, после того, как мы введем соответствующий файл конфигурации перед ним

@import "settings.config";
@import "components.tabs";

Компонент Tab будет иметь красную тему.

Конечно, мы также можем поставить нашsettings.config.scssСделайте его более надежным и легким для расширения

$config: (
    theme: red,
    env: dev,
)

// 从$config中获取相应的配置变量
@function config($key) {
    @return map-get($config, $key);
}

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

.tab {
    margin: 0;
    padding: 0;
    
    @if (config(theme) == red) {
        background-color: red;
    } @else {
        background-color: gray;
    }
}

преимущество

  • При посещении веб-сайта передается только необходимый CSS, что экономит пропускную способность.
  • Поместите элементы управления темы в одном месте (как в примере выше).settings.config.scssдокумент)
  • Можно применить тему ко всем элементам

недостаток

  • В Sass будет много логики
  • Поддерживает только ограниченное количество тем
  • Информация, связанная с темой, распространяется по кодовой базе.
  • Добавление новой темы может быть очень трудоемким

2.4 Метод 4: Тематические палитры

Holding entire themes in a palette file.

Этот метод чем-то похож на то, когда мы рисуем, предварительно устанавливаем палитру (палитру), а затем используем из нее тот же цвет.

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

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

Реализация

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

Например, сейчас у нас естьsettings.palette.red.scssдокумент

$color: red;
$color-tabs-background: $color-red;

тогда нашcomponents.tabs.scssСодержимое файла следующее

.tabs {
    margin: 0;
    padding: 0;
    backgroung-color: $color-tabs-background;
}

На данный момент нам нужно только импортировать эти два файла

@import "settings.palette.red";
@import "components.tabs";

можно увидеть,components.tabs.scssНет никакого логического суждения о теме, нам нужно только сосредоточиться на редактировании стиля, а остальное - выбрать нужную палитру темы.

преимущество

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

недостаток

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

2.5. Метод 5: Пользовательская настройка

Letting users style their own UIs.

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

«Настройка» чаще всего встречается в продуктах социальных сетей, платформах SaaS или фирменном программном обеспечении.

Реализация

Чтобы выполнить настройку, вы можете комбинировать класс util, упомянутый во втором методе.

Во-первых, элементы страницы для настройки поддержки будут добавлены заранее с помощью класса util, например, элементы Tab.u-user-color-background

<ul class="tabs u-user-color-background">...</ul>

В настоящее время,u-user-color-backgroundСтили еще не определены. И когда пользователь вводит цвет фона, мы создаем<style>label и введите в него шестнадцатеричное значение

<style id="my-custom">
    .u-user-color-background {
        background-color: #00ffff;
    }
</style>

В этот момент пользователь получает красную вкладку.

Twitter использует этот метод для реализации настраиваемых пользователем стилей интерфейса:

преимущество

  • Ввод разработчика не требуется (определяется пользователем)
  • Разрешить пользователям иметь свой собственный «уникальный» сайт
  • очень практично

недостаток

  • Отсутствие необходимости участия разработчика также означает, что вам нужно справляться с более «неконтролируемыми» ситуациями.
  • будет много лишнего
  • Будет тратить пропускную способность CSS
  • Утеряны возможности кэширования браузера для некоторых CSS

3. Как выбрать тариф?

Наконец, поговорим о выборе программы.

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

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

  • Вы или пользователь определяете стиль?Пользователь: выберите [Метод 5] Настройка пользователя.

  • Будет ли переключаться тема в клиенте?Да: выберите [Метод 2] Stateful Theming или [Метод 5] Пользовательская настройка

  • Есть ли тема, которая позволяет пользователям переключаться?Да: выберите [Метод 2] Stateful Theming

  • Вы хотите, чтобы некоторые части вашего веб-сайта отличались?Да: выберите [Метод 2] Stateful Theming

  • Есть ли предустановленные темы для выбора клиентом?Да: выберите [Способ 3] Тема конфигурации

  • Это сцена как "OEM"?Да: выберите [Метод 1] Тематический слой или [Метод 4] Тематические палитры

Категории