Строение шаблона. Стили

Стили в каркасе тем состоят из следующих файлов

• template.css - файл-сборщик стилей
• normalize.css - нормализация общих html-элементов
• core.css - файл базовых стилей
• style.css.scss - файл-сборщик scss стилей
• _variables.scss.liquid - список переменных для стилей
• _variables_default.scss - значения базовых переменных каркаса
• _file_name.scss - каркас стилей блоков
• стили сторонних плагинов

normalize.css

Данный файл отвечает за нормализацию вида html-элеметнов в разных браузерах и операционных системах.

Важно

Запрещено использование различных сбросов стилей, отличных от normalize.css.

Это связано с тем, что normalize.css делает отображение html тегов максимально похожим в разных браузерах, применяя к тегам лишь минимально необходимые свойства. При этом не производит глубоких изменений в самих стилей данных тегов.

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

Пример.

В большинстве сбросов стилей применяются такие стили как

ul{
   margin: 0;
   padding: 0
}

Данные стили будут применены ко всем тегам ul, являются глобальными, и произведут неконтролируемые изменения во множестве мест сайта.

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

Все это противоречит самой концепции БЭМ, при которой описание блока должно само содержать все необходимые сбросы стилей характерные только для данного блока.

template.css

Файл-сборщик стилей. содержит список подключаемых файлов стилей.

В данный файл прописываем все подключения стилей, как сторонинх плагинов, так и своих кастомных файлов стилей.

Важно.

Для корректной работы определения стилей все сторонние и кастомные файлы стилей нужно подключать после core.css и до style.css.scss.

core.css

Базовые стили.

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

Важно

Редактировать данный файл ззапрещено.

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

style.css.scss

Содержит список подключаемых для компиляции scss файлов стилей, библиотеки Compas и файлов с необходимыми для конкретной темы переменными scss.

_variables.scss.liquid

Содержит список переменных, необходимые для работы конкретной темы.

Здесь происходит подключение значений из настроек темы в стили конструкцией вида

$var_name: #{'{{ settings.var_name }}'};

Так же в этом файле задаем значения различных переменных бибилиотеки Compas

$default-transition-duration: 0.3s;

Так же в данном файле возможно применение управляющих конструкций liquid.

Пример.

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

Важно

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

_variables_default.scss

Содержит значения переменных по-умолчанию для

• типографики
• z-index уровней различных элементов
• цвета состояний для элементов

Применяются только те переменные, которые Вы не определили в файле _variables.scss.liquid.

Файлы _file_name.scss

Представляют собой каркас стилей конкретного блока file_name.

Являются подсказкой структуры данного блока.

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

Важно

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