Добавьте @include в исключения правила "at-rule-no-unknown", в .sass файлах на него постоянно ругается

"at-rule-no-unknown": [true, { "ignoreAtRules": ["mixin", "define-mixin", "include"] }],

Тут кодировка снизу

Тут кодировка сверху

http://codeguide.academy/html-css.html
Необязательные закрывающие теги (например, или ) не пропускаются.

Привет. Спасибо за конфиг.
Не рабочая ссылка у Primer Guidelines by GitHub: https://primer.github.io/guidelines/
Не знаю куда она вела, но может быть сюда https://styleguide.github.com/primer/principles/ ?

Сейчас про конфиги можно узнать только из репозитория. На сайте же про них ничего нет

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

Этот пункт упускают очень многие style-гайды (гугловый в том числе)

Предлагаю добавить пункт о переносе аттрибутов, например:

<div
  id="myComponentItem32"
  class="my-component__item my-component__item--dashed"
  data-ng-click="loadSomething();"
  data-ng-class="{'text-center': isCentered}"
  title="Lorem Ipsum Dolor...."
>
  Lorem Ipsum Dolor Sit....
</div>

Пример выше часто используется в React-комьюнити

У меня большая часть студентов использует Sublime (сговорились, не иначе), и у всех у них проблемы с табуляцией. Предлагаю для начала воспользоваться хотя бы онлайн-форматтером. Чтобы исправить то, что уже наделано.

Если надо рабочий конфиг CSSComb для плагина Саблайма на основе CSSComb конфига Академии, у меня есть, пишите.
А то там если конфиг Академии скопировать, то плагин ерроры выдаёт.

А он у Академии json файлом представлен чтобы со сборщиком его использовать по моему:
https://github.com/htmlacademy/codeguide/blob/master/csscomb.json
Ну вообщем вот конфиг делающий тоже самое, только для плагина Саблайма:
https://github.com/vitaligo/CSScomb.sublime-settings/blob/master/CSScomb.sublime-settings

В новой версии postCSS sorting теперь по другому работает конфиг!

Изначальный пулреквест #11

Предлагаю добавить темную тему для Кодгайда.

В качестве референса для основных цветов (текст, фоны) - темная тема редактора в тренажерах Академии.

• определить цветовые решения в дизайне страниц через CSS custom properties;
• prefers-color-scheme для автоматического определения типа темы (caniuse);

window.matchMedia('(prefers-color-scheme: dark)').matches

• Кнопка-"тогглер" для ручной смены темы в шапке сайта. По клику тогглим класс у body c переопределенными кастомными свойствами. Как должна выглядеть эта кнопка - вопрос открытый. Было бы неплохо использовать какую-то тематическую иконку, возможно "морда Кекса" или другой маскот.
  Возможно, что-то нужно будет сделать и с изображением Кекса в шапке. А может и так сойдет.

Т.к. уже использован PrismJS, предлагаю использовать готовое решение от автора, а именно тему TOMORROW NIGHT.

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

Добрый день. Извините за беспокойство, есть предложение изменить .htmlhintrc:

  "attr-lowercase": true,

на

  "attr-lowercase": ["viewBox", "preserveAspectRatio"],

Хорошо

url("../images/catalog-background.jpg")

Плохо

url(../images/catalog-background.jpg)

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

• Правила, которые нужно расписать (по возможности переиспользовать тексты критериев)

  • Переменные названы по-английски, в единственном числе
  • Переменные, содержащие коллекции, именуются во множественном числе
  • Функции именуются с глагола
  • Константы записываются в нотации UPPER_SNAKE_CASE
  • Классы, функции-конструкторы и компоненты записываются в нотации PascalCase
  • Имена защищённых полей начинаются с подчёркивания, приватных — с решётки

• Правила, которые можно упомянуть вскользь, потому что они автоматизируются

  • Имена функций, переменных, параметров, свойств и методов записываются в нотации camelCase
  • В названии переменных не используется тип данных (нет Венгерской нотации)
  • Название методов и свойств объектов не содержит название объектов. Нужно добавить про классы и их свойства и методы
  • Из названия обработчика события следует, что это обработчик. В Реакте может быть только on-схема, нужно придерживаться её везде
  • Константы нигде в коде не переопределяются
  • Код всех JS-файлов соответствует рекомендованной структуре. Нужно учесть особенность классов на JS-2 и Реакта

Студент использовал codestyle Академии .htmlhintrc https://github.com/htmlacademy/codeguide/blob/master/.htmlhintrc . И VS Code ругается на правило “id-class-value”: “dash”, хотя классы указываются верно.

До сих пор не понимаю, в чём смысл писать 6 символов вместо 3 при указании цвета в стилях...

При использовании трёх же мы быстрее можем воспринять сколько там символов: #fff вместо #ffffff, читаемость на лицо. Студентов, выпускающихся из академии много и почему бы им не прививать более читаемый и распространённый вариант использования.

Код в ветке feature/js-codeguide. Файл называется /app/templates/partials/js/js-rules.hbs

Хотелось бы видеть соглашение для картинок под ретину, договоренности по иконкам (спрайты раст/svg), семантике кода, связыванию с html c js для работы с dom

• pdf. Для чтения из оффлайна
• PWA. Ещё один способ чтения в оффлайне
• Тёмная тема
• Перевод на гриды
• Поправить по LightHouse и core web witals

Привести порядок свойств в демках и правило по сортировке свойств в соответсвии с критериями

По следам вот этого комментария
https://vk.com/login?to=%2Fhtmlacademy&u=2&w=wall-38306835_47828