Тильда CSS: где писать стили и как перебить типовые

Тильда CSS правлю на клиентских проектах почти каждую неделю: где-то нужно сдвинуть кнопку на несколько пикселей, где-то перекрасить рамку у поля формы, где-то вписать шрифт, которого нет в стандартном наборе блоков. У платформы несколько мест, куда можно вставить код стилей, и почти вся путаница в таких задачах начинается с того, что человек не понимает, какое место перебьёт остальные и почему обычный селектор иногда просто не срабатывает.

Где писать CSS в Тильде: три уровня вложенности

По своему опыту делю все места для CSS на четыре, но по области действия они укладываются в три уровня: один блок, одна страница, весь сайт.

• Блок с HTML-кодом (T123). Внутри него можно вставить обычный тег style, и стиль подключится вместе с этим блоком на конкретной странице, куда вы его поставили.
• Zero Block. У него есть отдельная вкладка с кодом, где помимо разметки можно написать CSS, который применяется только к элементам внутри этого конкретного экземпляра блока и не задевает остальную страницу. Это самый чистый способ добавить точечный стиль, не рискуя сломать что-то в другом месте сайта.
• Настройки страницы, вкладка «Ещё», поле для кода в head. Стиль отсюда действует на все блоки текущей страницы, включая те, что вы добавите позже.
• Настройки сайта, вкладка «Ещё», «Дополнительный код для всех страниц». Это применяется ко всему проекту сразу: шрифты, кнопки, поля форм на любой странице сайта.

Важный нюанс: вставка кода на страницу и в блоки открывается не на бесплатном тарифе Тильды, а начиная с платных. Если в вашем аккаунте нет полей для кода, дело обычно именно в тарифе, а не в том, что функция скрыта где-то ещё.

Стили одного блока и стили всего сайта: где что писать

Правило, которым пользуюсь сам: чем уже область, где нужен стиль, тем ближе к блоку его нужно вписывать. Разовая правка одного экземпляра блока, скажем, увеличить отступ у конкретной картинки на конкретной странице, идёт в CSS самого Zero Block или в T123 рядом с этим блоком. Стиль, который должен повторяться в нескольких блоках одной посадочной страницы, например одинаковые скруглённые кнопки в трёх разных секциях лендинга, логичнее держать в коде страницы: не придётся копировать один и тот же кусок style в каждый блок. А брендовые вещи вроде шрифтов, основного цвета кнопок или стиля полей формы, которые должны выглядеть одинаково на всех страницах сайта, идут в настройки сайта целиком.

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

Почему обычный CSS не перебивает верстку Тильды

Тильда генерирует для каждого блока собственные классы вида t396__title или t‑btn, а для конкретного экземпляра блока на странице ещё и уникальный идентификатор записи вроде rec123456. Когда вы пишете свой CSS одним простым селектором, например .my-button, он часто проигрывает по специфичности родным правилам Тильды, потому что там нередко работает связка из нескольких классов сразу, а не один класс.
Эту же уникальную запись можно сделать читаемой: в настройках блока, во вкладке «Ещё», есть поле с ID блока, которое по умолчанию выглядит как recXXXXXX, но его можно переименовать в человеческое значение вроде hero или pricing. Это же значение станет id обёртки блока в разметке, и опираться на него в CSS удобнее, чем на автосгенерированный номер, который меняется при пересоздании блока.

Как перебить стили Тильды на практике

Порядок действий у меня всегда один и тот же.

1. Открываю страницу в браузере и смотрю через инструменты разработчика, какой именно класс и с каким сочетанием других классов применяет стиль, который нужно перебить.
2. Собираю селектор не проще, а как минимум не хуже по специфичности: беру ID записи блока плюс нужный класс, а не один изолированный класс.
3. Если специфичность совпала, но правило Тильды всё равно выигрывает из-за порядка подключения файлов, добавляю !important точечно, на одно-два свойства, которые реально конфликтуют, а не на весь блок стилей целиком.

Пример: нужно перекрасить кнопку внутри конкретного блока и сделать её со скруглёнными углами, при этом Тильда уже навешивает на кнопку несколько своих классов.

#hero .t-btn {
  background: #1a73e8;
  border-radius: 999px;
  border: none;
}

#hero .t-btn:hover {
  background: #1558b0;
}

Здесь #hero - это переименованный ID блока из настроек, а не автосгенерированный recXXXXXX, поэтому селектор не развалится, если Тильда пересоберёт разметку при следующем сохранении страницы.
Если правок много, а верстка блока каждый раз своя и разбираться в ней вручную дорого по времени, дешевле сразу заказать кастомную доработку сайта на Тильде, чем терять часы на подбор селекторов методом проб и ошибок.

Адаптив: медиа-запросы поверх сетки Тильды

Собственная сетка Тильды переключается на разных ширинах экрана, и в редакторе это видно по кнопкам предпросмотра: у меня на практике брейкпоинты в CSS обычно ложатся рядом с отметками около 1200, 980, 640 и 480 пикселей, то есть примерно там, где сама Тильда меняет раскладку колонок и размер текста. Если писать свои медиа-запросы на случайных значениях вроде 800px, стиль может неожиданно схлопнуться в середине диапазона, где Тильда уже перестроила блок под планшет, а ваш кастомный CSS еще держит десктопные отступы.
Поэтому для мобильной версии стиль обычно дублирую отдельным блоком @media с одним из этих порогов, а не пытаюсь описать всё одним универсальным правилом.

Частые ошибки при кастомизации CSS в Тильде

• Стиль пишут в коде конкретной страницы, а потом клонируют блок на другую страницу или в другой проект и получают неожиданно голую верстку без стилей.
• Глобальный !important вставляют в настройки сайта ради одной кнопки на одной странице, а через месяц он ломает такую же кнопку в другом месте, где нужен был другой цвет.
• CSS для Zero Block пишут не во встроенной CSS-вкладке блока, а в общем коде страницы, из-за чего стиль случайно задевает точно такой же по названию класс в другом Zero Block на той же странице.
• Забывают, что вставка кода в блоки и в настройки страницы доступна не на всех тарифах, и тратят время на поиск несуществующего поля вместо проверки тарифа.

Условия и возможности Тильды меняются, поэтому перед запуском я уточняю их у самого сервиса.

Частые вопросы

Можно ли редактировать CSS в Тильде без тарифа с кодом?

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

Как перебить стиль, который Тильда навешивает через собственный !important?

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

Почему стили пропадают после переноса блока на другую страницу?

Потому что CSS, вписанный в настройки конкретной страницы, работает только на ней. Если блок с таким стилем клонируется на другую страницу или в другой проект, код для этого блока стоит переносить вместе с ним: либо сразу писать его внутри самого блока через T123 или CSS-вкладку Zero Block, либо продублировать нужный кусок в код новой страницы.

Обязательно ли использовать !important, чтобы перебить кнопки и заголовки Тильды?

В большинстве случаев нет. Обычно хватает поднять специфичность своего селектора: добавить ID блока перед классом вместо того, чтобы полагаться на один изолированный класс. !important стоит держать про запас для редких случаев, когда конфликт правда не решается через специфичность.