Это исходники, публичная версия на сайте codeguide.academy.
- Code Guide by @mdo
- CSS Guidelines by Harry Roberts
- Idiomatic CSS by Nicolas Gallagher
- Primer Guidelines by GitHub
MIT.
Стиль кода Академии HTML
Home Page: http://codeguide.academy
License: MIT License
Это исходники, публичная версия на сайте codeguide.academy.
MIT.
Код в ветке feature/js-codeguide. Файл называется /app/templates/partials/js/js-rules.hbs
Предлагаю добавить темную тему для Кодгайда.
В качестве референса для основных цветов (текст, фоны) - темная тема редактора в тренажерах Академии.
prefers-color-scheme
для автоматического определения типа темы (caniuse);window.matchMedia('(prefers-color-scheme: dark)').matches
body
c переопределенными кастомными свойствами. Как должна выглядеть эта кнопка - вопрос открытый. Было бы неплохо использовать какую-то тематическую иконку, возможно "морда Кекса" или другой маскот.Т.к. уже использован PrismJS, предлагаю использовать готовое решение от автора, а именно тему TOMORROW NIGHT.
В идеале стоило бы заручиться поддержкой штатного дизайнера и обновить дизайн Кодгайда с учетом новой стилистики Академии. Как вариант - вернуться к этому вопросу уже после официального перехода основного сайта Академии на новый стиль и создать дополнительное ишью по доработке темной темы.
Хотелось бы видеть соглашение для картинок под ретину, договоренности по иконкам (спрайты раст/svg), семантике кода, связыванию с html c js для работы с dom
Студент использовал codestyle Академии .htmlhintrc https://github.com/htmlacademy/codeguide/blob/master/.htmlhintrc . И VS Code ругается на правило “id-class-value”: “dash”, хотя классы указываются верно.
Хорошо
url("../images/catalog-background.jpg")
Плохо
url(../images/catalog-background.jpg)
Привести порядок свойств в демках и правило по сортировке свойств в соответсвии с критериями
По следам вот этого комментария
https://vk.com/login?to=%2Fhtmlacademy&u=2&w=wall-38306835_47828
Иногда возникает ситуация, когда у 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-комьюнити
http://codeguide.academy/html-css.html
Необязательные закрывающие теги (например, или ) не пропускаются.
У меня большая часть студентов использует 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
Добавьте @include в исключения правила "at-rule-no-unknown", в .sass файлах на него постоянно ругается
"at-rule-no-unknown": [true, { "ignoreAtRules": ["mixin", "define-mixin", "include"] }],
Сейчас про конфиги можно узнать только из репозитория. На сайте же про них ничего нет
Изначальный пулреквест #11
До сих пор не понимаю, в чём смысл писать 6 символов вместо 3 при указании цвета в стилях...
При использовании трёх же мы быстрее можем воспринять сколько там символов: #fff
вместо #ffffff
, читаемость на лицо. Студентов, выпускающихся из академии много и почему бы им не прививать более читаемый и распространённый вариант использования.
Добрый день. Извините за беспокойство, есть предложение изменить .htmlhintrc
:
"attr-lowercase": true,
на
"attr-lowercase": ["viewBox", "preserveAspectRatio"],
В новой версии postCSS sorting теперь по другому работает конфиг!
В процессе переработки критериев мы поняли, что часть из них - это кодгайд, а не критерии качества. Поэтому как только работа над критериями будет завершена, нужно обновить кодгайд. И учесть в нём следующие "бывшие" критерии:
Правила, которые нужно расписать (по возможности переиспользовать тексты критериев)
UPPER_SNAKE_CASE
PascalCase
Правила, которые можно упомянуть вскользь, потому что они автоматизируются
camelCase
on
-схема, нужно придерживаться её вездеПривет. Спасибо за конфиг.
Не рабочая ссылка у Primer Guidelines by GitHub: https://primer.github.io/guidelines/
Не знаю куда она вела, но может быть сюда https://styleguide.github.com/primer/principles/ ?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.