Theme Rules

8.Theme Rules

# Темы
Темы не часто используются в проекте, из-за этого они не входят в основные типы. В некоторых проектах может быть необходимость в них, как мы делали  при работе в Yahoo! Mail.


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


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



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


<div class="exm" >
    <p class="exm-caption" >Module Theming</p>
<pre><code>// in module-name.css
.mod {
    border: 1px solid;
}
// in theme.css
.mod {
    border-color: blue;
}</code></pre>
    </div>


Темы могут иметь имена классов, которые четко указывают, какие стили являются частью темы, а какие нет. Достаточно иметь отдельный файл темы, этого будет достаточно.


В Yahoo! Mail, чтобы поддерживать порядок во всех наших темах, у нас используется более 50, мы применяем шаблонизатор Mustache для построения нашего CSS, что позволяет нам указывать количество цветовых значений, фоновые изображения и создать окончательный CSS файл для продакшена.


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


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


Как в файлах тем, там может не быть фактически необходимым определение классов шрифтов (например, f-large). Ваш сайт должен иметь только от 3 до 6 различных размеров шрифта. Если у вас есть более 6 размеров шрифта, объявленные в вашем проекте, ваши пользователи вероятно это не заметят и ваш сайт будет труднее поддерживать.