Frontender Magazine

Создание руководства по стилю

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

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

Что такое руководство по стилю

C моей точки зрения, руководство по стилю — это «живой» документ, который определяет все элементы и модули сайта или приложения. Помимо консолидации кода, оно ещё и документирует визуальный язык, например, стили заголовков или цветовую гамму, используемые при создании сайта. Таким образом, это справочник для всей команды — от владельца до дизайнеров и разработчиков, для обсуждения вносимых изменений и итераций создания продукта. Некоторые компании даже выкладывают свои руководства по стилю онлайн; наиболее известная — Starbucks, но она далеко не единственная.

Скриншот

Руководство по стилю Starbucks

(Надо, однако, заметить, что то, что я называю руководством по стилю, некоторые люди называют библиотекой шаблонов. Большинство использует термин, руководство по стилю, но термин библиотека шаблонов также набирает популярность.)

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

Почему стоит пользоваться руководством по стилю?

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

Скриншот

Представьте, что создание страницы начинается c таким руководством, как у South Tees Hospital. Блок для сбора пожертвований можно было бы сделать за считанные секунды.

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

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

Скриншот

Yelp ясно показывает как можно использовать кнопки и поддерживает их стиль единообразным по всему сайту.

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

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

Шаги создания своего руководства по стилю

Далее я разберу процесс создания руководства по стилю, опираясь на пару моих первых недель в Editorially. (Потому что когда я работаю в проекте без такого руководства, я начинаю испытывать болезненное желание его сделать — спросите любого из моих коллег).

Собираем основу сайта

Начинать создание руководства стоит с основ. Фундаментальные элементы проекта могут включать, например, цветовую гамму, сетку, стили заголовков и основного текста: все, что кажется базовыми элементами. Для Editorially основной частью руководства была палитра, так что именно с неё я и начал. Я создал HTML документ с разметкой и добавил стили приложения, чтобы любые изменения в CSS автоматически отразились на руководстве.

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

Скриншот

Добавляем более сложные паттерны

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

Например, для кнопки в руководстве по стилю Editorially я просто добавил <label for="btn" class="btn" href="#">.btn <input type="submit" name="btn" value=".btn" /></label>. И, так как в руководстве используется тот же CSS, что и в приложении, стиль .btn отображается корректно. И стоит нам его изменить, как отображение в руководстве тоже изменится.

Проанализируйте сайт и добавьте те паттерны, которые сочтете нужными. В вашем проекте определенные раскладки используются снова и снова, повторяются блоки медиа-элементов или паттерн вертикального списка. Ниже еще один пример из руководства South Tees Hospital: паттерн, который они назвали выделенным блоком. Поищите похожие на своем сайте и добавьте их в руководство.

Скриншот

Самое время спросить команду, что ещё было бы полезно поместить в руководство по стилю. Покажите им руководство, и они, надеюсь, помогут добавить все паттерны и модули, которые в нем нужны. Не забудьте, что вся команда должна участвовать, ведь это справочник для каждого участника команды.

Сделайте документацию интерактивной

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

Скриншот

Упростите поддержку

Если вам приходится делать дополнительную работу для обновления руководства по стилю, когда вы вносите изменения на сайте, то вероятность того, что оно будет поддерживаться в актуальном состоянии, исчезающе мала. Я уже говорил это несколько раз, но именно поэтому мы подключили к руководству по стилю Editorially тот же CSS, что и к приложению — таким образом нам не приходится обновлять само руководство. Сложно сделать обновление руководства приоритетной задачей, но поддержка его в актуальном состоянии это критически важно. В зависимости от того, как быстро изменяется ваш сайт или приложение, обновление должно стать регулярной задачей, и не важно — еженедельной или ежемесячной. Актуализация руководства по стилю должна стать частью рабочего процесса.

Улучшайте руководство

Когда количество перечисленных в руководстве компонент возрастает, находится масса инструментов, которые помогут сделать его ещё более удобным. Когда я создавал руководство для Editorially, коллега показал мне чудесный инструмент, созданный Filament Group: HTML-рентген — это маленькая JavaScript библиотека для построения документации. HTML-рентген выбирает стилизированные объекты на страничке и добавляет после них хорошо форматированные блоки кода, что избавит вас от необходимости писать этот код самостоятельно. Кроме того, вы можете использовать prism.js для подсветки синтаксиса, что улучшает читабельность кода.

Скриншот

Если вы заинтересованы в автоматизации, существуют инструменты, которые ещё более упростят создание руководства. Например, вот два из них: KSS и Hologram. Оба инструмента используют комментарии или YAML внутри таблиц стилей вместе с чем-то вроде Ruby для автоматической генерации руководства. Потребуется добавить в таблицы стилей комментарии или YAML, но вы сэкономите время в дальней перспективе, а такой подход очень, очень упрощает поддержку. К тому же A List Apart выложил свою библиотеку паттернов на GitHub и посвятил ей пост в блоге, показывая ещё один способ создания руководства по стилю. Ваши возможности намного шире, чем те, что я описал здесь; осмотритесь, чтобы найти то, что будет наиболее полезно для вас и вашей команды.

Использование руководства

Фух. Вы все сделали и написали руководство по стилю, что теперь? Как убедить кого-то его использовать? В первую очередь — рассказать о нем. Если в команду приходит новичок, ознакомьте его с руководством как с инструментом, который поможет ему сориентироваться при разработке сайта, ведь оно может так много рассказать и о представлении, и о коде, который его реализует.

Пока вы анализируете сайт или приложение, руководство никогда не будет по-настоящему закончено. Но создать какую-то документацию заранее, показать команде и получить от неё отзывы может быть весьма полезно. Привлекая всю команду к созданию руководства, вы делаете этот процесс более командным, благодаря этому каждый станет вкладывать что-то в его поддержку и начнет пользоваться руководством на регулярной основе.

Мы выложили руководство Editorially в публичный репозиторий на GitHub и сделали его доступным онлайн. В момент публикации оно находилось на ранней стадии разработки и представляло собой результат работы всей команды, так что там была масса заметок, паттернов и бардака. Причина его выложить — желание показать, что руководство по стилю не должно выглядеть идеально. Несмотря на бардак, все это оказалось чрезвычайно полезно для меня и моей команды, когда мы продолжили разработку приложения.

Ну что, убедил? Хотели бы руководство по стилю для своего сайта или приложения? Это стоит усилий: выделите время, соберите команду и начинайте — вознаграждением послужит документ, который ускорит процесс обсуждения и разработки.

Логотип компании «Одноклассники»

Статья переведена благодаря спонсорской поддержке компании «Одноклассники».

Если вы заметили ошибку, вы всегда можете отредактировать статью, создать issue или просто написать об этом Антону Немцеву в skype ravencry.

Susan Robertson
Антон Немцев
Переводчик:
Антон Немцев
Сaйт:
http://frontender.info/
Twitter:
@silentimp
GitHub:
SilentImp
Skype:
ravencry

Комментарии (1 комментарий, если быть точным)

Автар пользователя
korsun

Несколько лет назад я работал К тому моменту, как я подключился к проекту

Автор: Susan Robertson