Дополнение CSS шаблоны

Дополнительные CSS-шаблоны, которые можно изменить без перестройки

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

Что вы на самом деле редактируете

Большая часть работы сводится к небольшому набору значений. Фирменные цвета заменяют палитру шаблона, которая обычно состоит из нескольких шестнадцатеричных значений. Шрифты изменяются в одном или двух объявлениях font-family, а также размерах и межстрочных интервалах. Отступы — это часть, которую многие недооценивают: отступы и поля разделов — это то, что мешает шаблону выглядеть как в демо-версии, и именно здесь накапливаются правки.

Затем идут многократно используемые классы. Шаблон предоставляет вам стили кнопок, стили карточек, стили значков и уровни заголовков. Измените стиль каждого класса один раз, и каждый экземпляр последует за ним. Редактирование одного и того же правила пятнадцать раз или добавление встроенных переопределений к отдельным элементам обычно свидетельствует о том, что кто-то пропустил класс и сразу перешел к элементу.

Макет находится в правилах Grid и Flexbox: количество столбцов, отступы, выравнивание. То же самое относится и к адаптивному поведению, находящемуся внутри медиа-запросов, которые перерисовывают элементы в соответствии с шириной планшетов и телефонов. Измените количество столбцов на настольном компьютере и сразу же проверьте контрольные точки. Именно здесь чаще всего возникают проблемы с изменением стиля.

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

Где место пользовательским правилам

Nicepage сохраняет встроенные элементы управления для стандартного оформления и оставляет пользовательский CSS-код для всего остального. Правила могут применяться к одному элементу, одной странице или всему сайту; В руководстве по пользовательскому CSS (https://nicepage.com/doc/265080/custom-css) объясняются три уровня и принцип их каскадирования. Пользовательские правила предназначены для определенного состояния при наведении курсора, формы, которую стандартные элементы управления не создадут, или для единичного исключения в разделе. Функция «Экспорт минимального CSS для каждой страницы» обрезает вывод каждой страницы до стилей, используемых этой страницей, что стоит включить, когда один большой шаблон используется для множества простых страниц.

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