🚀 Вам бесплатно доступен тренажёр по HTML и CSS.
«Пора выбрать единый способ оформления кота» — подумали мы с Сашей, когда перестали понимать, что происходит. Мы выпускаем много обучающего материала, и пора привести его в порядок.
Конечно, первым делом мы пошли смотреть на текущие гайды. Каждый нас чем-то не устраивал, поэтому мы решили создать собственный. Мы внимательно изучили и взяли всё лучшее из:
- Code Guide by @mdo
- CSS Guidelines by Harry Roberts
- Idiomatic CSS by Nicolas Gallagher
- Primer Guidelines by GitHub
Так мы собрали репозиторий с нашим кодгайдом и отправили его в публичное плавание
EditorConfig
Мы используем два пробела для отступов, пустую строку в конце файла и не любим лишние пробелы. Чтобы следить за этими настройками мы используем EditorConfig. Для любого редактора можно поставить расширение, которое будет автоматически менять настройки редактора по нашим правилам, описанным в файле .editorconfig.
Почему мы используем два пробела, а не что-нибудь другое?
Мы готовим код для презентаций, демонстраций, интерактивных заданий. Настроить длину tab не всегда представляется возможным. И если в вебе нас могло спасти свойство tab-size (у которого до сих пор плохая поддержка), то для остального никаких нормальных способов настроить tab нет. Поэтому наш выбор остановился на пробелах.
Мы выбрали два, а не четыре пробела, чтобы иметь возможность умещать код в небольших пространствах, таких как демонстрации или интерактивные задания.
Читабельность и единообразие
Главное правило, которым мы руководствовались в создании гайда — читабельность и единообразие. Нам не хотелось, чтобы учеников вводили в заблуждение сокращения. Код в первую очередь должен быть читабельным.
Мы не сокращаем значения цвета. Мы не опускаем первый ноль в дробных значениях. Запись -.75 — вгоняет в уныние любого ученика.
О сокращениях мы долго спорили внутри команды, и аргументы защитников сокращений сводились к одному — так быстрее писать. Но я считаю, что если хотите ускорить набор кода, то вам нужно использовать специальные инструменты: Emmet для быстрого набора кода или автодополнение в редакторах. А сокращением должны заниматься роботы. Не отбирайте у них работу, их не для этого создавали.
Класс — главный атрибут
Мы решили всегда использовать класс первым атрибутом. Таким образом можно сразу идентифицировать те стили, которые будут применены к элементу. К этому решению быстро привыкаешь.
Порядок свойств по важности
Два принципа, которые мы преследовали: важность влияния на поведение и отображение элемента и избегание типовых ошибок. Для этого в первую очередь идут группы свойств позиционирования и блочной модели, а уже потом типографика, оформление и анимация. А вот пример типовой ошибки: в псевдоэлементах часто забывают свойство content, поэтому мы вынесли его на самый верх.
Впереди ещё много работы
Долгие баталии и споры по гайду закончены, и теперь мы будем планомерно обновлять контент по новым правилам.
Эта статья впервые написана в 2015 году.