«Пора выбрать единый способ оформления кота» — подумали мы с Сашей, когда перестали понимать, что происходит. Мы выпускаем много обучающего материала, и пора привести его в порядок.

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

Стиль кода Академии HTML
Мы собрали репозиторий с нашим кодгайдом и отправили его в публичное плавание.

EditorConfig

Мы используем два пробела для отступов, пустую строку в конце файла и не любим лишние пробелы. Чтобы следить за этими настройками мы используем EditorConfig. Для любого редактора можно поставить расширение, которое будет автоматически менять настройки редактора по нашим правилам, описанным в файле .editorconfig.

Почему мы используем два пробела, а не что-нибудь другое?

Мы готовим код для презентаций, демонстраций, интерактивных заданий. Настроить длину tab не всегда представляется возможным. И если в вебе нас могло спасти свойство tab-size (у которого до сих пор плохая поддержка), то для остального никаких нормальных способов настроить tab нет. Поэтому наш выбор остановился на пробелах.

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

Кодгайд: синтаксис

Читабельность и единообразие

Главное правило, которым мы руководствовались в создании гайда — читабельность и единообразие. Нам не хотелось, чтобы учеников вводили в заблуждение сокращения. Код в первую очередь должен быть читабельным.

Мы не сокращаем значения цвета. Мы не опускаем первый ноль в дробных значениях. Запись -.75 — вгоняет в уныние любого ученика.

О сокращениях мы долго спорили внутри команды, и аргументы защитников сокращений сводились к одному — так быстрее писать. Но я считаю, что если хотите ускорить набор кода, то вам нужно использовать специальные инструменты: Emmet для быстрого набора кода или автодополнение в редакторах. А сокращением должны заниматься роботы. Не отбирайте у них работу, их не для этого создавали.

Кодгайд: синтаксис

Класс — главный атрибут

Мы решили всегда использовать класс первым атрибутом. Таким образом можно сразу идентифицировать те стили, которые будут применены к элементу. К этому решению быстро привыкаешь.

Кодгайд: порядок атрибутов

Порядок свойств по важности

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

Чтобы не запоминать эти правила, мы подготовили конфиг для CSSComb, который будет автоматически сортировать свойства.

Кодгайд: порядок свойств

Впереди ещё много работы

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