Задача
На сайте постепенно накопились маленькие приложения. Генераторы, конвертеры, всякие утилитки под одну задачу. Писались в разное время, поэтому у каждого получилось немного своё оформление. Где-то свои отступы, где-то кнопки, где-то очередная попытка нормально разложить форму. Вроде всё простое, а стили снова приходится писать и поправлять.
Хотелось сделать на сайте как можно меньше CSS и привести мини-приложения к единому виду. Чтобы новое приложение можно было написать, вставить на страницу и заниматься его работой, а не снова выяснять, на каком расстоянии должна стоять подпись от поля.
Сначала вполне можно было просто причесать общий файл сайта. Он и так небольшой. Только тогда каждое следующее приложение продолжало бы приносить туда свои поправки. А в другом проекте пришлось бы начать заново или копировать файл вместе с непонятными кусками от этого сайта.
Убрать, перенеся
Как ни странно, лучший способ сделать меньше CSS - вообще убрать его с сайта, перенеся общие стили в отдельную библиотеку. Так появилась ZeroUI.
Конечно, сам CSS от перемещения не исчезает. Но исчезает необходимость писать его для каждой страницы. На сайте остаются тексты, картинки и работа приложения. Общие решения живут отдельно и могут использоваться в других проектах. Если поправить отступы у списков или поведение таблицы, улучшение достанется всем, кто подключил библиотеку.
Необходимые скрипты тоже лежат в библиотеке. Например, обычное раскрытие блока или модальное окно браузер умеет сам. Но чтобы подставить выбранную картинку в окно просмотра или собрать содержание из заголовков, нужен JavaScript. Нет смысла писать его заново для каждого сайта, если решение подходит и другим проектам.
Заодно появляется простая проверка: если правило имеет смысл только на моём сайте, возможно, оно вообще не нужно библиотеке. Если нужно для обычной статьи или формы, то почему оно до сих пор лежит в файле сайта? При переносе пришлось разобрать и такие мелочи, как нумерация разделов, содержание, просмотр картинок и печать. Они тоже постоянно нужны где-нибудь ещё.
Графику пусть рисует система
Не хотелось делать ещё один набор красивых кнопок. Кнопки у нас уже есть. Поля, переключатели, выпадающие списки тоже есть, и браузер умеет их рисовать без моей помощи.
Поэтому ZeroUI занимается в основном типографикой и расположением. Какой ширины будет текст, как заголовок отделяется от предыдущего раздела, как разложить несколько полей, куда денется широкая таблица на телефоне. А графическое оформление элементов управления остаётся системным. Не нужно рисовать поверх обычного переключателя собственный и потом отдельно вспоминать про все его состояния.
С цветами та же идея. Вместо своей палитры используются системные цвета: фон страницы, текст, ссылки, границы. Светлая и тёмная тема берутся из настроек браузера и системы. Не приходится изобретать вторую палитру и добавлять ещё одну кнопку переключения. Шрифты тоже системные, ничего скачивать не нужно.
На разных устройствах результат может отличаться. В этом тоже свой смысл. Важно, чтобы форма была понятной и удобной, а не чтобы на всех компьютерах у неё получилась одинаковая авторская кнопочка.
Сайт как проверка
Для библиотеки сделали отдельную страницу с документацией и живыми примерами. Главное условие: у самой документации не должно быть собственных стилей. Она должна быть первым нормальным применением библиотеки.
Иначе легко сделать красивую витрину, подкрасить её отдельно и обнаружить, что для настоящего приложения опять ничего не хватает. Здесь, если оглавление или форма выглядят плохо, приходится поправлять общее решение. Нельзя дописать чуть-чуть CSS только для демонстрации и считать задачу законченной.
Библиотеку сразу подключил к своему сайту и проверял на настоящих страницах и приложениях. Старый файл стилей постепенно разобрали: то, что нужно не только этому сайту, перенесли в ZeroUI. Так видно, чего действительно не хватает, а что придумано только ради красивого примера.
Например, на статьях нужно содержание с нумерацией, а картинки хочется открывать крупнее. Оглавление и просмотр изображений теперь используют общие стили и скрипт библиотеки. На сайте остаётся сама статья и разметка модального окна, а общую логику не приходится поддерживать отдельно. Печать тоже настраивается библиотекой.
Что дальше
Основные страницы и мини-приложения уже используют общую библиотеку. При этом у некоторых приложений осталось своё оформление: например, в генераторе фигур размеры печатной заготовки являются частью результата. Тут общую типографику и управление можно использовать рядом с особыми стилями самой программы.
При этом не хочется тащить в каждую утилитку вообще всё. Состав библиотеки можно выбрать и собрать в один подключаемый файл. Документация и сборка опубликованы на GitLab Pages, отдельный сервер для них не понадобился.
В результате хочется получить довольно скучную вещь: написал обычную страницу или небольшую программу, и всё уже выглядит нормально. Дальше можно заниматься тем, ради чего программа вообще делалась. Если приходится лезть в CSS, значит работу пока не закончили.