fix(standards): fix incorrect code insertion, add linking

parent 163d3f30
......@@ -494,4 +494,4 @@ contacts.html
По мере необходимости можно писать комментарии для пометки назначения какого-либо куска кода или причины выбора того или иного решения, которое может быть неочевидными, пометки для заказчика, если код при определённых условиях должен быть изменён. Комментировать всё не нужно.
Для русскоязычных проектов комментарии пишутся на русском языке, для иностранных - на английском.
[Далее: Pug](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standarts/1.1.2-pug.md)
\ No newline at end of file
[Далее: Pug](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.1.2-pug.md)
\ No newline at end of file
......@@ -12,7 +12,6 @@
* [html2jade.org](http://html2jade.org/) - конвертация HTML в Jade и Jade в HTML.
* [html2jade.aaron-powell.com](http://html2jade.aaron-powell.com/) - и еще один инструмент для конвертации HTML → Jade.
## 1. Назначение папок
```
......@@ -32,7 +31,6 @@ templates/ # Папка с шаблонами Jade
└── scripts.pug # Шаблон со скриптами
```
## 2. Подключение частиц в страницы
* `include header` - используется для подключения частиц страницы, например, для шапок и подвалов.
......@@ -41,10 +39,10 @@ templates/ # Папка с шаблонами Jade
Во всех случаях через пробел указывается путь от текущего расположения до шаблона без расширения `.pug`.
## 3. Теги, классы и идентификаторы
- Классы и идентификаторы пишутся в начале, а не в атрибутах. Указывать тег `div` не нужно, т.к. он используется по умолчанию.
```pug
//- Плохо
div(class='carousel' id="carousel")
......@@ -58,6 +56,7 @@ nav.nav.nav_pos_left
```
- Идентификатор ставится после классов.
```pug
//- Плохо
.carousel#carousel.carousel_theme_dark
......@@ -68,10 +67,10 @@ nav.nav.nav_pos_left
.carousel#carousel
```
## 4. Атрибуты элемента и их значения
- Для нескольких атрибутов запятая не нужна.
```pug
//- Плохо
input.input-text(type='text', name='project', value='zk', required)
......@@ -81,6 +80,7 @@ input.input-text(type='text' name='project' value='zk' required)
```
- Используйте одинарные кавычки для текстовых значений.
```pug
//- Плохо
input.input-text(type="text" name="project" value="zk" required)
......@@ -90,6 +90,7 @@ input.input-text(type='text' name='project' value='zk' required)
```
- Не давайте необязательные значения атрибутам.
```pug
//- Плохо
input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked='checked')
......@@ -99,6 +100,7 @@ input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked)
```
- Распологайте одиночные атрибуты в последнюю очередь.
```pug
//- Плохо
input.input-checkbox(type='checkbox' checked name='browser[]' value='chrome')
......@@ -108,6 +110,7 @@ input.input-checkbox(type='checkbox' name='browser[]' value='chrome' checked)
```
- Для числовых значений кавычки не нужны.
```pug
//- Плохо
input.input-text(type="text" name="price" value="24999")
......@@ -117,6 +120,7 @@ input.input-text(type='text' name='price' value=24999)
```
- Переносите атрибуты новую строку, если их много и/или значения длинные.
```pug
//- Плохо
input.input-text(type='text' name='project' value='zk' data-required='Это поле обязательно для заполнения!' data-hint='Допустимы только символы латинского алфавита `[a-z-A-Z]` и числа `[0-9]`.' required)
......@@ -135,6 +139,7 @@ input.input-text(
## 5. Переносы строк
- Добавляйте перенос строки для однотипных блоков с множественным вложением элементов. В лучшем случае используйте [примесь (mixin)](http://jade-lang.com/reference/#mixins).
```pug
//- Плохо
.project
......@@ -163,6 +168,7 @@ input.input-text(
```
- Строчные элементы можно записывать на одной строке через двоеточие `:`.<br>Не злоупотреблять с длинными классами.
```pug
//- Хорошо
ul.nav
......@@ -183,6 +189,7 @@ ul.nav
## 6. Комментарии
- Комментарии в Jade, которые не должны попасть в HTML записываются через `//-`.
```pug
// Этот комментарий попадёт в HTML.
......@@ -190,6 +197,7 @@ ul.nav
```
- Простые или условные комментарии можно записывать прямо в HTML-формате.
```html
<!--[if IE]>
meta(name='imagetoolbar' content='no')
......@@ -201,10 +209,10 @@ meta(name='msthemecompatible' content='no')
<!--/noindex-->
```
## 7. Пиши меньше, делай больше или используйте примеси!
Для однотипных и повторяющихся строк кода имеет смысл использовать [примеси (mixins)](http://jade-lang.com/reference/#mixins) и указать только данные.
```pug
mixin tools(list)
ul.list
......@@ -232,5 +240,5 @@ mixin tools(list)
</ul>
```
[Пред.: HTML](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standarts/1.1.2-html.md)
[Далее: CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standarts/1.2.1-css.md)
\ No newline at end of file
[Пред.: HTML](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.1.1-html.md)
[Далее: CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.1-css.md)
......@@ -32,7 +32,8 @@
.heading {
∙∙font-size: 32px;
∙∙font-color: #000;
}```
}
```
- Каждый селектор на отдельной строке.
......@@ -218,8 +219,6 @@ input[type="text"] {
}
```
## <a name='#css-declaration-order'>Порядок объявления</a>
Объявления логически связанных свойств должны быть сгруппированы в следующем порядке:
......@@ -274,7 +273,6 @@ input[type="text"] {
}
```
## <a name='#css-import'>Не используйте @import</a>
По сравнению с тегом `<link>` правило `@import` медленнее, создает дополнительные запросы и может вызвать иные непредвиденные проблемы. Избегайте это правило и используйте вместо него один из альтернативных подходов:
......@@ -294,7 +292,6 @@ input[type="text"] {
</style>
```
## <a name='#css-media-queries'>Место для media query</a>
Помещайте медиавыражения настолько близко к соответствующим наборам правил, насколько это возможно. Не объединяйте их в отдельную таблицу стилей. Не помещайте их в конце файла, для этого можно использовать специальный сборщик в [Grunt](https://www.npmjs.org/package/grunt-combine-media-queries) или [Gulp](https://www.npmjs.org/package/gulp-combine-media-queries). В противном случае это приведет к тому, что медиавыражения будут не замечены в будущем.
......@@ -456,3 +453,6 @@ a.link { /* ... */ }
- `BlockName--modName` — булевый модификатор блока.
- `BlockName_ElemName` — элемент блока.
- `BlockName_ElemName--modName` — булевый модификатор элемента.
[Пред.: Pug](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.1.2-pug.md)
[Далее: Less](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.2-less.md)
......@@ -285,3 +285,6 @@
// &__item
// color #08f
```
[Пред.: CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.1-css.md)
[Далее: Javascript](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.3-javascript.md)
......@@ -133,6 +133,7 @@ bar = 9;
console.log(foo, bar); // => 1, 9. foo не изменился
```
- **Сложные типы**: Когда вы взаимодействуете со сложным типом, вы взаимодействуете с ссылкой на его значение в памяти.
+ `object`
......@@ -196,6 +197,7 @@ let superman = {
type: 'alien'
};
```
**[[⬆]](#Оглавление)**
## <a name='arrays'>Массивы</a>
......@@ -256,16 +258,6 @@ function trigger() {
- Запятые в начале строки: **Нет.**
```javascript
// плохо
let once
, upon
, aTime;
// хорошо
let once,
upon,
aTime;
// плохо
let hero = {
firstName: 'Bob'
......@@ -770,6 +762,7 @@ $sidebar.find('ul').hide();
```
- Для поиска одного элемента используйте только идентификатор `#id`.
```javascript
// плохо
$('.menu button');
......@@ -785,6 +778,7 @@ $('#menuToggler');
```
- Для задания обработчика элементу используйте метод [`.on()`](http://api.jquery.com/on/).
```javascript
// Плохо
$input
......@@ -878,3 +872,6 @@ blur: function () { /* ... */ }
- [nettuts](http://net.tutsplus.com/?s=javascript)
**[[⬆]](#Оглавление)**
[Пред.: Less](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.2.2-less.md)
[Далее: Images](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.4-images.md)
# Изображения и их оптимизация
**Статус:** черновик.
**Статус:** черновик.
## Растр
С вырезанием растра проблем обычно не возникает.
......@@ -9,7 +9,6 @@
В первом хранятся всякие фотографии или фоны.
В PNG - иконки, все что требует прозрачности.
## Оптимизация растровых изображений
Картинки следует ужимать в любом случае.
Для начала стоит использовать Save for Web в самом Adobe Photoshop.
......@@ -23,7 +22,6 @@
TinyPNG доступен в виде пакета для Grunt и Gulp, который ужимает все это в автоматическом режиме,
единственное ограничение — 500 картинок в месяц.
## Вектор в Adobe Illustartor
Вектор из AI – при наличии установленного AI проблем нет тоже.
Открывается Vector Smart Object в самом AI (контекстное меню слоя — Редактирвоать содержимое / Edit Contents)
......@@ -32,7 +30,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
и сконвертировать в SVG – https://cloudconvert.org/ai-to-svg.
Но тут проблема в том, что экспортируется файл целиком, поэтому всякие наборы иконок вырезать таким способом не получится.
## Вектор в формах Photoshop
Формы (shape) — это лучший вариант. Можно вырезать самим Photoshop,
если версия CC или CC2014 – http://creativedroplets.com/generate-svg-with-photoshop-cc-beta/.
......@@ -41,7 +38,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
По размеру можно понять или просто проверить содержимое иконки. Такие «кривые» иконки мало того что не вектор,
весят больше чем обычный png, так еще и не отображаются на мобильниках и в сафари.
## Использование векторных иконок
Самый лучший вариант — строчный SVG, внедрённый в HTML-разметку.
Это несколько «захламляет» разметку, но зато позволяет делать очень крутые вещи.
......@@ -52,7 +48,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
Но это решаемо изящным костылем — навешивание фона на `<svg>` элемент.
А для конвертации SVG в PNG есть всякие Grunt-задачи.
## Минификация SVG
Для SVG есть прекрасный инструмент — [SVGO](https://github.com/svg/svgo).
Как показывает практика, после экспорта почти любая иконка ужимается вдвое, были случаи с уменьшением и на 90%.
......@@ -62,3 +57,6 @@ TinyPNG доступен в виде пакета для Grunt и Gulp, кото
на многие мешает атрибуты из области видимости скетча (ну и сама область видимости).
Примерно так же поступает и Adobe Illustrator.
По-хорошему, всё лишнее убрать и затем пропустить через SVGO.
[Пред.: Javascript](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.3-javascript.md)
[Далее: CSS](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.5-editorconfig.md)
......@@ -8,3 +8,6 @@
Такой файл может храниться в системе контроля версий проекта, что позволит всем его разработчикам использовать одну и ту же конфигурацию.
В каждом проекте Золотого Кода в корне находится файл конфигурации `.editorconfig`. В нем уже описано большинство соглашений по форматированию кода. Все что вам требуется - настроить свой редактор для работы с ним.
[Пред.: Images](http://git.zolotoykod.ru/111/developer-guide/blob/master/1-standards/1.4-images.md)
[Далее: Git](http://git.zolotoykod.ru/111/developer-guide/blob/master/2-git/2.1-git.md)
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment