-
- HTML
- -
-
- 
-
-
- {{~> css/examples/css-selectors-example ~}}
-
- {{~> css/examples/css-important-example ~}}
-
- {{~> css/examples/css-shorthand-example ~}}
-
- {{~> css/examples/css-vertical-align-example ~}}
-
- {{~> css/examples/css-syntax-example ~}}
-
- {{~> css/examples/css-order-example ~}}
-
- {{~> css/examples/css-class-names-example ~}}
-
- {{~> css/examples/css-import-example ~}}
-
- {{~> css/examples/css-font-variant-example ~}}
- !important
- В большинстве случаев необходимость использования !important в CSS возникает из-за неправильного обращения к элементам страницы через каскад. Однако, в редких случаях, без использования !important не обойтись.
-
- Подробнее в статье: http://meiert.com/en/blog/20150310/important/. -
diff --git a/app/templates/partials/css/recomendations/css-selectors.hbs b/app/templates/partials/css/recomendations/css-selectors.hbs deleted file mode 100644 index 829bd1e..0000000 --- a/app/templates/partials/css/recomendations/css-selectors.hbs +++ /dev/null @@ -1,5 +0,0 @@ -Селекторы должны быть написаны так, чтобы их можно было переиспользовать в дальнейшем. Цепочки селекторов или селекторы с излишней вложенностью не должны создаваться без необходимости — это увеличивает специфичность правил и уменьшает возможность их переиспользования.
-Длинные цепочки вложенных селекторов также усложняют код и его поддержку. Хорошим подходом считается использовать вложенность до 2 или 3 уровня. Псевдоэлементы или псевдоклассы не увеличивают уровень вложенности. -
-Идентификаторы id для стилизации не используются. Вместо идентификаторов для задания стилей используются селекторы по классам или тегам.
Cокращенные объявления не используются в тех случаях, когда это может косвенно переопределить другие значения. Наиболее часто злоупотребляют сокращением следующих свойств:
-padding
- margin
- border-radius
- border
- font
- background
-
- Сокращённые свойства, где элементы значений однотипные (например,
- margin: 10px 15px; или
- padding: 1px 2px 3px;) сложнее воспринимать, чем отдельные свойства (margin-top: 10px; padding-top: 1px;).
-
- Свойства с разнотипными элементами значений (например,
- border: 1px solid #000000;) в сокращённом виде считываются легче – их можно сокращать, если нет опасности переопределить другие значения.
-
.button и .button-danger)..btn для кнопок), но не делайте их слишком длинными (более трёх слов).
- Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family.
-
- В случае использования нестандартных шрифтов альтернативный веб-безопасный шрифт и тип семейства указываются, чтобы в случае отсутствия нестандартного шрифта в системе, изменения внешнего вида страницы были минимальны. Альтернативный шрифт должен быть такого же типа, что и нестандартный. -
-- Порядок шрифтов следующий: -
-- Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com. -
diff --git a/app/templates/partials/css/rules/css-import.hbs b/app/templates/partials/css/rules/css-import.hbs deleted file mode 100644 index 846ec3c..0000000 --- a/app/templates/partials/css/rules/css-import.hbs +++ /dev/null @@ -1,4 +0,0 @@ -@import
- Правило @import работает медленнее, чем тег <link>. В стилях @import не должен использоваться.
-
- Объявления логически связанных свойств группируются в следующем порядке: -
-- Позиционирование следует первым потому, что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков. -
-- Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь. -
-- Сгруппированные объявления в правиле отделяются друг от друга пустой строкой. -
-
- Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.
-
#f5f5f5..5 вместо 0.5).top: 10px;). А перед двоеточием пробел не нужен.rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.p > a) ставится один пробел..selector {
- color: #f5f5f5;
-}
-border: 0.vertical-align
- Значение vertical-align должно быть явно указано для блоков с display: inline-block.
-
- Значение по умолчанию, baseline, может приводить к странному отображению блочно-строчных элементов. Например, когда в ряд стоят несколько элементов с разным количеством строк.
-
- Если вы хотите, чтобы элементы выравнивались по умолчанию, то явно укажите для vertical-align значение baseline. Это позволит другим понять, что вы знаете об особенностях отображения элементов с таким выравниванием и задали его намеренно.
-
-
-
- {{~> html/examples/html-minimal-markup-example ~}}
-
- {{~> html/examples/html-semantics-example ~}}
-
- {{~> html/examples/html-protocol-example ~}}
-
- {{~> html/examples/html-syntax-example ~}}
-
- {{~> html/examples/html-doctype-example ~}}
-
- {{~> html/examples/html-encoding-example ~}}
-
- {{~> html/examples/html-style-includes-example ~}}
-
- {{~> html/examples/html-js-includes-example ~}}
-
- {{~> html/examples/html-attribute-order-example ~}}
-
- {{~> html/examples/html-boolean-example ~}}
-
- {{~> html/examples/html-form-labels-example ~}}
-
- {{~> html/examples/html-img-sizes-example ~}}
-
- {{~> html/examples/html-language-example ~}}
- - В разметке должно быть использовано минимальное возможное количество элементов. Не должно быть лишних оберток и блоков, которые используются для оформления и могут быть заменены на псевдоэлементы. -
diff --git a/app/templates/partials/html/recomendations/html-protocol.hbs b/app/templates/partials/html/recomendations/html-protocol.hbs deleted file mode 100644 index e9ca3bd..0000000 --- a/app/templates/partials/html/recomendations/html-protocol.hbs +++ /dev/null @@ -1,7 +0,0 @@ -
- Если сайт поддерживает оба протокола http: и https:, то при запросе файлов в HTML через полный URL часть с протоколом из адреса можно исключить. Это сделает URL относительным и избавит от проблем с доступом, а также немного сократит запись.
-
- Если сайт подерживает только один из протоколов, в URL лучше явно указывать соответствующий. -
diff --git a/app/templates/partials/html/recomendations/html-semantics.hbs b/app/templates/partials/html/recomendations/html-semantics.hbs deleted file mode 100644 index 01bbd18..0000000 --- a/app/templates/partials/html/recomendations/html-semantics.hbs +++ /dev/null @@ -1,7 +0,0 @@ -- В разметке должны использоваться семантические теги HTML. -
-
- Параграфы текста должны помещаться в тег <p>. Тег <br> должен применяться по назначению.
-
- Атрибут класса у HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам. -
-- Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов. -
diff --git a/app/templates/partials/html/rules/html-boolean.hbs b/app/templates/partials/html/rules/html-boolean.hbs deleted file mode 100644 index 06a16a5..0000000 --- a/app/templates/partials/html/rules/html-boolean.hbs +++ /dev/null @@ -1,4 +0,0 @@ -
- Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
-
- В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
-
- Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
-
- Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.
-
- Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях или в процентах. В случае пикселей размерность не нужна.
-
- По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения. -
diff --git a/app/templates/partials/html/rules/html-js-includes.hbs b/app/templates/partials/html/rules/html-js-includes.hbs deleted file mode 100644 index 30d2050..0000000 --- a/app/templates/partials/html/rules/html-js-includes.hbs +++ /dev/null @@ -1,7 +0,0 @@ -- Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого. -
-
- При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию.
-
- Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
-
- Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.
-
<img>, <br> и другие) не ставится.</li> или </body>) не пропускаются.- Документ должен проходить проверку на валидность. Для проверки используется современный валидатор. -
diff --git a/browserslist b/browserslist deleted file mode 100644 index 076e30c..0000000 --- a/browserslist +++ /dev/null @@ -1,15 +0,0 @@ -# Browsers that we support - -# Desktop browsers -Explorer >= 11 -Edge >= 12 -Safari >= 8 -last 4 Chrome versions -last 4 Firefox versions -last 4 Opera versions - -# Mobile browsers -iOS >= 8 -Android >= 4.4 -ExplorerMobile >= 11 -BlackBerry >= 10 diff --git a/config/kit.json b/config/kit.json deleted file mode 100644 index febe63c..0000000 --- a/config/kit.json +++ /dev/null @@ -1,22 +0,0 @@ -{ - "entry": { - "css": [ - "style.css" - ], - - "js": [ - "app.js" - ] - }, - - "discover": ["img", "css", "js"], - - "cssnext": { - "browsers": "last 2 versions", - "import": false, - "features": { - "customProperties": false, - "rem": false - } - } -} diff --git a/config/webpack.config.js b/config/webpack.config.js deleted file mode 100644 index a53c00d..0000000 --- a/config/webpack.config.js +++ /dev/null @@ -1,46 +0,0 @@ -'use strict'; - -const path = require('path'); -const webpack = require('webpack'); -const options = require(path.resolve('config/kit')); - -let files = {}; -options.entry.js.forEach(function(file) { - files[path.basename(file, '.js')] = './js/' + file; -}); - -module.exports = { - context: path.resolve('app'), - - entry: files, - - output: { - path: path.resolve('build/js'), - filename: '[name].js', - pathinfo: true - }, - - module: { - loaders: [{ - test: /\.js$/, - exclude: /node_modules|build/, - loader: 'babel-loader', - query: { - cacheDirectory: true - } - }] - }, - - plugins: [ - new webpack.optimize.OccurenceOrderPlugin(), - new webpack.optimize.DedupePlugin(), - new webpack.optimize.UglifyJsPlugin({ - compress: { - warnings: false - }, - output: { - comments: false - } - }) - ] -}; diff --git a/css/normalize.css b/css/normalize.css new file mode 100644 index 0000000..b26c100 --- /dev/null +++ b/css/normalize.css @@ -0,0 +1,427 @@ +/*! normalize.css v6.0.0 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in + * IE on Windows Phone and in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -ms-text-size-adjust: 100%; /* 2 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +article, +aside, +footer, +header, +nav, +section { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + * 1. Add the correct display in IE. + */ + +figcaption, +figure, +main { /* 1 */ + display: block; +} + +/** + * Add the correct margin in IE 8. + */ + +figure { + margin: 1em 40px; +} + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * 1. Remove the gray background on active links in IE 10. + * 2. Remove gaps in links underline in iOS 8+ and Safari 8+. + */ + +a { + background-color: transparent; /* 1 */ + -webkit-text-decoration-skip: objects; /* 2 */ +} + +/** + * 1. Remove the bottom border in Chrome 57- and Firefox 39-. + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Prevent the duplicate application of `bolder` by the next rule in Safari 6. + */ + +b, +strong { + font-weight: inherit; +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font style in Android 4.3-. + */ + +dfn { + font-style: italic; +} + +/** + * Add the correct background and color in IE 9-. + */ + +mark { + background-color: #ff0; + color: #000; +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +audio, +video { + display: inline-block; +} + +/** + * Add the correct display in iOS 4-7. + */ + +audio:not([controls]) { + display: none; + height: 0; +} + +/** + * Remove the border on images inside links in IE 10-. + */ + +img { + border-style: none; +} + +/** + * Hide the overflow in IE. + */ + +svg:not(:root) { + overflow: hidden; +} + +/* Forms + ========================================================================== */ + +/** + * Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + margin: 0; +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * 1. Prevent a WebKit bug where (2) destroys native `audio` and `video` + * controls in Android 4. + * 2. Correct the inability to style clickable types in iOS and Safari. + */ + +button, +html [type="button"], /* 1 */ +[type="reset"], +[type="submit"] { + -webkit-appearance: button; /* 2 */ +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * 1. Add the correct display in IE 9-. + * 2. Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + display: inline-block; /* 1 */ + vertical-align: baseline; /* 2 */ +} + +/** + * Remove the default vertical scrollbar in IE. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10-. + * 2. Remove the padding in IE 10-. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding and cancel buttons in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-cancel-button, +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in IE 9-. + * 1. Add the correct display in Edge, IE, and Firefox. + */ + +details, /* 1 */ +menu { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Scripting + ========================================================================== */ + +/** + * Add the correct display in IE 9-. + */ + +canvas { + display: inline-block; +} + +/** + * Add the correct display in IE. + */ + +template { + display: none; +} + +/* Hidden + ========================================================================== */ + +/** + * Add the correct display in IE 10-. + */ + +[hidden] { + display: none; +} diff --git a/css/prism.css b/css/prism.css new file mode 100644 index 0000000..91c4996 --- /dev/null +++ b/css/prism.css @@ -0,0 +1,139 @@ +/* http://prismjs.com/download.html?themes=prism&languages=markup+css+clike+javascript */ +/** + * prism.js default theme for JavaScript, CSS and HTML + * Based on dabblet (http://dabblet.com) + * @author Lea Verou + */ + +code[class*="language-"], +pre[class*="language-"] { + color: black; + background: none; + text-shadow: 0 1px white; + font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace; + text-align: left; + white-space: pre; + word-spacing: normal; + word-break: normal; + word-wrap: normal; + line-height: 1.5; + + -moz-tab-size: 4; + -o-tab-size: 4; + tab-size: 4; + + -webkit-hyphens: none; + -moz-hyphens: none; + -ms-hyphens: none; + hyphens: none; +} + +pre[class*="language-"]::-moz-selection, pre[class*="language-"] ::-moz-selection, +code[class*="language-"]::-moz-selection, code[class*="language-"] ::-moz-selection { + text-shadow: none; + background: #b3d4fc; +} + +pre[class*="language-"]::selection, pre[class*="language-"] ::selection, +code[class*="language-"]::selection, code[class*="language-"] ::selection { + text-shadow: none; + background: #b3d4fc; +} + +@media print { + code[class*="language-"], + pre[class*="language-"] { + text-shadow: none; + } +} + +/* Code blocks */ +pre[class*="language-"] { + padding: 1em; + margin: .5em 0; + overflow: auto; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: #f5f2f0; +} + +/* Inline code */ +:not(pre) > code[class*="language-"] { + padding: .1em; + border-radius: .3em; + white-space: normal; +} + +.token.comment, +.token.prolog, +.token.doctype, +.token.cdata { + color: slategray; +} + +.token.punctuation { + color: #999; +} + +.namespace { + opacity: .7; +} + +.token.property, +.token.tag, +.token.boolean, +.token.number, +.token.constant, +.token.symbol, +.token.deleted { + color: #905; +} + +.token.selector, +.token.attr-name, +.token.string, +.token.char, +.token.builtin, +.token.inserted { + color: #690; +} + +.token.operator, +.token.entity, +.token.url, +.language-css .token.string, +.style .token.string { + color: #a67f59; + background: hsla(0, 0%, 100%, .5); +} + +.token.atrule, +.token.attr-value, +.token.keyword { + color: #07a; +} + +.token.function { + color: #DD4A68; +} + +.token.regex, +.token.important, +.token.variable { + color: #e90; +} + +.token.important, +.token.bold { + font-weight: bold; +} +.token.italic { + font-style: italic; +} + +.token.entity { + cursor: help; +} + diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..81e0f90 --- /dev/null +++ b/css/style.css @@ -0,0 +1,340 @@ +html { + font-size: 16px; +} + +body { + margin: 0; + + font: 17px/1.6 "Helvetica", "Arial", sans-serif; + color: #5a5a5a; + + background-color: #ffffff; +} + +a:link, +a:visited { + color: #5a5a5a; + text-decoration: underline; +} + +a:hover { + text-decoration: none; +} + +h1, +h2, +h3 { + margin: 0; + + font-weight: normal; + color: #424242; + letter-spacing: -0.025em; +} + +h2, +h3, +h4 { + line-height: 1.2; +} + +h1 { + font-size: 3rem; + line-height: 1.3; +} + +h2 { + font-size: 2.5rem; +} + +h3 { + font-size: 1.75rem; +} + +code, +pre { + font-family: "Consolas", "Liberation Mono", "Menlo", "Courier", monospace; +} + +code { + padding: 2px 4px; + + font-size: 95%; + color: #d44950; + + background-color: #f7f7f9; + border-radius: 0.2rem; +} + +pre { + display: block; + margin: 0 0 1rem; + + line-height: 1.4; + white-space: pre-wrap; +} + +pre code { + padding: 0; + + color: inherit; + + background-color: transparent; + border: 0; +} + +ul li { + margin-bottom: 0.25rem; +} + +header { + padding: 1rem 1rem 6rem; + + text-align: center; + + background-color: #312785; + background-image: repeating-linear-gradient(150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px), repeating-linear-gradient(-150deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.06) 1px, transparent 0, transparent 41px); + background-size: 82px 47px; +} + +header h1 { + margin: 0 0 0.25rem; + + color: #ffffff; +} + +header p { + margin-top: 0; + + font-size: 1.1rem; +} + +header a:link, +header a:visited { + color: #ffffff; +} + +.visually-hidden { + position: absolute; + + width: 1px; + height: 1px; + margin: -1px; + padding: 0; + overflow: hidden; + + border: 0; + + clip: rect(0, 0, 0, 0); + clip-path: inset(100%); +} + +.logo-list { + max-width: 550px; + margin: 50px auto; +} + +.logo-list ul { + display: flex; + justify-content: space-between; + margin: 0; + padding: 0; + + list-style: none; +} + +.logo { + width: 300px; + height: 300px; +} + +.chapter h2 { + padding: 2rem 1rem; + + background-color: #e5e5e5; +} + +.chapter-part { + display: flex; + flex-direction: column; + + border-bottom: 1px solid #e5e5e5; +} + +.chapter-part-col { + padding: 2rem 1rem; +} + +.chapter-part-col figure { + margin: 0 1rem 0 0; +} + +.chapter-part-col p { + max-width: 32rem; +} + +.chapter-part-col + .chapter-part-col { + border-top: 1px solid #e5e5e5; +} + +.gray-bgcolor { + background-color: #fafafa; +} + +footer { + padding: 2rem; + + background-color: #2d2d44; +} + +.contacts { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +.logo-full { + display: inline-block; + width: 161px; +} + +.social-icons { + display: flex; + justify-content: space-between; + align-items: center; + margin: 0.5rem 0 1rem 0; +} + +.social-icons, +.github { + font-size: 0; +} + +.icon { + min-width: 2rem; + min-height: 2rem; + + background-repeat: no-repeat; + background-position: center; + background-size: calc(100% - 5px); + opacity: 0.5; +} + +.icon:hover { + opacity: 1; +} + +.icon-vk { + background-image: url("../img/icon-vkontakte.svg"); +} + +.icon-fb { + background-image: url("../img/icon-facebook.svg"); +} + +.icon-tw { + background-image: url("../img/icon-twitter.svg"); +} + +.icon-ig { + background-image: url("../img/icon-instagram.svg"); +} + +.github-link { + display: inline-block; + width: 91px; + height: 16px; + + background-image: url("../img/github.svg"); +} + +@media (min-width: 38em) { + header { + padding-bottom: 4rem; + } + + html { + font-size: 20px; + } + + .chapter h2 { + padding: 2rem 2rem 2.5rem; + } + + .chapter-part-col { + padding: 2rem; + } +} + +@media (min-width: 48em) { + .chapter h2 { + padding: 2rem 3rem 2.5rem; + } + + .chapter-part { + flex-direction: row; + } + + .chapter-part-col { + width: 50%; + padding: 3rem; + } + + .chapter-part-col--full-width { + width: 100%; + } + + .chapter-part-col + .chapter-part-col { + border-top: 0; + } +} + +/* override default prism theme */ +code[class*="language-"], +pre[class*="language-"] { + white-space: pre-wrap; +} + +pre[class*="language-"] { + margin: 0; + padding: 0; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: initial; +} + +/* override default prism theme */ +code[class*="language-"], +pre[class*="language-"] { + white-space: pre-wrap; +} + +pre[class*="language-"] { + margin: 0; + padding: 0; +} + +:not(pre) > code[class*="language-"], +pre[class*="language-"] { + background: initial; +} + +pre.language-correct, +pre.language-incorrect { + padding: 5px 10px; +} + +pre.language-correct { + background: #deeede; +} + +pre.language-incorrect { + background: #f4d3d3; +} + +pre.language-correct .token.operator, +pre.language-incorrect .token.operator { + background: none; +} diff --git a/gulp/copy.js b/gulp/copy.js deleted file mode 100644 index a0eeb66..0000000 --- a/gulp/copy.js +++ /dev/null @@ -1,11 +0,0 @@ -import fs from 'fs-extra'; -import gulp from 'gulp'; - -let files = 'app/!(css|js|templates)/**/*'; - -gulp.task('clean', fs.emptyDir.bind(null, 'build')); - -gulp.task('copy', gulp.series('clean', () => { - return gulp.src(files, {dot: true}) - .pipe(gulp.dest('build')); -})); diff --git a/gulp/handlebars.js b/gulp/handlebars.js deleted file mode 100644 index 674658a..0000000 --- a/gulp/handlebars.js +++ /dev/null @@ -1,28 +0,0 @@ -import fs from 'fs-extra'; -import merge from 'merge'; -import gulp from 'gulp'; -import rename from 'gulp-rename'; -import engine from 'gulp-compile-handlebars'; -import {get as bs} from 'browser-sync'; - -const configure = () => { - fs.ensureDirSync('./app/templates/partials'); - fs.ensureDirSync('./app/templates/helpers'); - - return { - ignorePartials: true, - batch: ['./app/templates/partials'], - helpers: merge( - require('hbs-helpers'), - require('require-dir')('./../app/templates/helpers') - ) - }; -}; - -gulp.task('handlebars', () => { - return gulp.src('app/templates/*.hbs') - .pipe(engine({}, configure())) - .pipe(rename({extname: '.html'})) - .pipe(gulp.dest('build')) - .pipe(bs('kit').stream()); -}); diff --git a/gulp/postcss.js b/gulp/postcss.js deleted file mode 100644 index fb6a3f4..0000000 --- a/gulp/postcss.js +++ /dev/null @@ -1,40 +0,0 @@ -import path from 'path'; -import gulp from 'gulp'; -import postcss from 'gulp-postcss'; -import minify from 'gulp-minify-css'; -import {get as bs} from 'browser-sync'; - -import include from 'postcss-import'; -import mixins from 'postcss-mixins'; -import nested from 'postcss-nested'; -import variables from 'postcss-css-variables'; -import cssnext from 'postcss-cssnext'; -import assets from 'postcss-assets'; -import mqpacker from 'css-mqpacker'; - -const options = require(path.resolve('config/kit')); - -let files = options.entry.css.map((file) => path.join('app', 'css', file)); - -let plugins = [ - include(), - mixins(), - nested(), - variables(), - cssnext(options.cssnext), - assets({ - loadPaths: options.discover, - basePath: 'build/' - }), - mqpacker({ - sort: true - }) -]; - -gulp.task('postcss', () => { - return gulp.src(files, {base: 'app', allowEmpty: true, sourcemaps: true}) - .pipe(postcss(plugins)) - .pipe(minify({keepSpecialComments: 0})) - .pipe(gulp.dest('build', {sourcemaps: {path: '.'}})) - .pipe(bs('kit').stream({match: '**/*.css'})); -}); diff --git a/gulp/serve.js b/gulp/serve.js deleted file mode 100644 index 482d87b..0000000 --- a/gulp/serve.js +++ /dev/null @@ -1,32 +0,0 @@ -import gulp from 'gulp'; - -const bs = require('browser-sync').create('kit'); - -gulp.task('serve', () => { - bs.init({ - server: 'build/', - notify: false, - open: false, - ui: false - }); - - gulp.watch( - 'app/css/**/*.css', - gulp.series('postcss') - ); - - gulp.watch( - 'app/js/**/*.js', - gulp.series('webpack') - ); - - gulp.watch( - 'app/templates/**/*.{hbs,js}', - gulp.series('handlebars') - ); - - gulp.watch( - 'app/img/**/*.{jpg,png,svg,gif}', - gulp.series('handlebars') - ); -}); diff --git a/gulp/webpack.js b/gulp/webpack.js deleted file mode 100644 index bcf9639..0000000 --- a/gulp/webpack.js +++ /dev/null @@ -1,17 +0,0 @@ -import path from 'path'; -import gulp from 'gulp'; -import webpack from 'webpack-stream'; -import {get as bs} from 'browser-sync'; - -gulp.task('webpack', () => { - let options = require(path.resolve('config/webpack.config')); - - options.devtool = 'source-map'; - options.debug = true; - options.cache = true; - - return gulp.src('app/js/app.js', {allowEmpty: true}) - .pipe(webpack(options)) - .pipe(gulp.dest('build/js')) - .pipe(bs('kit').stream({match: '**/*.js'})); -}); diff --git a/gulpfile.babel.js b/gulpfile.babel.js deleted file mode 100644 index d475fa4..0000000 --- a/gulpfile.babel.js +++ /dev/null @@ -1,10 +0,0 @@ -import gulp from 'gulp'; - -require('require-dir')('./gulp'); - -gulp.task('start', gulp.series( - 'copy', - gulp.parallel('postcss', 'webpack'), - 'handlebars', - 'serve' -)); diff --git a/html-css.html b/html-css.html new file mode 100644 index 0000000..a1a3684 --- /dev/null +++ b/html-css.html @@ -0,0 +1,572 @@ + + + + +
+
+ <img>, <br> и другие) не ставится.</li> или </body>) не пропускаются.<!DOCTYPE html>
+<html lang="ru">
+ <head>
+ <meta charset="utf-8">
+ <title>Страница о коте</title>
+ </head>
+ <body>
+ <article class="post">
+ <h1>Красивый кот</h1>
+ <figure class="post-item">
+ <img src="cat.jpg" alt="Изображение кота">
+ <figcaption>Кот красив!</figcaption>
+ </figure>
+ </article>
+ </body>
+</html>+ Документ должен проходить проверку на валидность. Для проверки используется современный валидатор. +
+
+ В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
+
<!DOCTYPE html>
+<html lang="ru">
+ <head>…</head>
+ <body>…</body>
+</html>
+ Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
+
<head>
+ <meta charset="utf-8">
+ <title>Заголовок страницы</title>
+</head>
+ Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.
+
<!-- Хорошо: стилевой файл подключён в секции head -->
+<!DOCTYPE html>
+<html lang="ru">
+ <head>
+ <link rel="stylesheet" href="style.css">
+ </head>
+ <body>…</body>
+</html>
+
+<!-- Плохо: стилевой файл подключён в секции body -->
+<!DOCTYPE html>
+<html lang="ru">
+ <head>…</head>
+ <body>
+ <link rel="stylesheet" href="style.css">
+ </body>
+</html>+ Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого. +
+
+ При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию.
+
<!-- Хорошо: скрипт подключается перед </body> -->
+<!DOCTYPE html>
+<html lang="ru">
+ <head>…</head>
+ <body>
+ <!-- Содержимое страницы -->
+ <script src="app.js"></script>
+ </body>
+</html>
+
+<!-- Плохо: скрипт подключается в секции <head> -->
+<!DOCTYPE html>
+<html lang="ru">
+ <head>
+ <script src="app.js"></script>
+ </head>
+ <body>…</body>
+</html>+ Атрибут класса у HTML-элементов пишется первым. Единообразное написание помогает легче считывать код и быстрее разбираться в назначении блоков по их классам. +
++ Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов. +
+<a class="element element-big" id="element" href="/" data-name="element">Ссылка</a>
+
+<input class="form-control" type="text" name="test">
+
+<img class="pets-picture" src="cats.jpg" alt="Изображение котиков">
+ Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
+
<!-- checked="checked" необязательно -->
+<input type="checkbox" required checked>
+
+<input type="text" disabled>
+
+<select>
+ <option value="1" selected>1</option>
+</select>
+ Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.
+
<!-- Хорошо: элемент формы radio связан с подписью через идентификатор -->
+<input type="radio" id="choose">
+<label for="choose">Радио кнопка</label>
+
+<!-- Хорошо: элемент формы radio и подпись обёрнуты в label -->
+<label>
+ <input type="radio"> Радио кнопка
+</label>
+
+<!-- Плохо: подпись не связана с элементом формы -->
+<input type="radio" id="choose"> Радио кнопка
+ Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях. В случае пикселей размерность не нужна.
+
+ По возможности изображениям указываются действительные размеры, так как это улучшает производительность отрисовки страницы: браузер не будет перерисовывать страницу в процессе загрузки и отображения изображения. +
+<!-- Хорошо: размеры картинке заданы -->
+<div class="logo-area">
+ <img src="logo.png" alt="" width="300" height="150">
+</div>
+
+<!-- Плохо: размеры картинке заданы в px -->
+<div class="logo-area">
+ <img src="logo.png" alt="" width="300px" height="150px">
+</div>
+
+<!-- Плохо: размеры картинке не заданы -->
+<div class="logo-area">
+ <img src="logo.png" alt="">
+</div>
+ Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
+
<!DOCTYPE html>
+<html lang="ru">
+ <head>…</head>
+ <body>…</body>
+</html>#f5f5f5..5 вместо 0.5).top: 10px;). А перед двоеточием пробел не нужен.rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.p > a) ставится один пробел..selector {
+ color: #f5f5f5;
+}
+ border: 0./* Хорошо */
+.selector,
+.selector-secondary,
+.selector[type="text"] {
+ padding: 15px;
+ margin-bottom: 15px;
+ background-color: rgba(0, 0, 0, 0.5);
+ box-shadow: 0 1px 2px #cccccc, inset 0 1px 0 #ffffff;
+}
+
+/* Плохо */
+.selector, .selector-secondary, .selector[type=text]{
+ padding:15px;
+ margin:0px 0px 15px;
+ background-color:rgba(0,0,0,.5);
+ box-shadow:0px 1px 2px #CCC,inset 0 1px 0 #FFFFFF}+ Объявления логически связанных свойств группируются в следующем порядке: +
++ Позиционирование следует первым потому, что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков. +
++ Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь. +
++ Сгруппированные объявления в правиле отделяются друг от друга пустой строкой. +
+
+ Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия.
+
.declaration-order {
+ /* Позиционирование */
+ position: absolute;
+ top: 0;
+ right: 0;
+ bottom: 0;
+ left: 0;
+ z-index: 100;
+
+ /* Блочная модель */
+ display: block;
+ float: right;
+ width: 100px;
+ height: 100px;
+ margin: 10px;
+ padding: 10px;
+
+ /* Типографика */
+ font: normal 13px/1.5 "Arial", sans-serif;
+ font-style: normal;
+ font-size: 13px;
+ line-height: 1.5;
+ font-family: "Arial", sans-serif;
+ text-align: center;
+ color: #333333;
+
+ /* Оформление */
+ background-color: #f5f5f5;
+ border: 1px solid #e5e5e5;
+ border-radius: 3px;
+ opacity: 1;
+
+ /* Анимация */
+ transition: color 1s;
+
+ /* Разное */
+ will-change: auto;
+}.button и .button-danger)..btn для кнопок), но не делайте их слишком длинными (более трёх слов)./* Хорошо */
+.alert-danger { … }
+.tweet .user-picture { … }
+.button { … }
+.layout-center { … }
+
+/* Плохо */
+.testElement { … }
+.t { … }
+.big_red_button { … }
+.knopka { … }@import
+ Правило @import работает медленнее, чем тег <link>. В стилях @import не должен использоваться.
+
<!-- Хорошо: подключение тегом link -->
+<link rel="stylesheet" href="module.css">
+
+<!-- Плохо -->
+<style>
+ @import url("module.css");
+</style>
+ Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family.
+
+ В случае использования нестандартных шрифтов альтернативный веб-безопасный шрифт и тип семейства указываются, чтобы в случае отсутствия нестандартного шрифта в системе, изменения внешнего вида страницы были минимальны. Альтернативный шрифт должен быть такого же типа, что и нестандартный. +
++ Порядок шрифтов следующий: +
++ Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com. +
+/* Хорошо: указан альтернативный веб-безопасный шрифт и его тип семейства */
+body {
+ font-family: "Helvetica", "Arial", sans-serif;
+}
+
+/* Кому-то нравится Arial, кому-то Tahoma */
+body {
+ font-family: "Helvetica", "Tahoma", sans-serif;
+}
+
+/* Плохо: указан только нестандартный шрифт */
+body {
+ font-family: "Helvetica";
+}
+
+/* Плохо: указан только нестандартный шрифт и тип семейства, альтернативный веб-безопасный шрифт отсутствует */
+body {
+ font-family: "Helvetica", sans-serif;
+}
+
+/* Плохо: Georgia — шрифт с засечками, а нестандартный шрифт — без засечек */
+body {
+ font-family: "Helvetica", "Georgia", sans-serif;
+}Для правильного форматирования используйте файл .editorconfig в вашем редакторе.+ +
Для отступов используются два пробела. Знак табуляции не используется.
+ +При переносах в продолжении строки используется четыре пробела
+ +Запрещено одновременное использование табов и пробелов для отступов
+ +Выражения должны заканчиваться точками с запятой
+ +Для отступов ключевых слов, операторов и т. д. используется не более одного пробела
+var name = 1;
+var longerName = 2;
+var name = 1;
+var longerName = 2;
+Открывающие скобки блоков кода находятся на одной строке с оператором, которых их использует: +
if (condition)
+{
+ // code
+}
+if (condition) {
+ // code
+}
+В однострочных блоках кода, код отделен от открывающей и закрывающей скобки пробелом
+ +В однострочных массивах скобки не отделяются пробелами, первое значение идет непосредственно после закрывающей скобки, а закрывающая скобка идет непосредственно после последнего значения массива
+ +После запятой всегда должен ставиться пробел, если запятая не в конце строки
+ +Запрещено переносить запятую на новую строку при создании множественных переменных через один var, при объявлении массивов и объектов. Запрещено использовать запятую в конце списков, объектов или наоборов параметров функции
+ +Файл должен заканчиваться пустой строкой
+ +Строка не должна заканчиваться пробелами
+ +В однострочных объектах и при деструктуризации фигурные скобки отбиваются пробелами с двух сторон
+ +В коде не используются совместно табы и пробелы
+ +Блоки кода отделяются друг от друга не более чем двумя пустыми строками
+ +В качестве символа переноса строки используется стандартный символ, который используется в системе
+ +При объявлении вычисляемых ключей в объектах с помощью синтаксиса ES2016 в квадратных скобках не используются пробелы
+ +Оператор вызова функции () не отделяется круглыми скобками от названия функции
В объектах после объявления ключа не ставится пробел. После двоеточия, которое отделяет в объектах ключ от значения может стоять только один пробел, выравнивать несколько значений при объявлении многострочного объекта запрещено
+ +Ключевые слова отделяются пробелами. Правило касается всех блоков, которые не оговорены отдельно в других правилах. В частности ключевые слова должны отделяться пробелами для условных операторов, циклов, операторов множественного выбора, блоков try..catch, объявлений классов и т. д.
В блоках кода первая и последняя строка не должны быть пустыми (код не отбивается от начала блока кода)
+ +После двоеточий и точек с запятым ставятся пробелы. Перед ними — не ставятся
+ +Перед скобками начинающими новый блок кода должен ставиться пробел
+ +При объявлении анонимных функций, скобки с параметрами отделаются пробелом от ключевого слова function. Если функция именована, перед названием ставится пробел, после — нет
В комментариях текст отбивается пробелом от начала комментария
+ +При создании генераторов, звездочка идет сразу после ключевого слова function без пробелов
В spread-операторе точки не отделяются от названия коллекции
+ +Звездочка после ключевого слова yield не отбивается пробелом. После звездочки пробел ставится всегда
В строках, объявленных с помощью одинарных и двойных кавычек запрещено использовать переносы
+ +В строках запрещено указывать код спецсимволов в восьмеричной системе счисления +
var foo = "Copyright \251";
+var foo = "Copyright \u00A9";
+При создании объектов через литералы свойства должны объявляться в едином стиле: или без кавычек или с ними
+ +В строках используются одинарные кавычки. Разрешено использовать строковые шаблоны. Если позволяет поддержка, предпочтение отдается строковым шаблонам
+В числах запрещено опускать ноль в дробной и целой части
+ +Запрещено использовать ведущий ноль при создании чисел, поскольку это приводит к созданию числа в восьмеричной системе счисления
+Массивы должны создаваться через литерал массива, а не через конструктор. Допустимое исключение — создание массива определенной длины
+ +Объекты должны создаваться через литерал объекта, а не через конструктор
+ +При создании объектов запрещено дублирование ключей
+ +При описании функций запрещено дублировать названия параметров
+ +В операторе switch запрещено дублировать условия (case)
В бинарных и тернарных операторах операнды и символы оператора отделяются пробелами
+ +Унарные операторы не отделяются от операнда пробелом. Исключения составляют операторы, состоящие из слов, а не символов, например оператор typeof
Запрещено объявлять переменные, имена которых совпадают с именами используемых в коде лейблов
+ +Все переменные должны быть названы в верблюжьем регистре (camelCase). Исключения составляют константы которые должны именоваться прописными буквами в змеином регистре (UPPER_SNAKE_CASE)
+ +Запрещено использовать имена переменных, которые используются во внешних областях видимости
+ +Запрещено называть переменные и свойства ключевыми словами JS
+ +Запрещено использовать переменные, не объявленные ранее. При использовании переменной, объявленной в другом модуле в глобальной области видимости нужно обращаться к ней как в свойству объекта window/global
Запрещено объявлять переменные без значения
+ +Запрещено напрямую обращаться к значению undefined. Для проверки типа рекомендуется использовать typeof. Для прямого сравнения с undefined можно использовать конструкцию void 0
С заглавной буквы называются только функции-конструкторы
+Все точки с запятой должны быть проставлены явно, не стоит рассчитывать на автоматическую расстановку точек с запятой ASI (Automatic Semicolon Insertion)
+ +Не рекомендуется использовать указатель Unicode BOM в коде, потому что код должен быть сохранен не в кодировке UTF-16, а в кодировке UTF-8, в которой нет указателя порядка бит
+ +Обязательно используются блоки кода даже если в выражении содержится одна строчка
+ +В коде нет пустых блоков кода
+ +Код работает в строгом режиме: в начале всех файлов явно прописана директива 'use strict'
Запрещена «проверка Йоды» — в условных операторах в блоке условия при сравнении переменной или свойства со значением сначала идет переменная или свойство объекта и только потом значения, а не наоброт. +
if (1 === myValue) {}
+if (myValue === 1) {}
+При сравнении двух значений используется оператор строгого сравнения вместо оператора нестрогого сравнения
+ +В условных операторах не используется оператор присвоения
+ +В условиях не используется небезопасное отрицание, например использование ! в in или instanceof без скобок
Запрещено сравнение с NaN. Для проверки, является результат операции числовым, нужно использовать Number.isNaN
Запрещено использовать case без break или return в блоках switch
Не используются вложенные тернарные операторы
+Если в функции используется ветвление, в котором есть возврат значения (return), return должен быть добавлен и в остальных ветках.
var do = function() {
+ if (cond) {
+ return 1;
+ } else {
+ doSomethingElse();
+ }
+};
+var do = function() {
+ if (cond) {
+ return 1;
+ } else {
+ return 2;
+ }
+};
+Это правило предотвращает создание функций, при использовании которых непонятно, вернут ли они какое-то значение. В первом примере, функция do может вернуть значение 1, а может undefined
В return не используется оператор присваивания
В стрелочных функциях всегда используются скобки для параметров, даже если параметр один
+В конструкторе классов-наследников обязательно вызывается super()
В конструкторе нет обращения к this до того, как будет вызван super()
При объявлении переменных предпочтение отдается ключевым словам let и const. Переменные объявляются через var только при наличии проблем с поддержкой кода
Запрещено переопределять с помощью ключевого слова ранее созданные переменные
+ +Запрещено использовать множественное объявление через одно ключевое слово. Для каждой переменной используется отдельный var, let или const.
+
var a = 1, b = 2;
+var a = 1;
+var b = 2;
+Запрещено переопределение функций, созданных с помощью функционального объявления (function declaration) +
function myFunc() {};
+myFunc = 2;
+Запрещено объявление значений внутри блоков
+ +Новые функции не создаются с помощью конструктора Function
Вместо коллекции arguments, используется rest-оператор, если это позволяет версия языка
Вместо вызова функции через apply используется spread-оператор, если это позволяет версия языка
+
+
Math.max.apply(null, [1, 100, 15, 1000]);
+Math.max(...[1, 100, 15, 1000]);
+Не вызываются служебные конструкторы, создающие объекты из глобальной области видимости Math(), JSON(), Reflect()
При создании непустых массивов запрещено опускать пустые значения (ставить подряд несколько запятых)
+ +При создании непустых объектов и массивов не используются «висячие» запятые
+ +Не используются конструкторы примитивов, которые используются для автобоксинга String, Number, Boolean
Конструкторы вызываются со скобками, даже если у них нет параметров
+ +Символы (Symbol) создаются вызовом функции Symbol без ключевого слова new
Не используется конструкция with
Не используются alert
Не используется выполнение кода через eval
Не используется неявный eval — в функциях, которые поддерживают передачу исполняемого кода как строку, например setTimeout
В ссылках используется протокол javascript:
Конструкторы не используются без ключевого слова new
В функциях не используются обращения к caller и callee
Встроенные в язык объекты и прототипы не расширяются в рантайме
+ +Не переопределяются глобальные значения (undefined, null, Object, window и прочие)
bind не используется вне методов классов
В функциях, которые не являются методами никакого объекта или класса не используется this
Переменные, объявленные через var не удаляются оператором delete
Не используется лишнее приведение к Boolean. Например, нет большого смысла переводить в boolean условия в конструкциях if, while, for, в первом операнде тернарного оператора
Оператор typeof используется корректно — используются только правильные значения, возвращаемые оператором, не производится сравнения со строковыми литералами, которые содержат некорректные значения typeof
В parseInt обязательно передается второй параметр — основание системы счисления, даже в случае с десятичной системой счисления
В блоки условия операторов if, while, for и тернарного оператора не передается константное значение, которое подразумевает, что условие выполняется (или не выполняется) всегда
+
if (true) {}
+if (a > 1) {}
+var ternaryValue = true ? 'a' : 'b';
+var ternaryValue = isA() ? 'a' : 'b';
+Не используются лишние (множественные) точки с запятой
+В коде не используется оставленных выводов в консоль
+ +В коде нет забытых инструкций debugger
В проекте нет недоступного кода, который никогда не выполнится + +
if (false) {
+ doSomething();
+}
+if (needToDoSomething()) {
+ doSomething();
+}
+В коде нет объявленных, но неиспользуемых переменных
+ +В коде нет выражений, значения которых не записываются в переменные, параметры функций, свойства объектов и не передаются как параметры функций + +
check === true && doSomething();
+if (check) {
+ doSomething();
+}
+Для выбрасывания исключения в оператор throw передаются только объекты Error. Передавать литералы запрещено.
+
+
throw 'Passed value is out of range';
+throw new RangeError('Rassed value is out of range');
+В конструкции try..catch запрещен пустой блок catch
необязательно добавлять текстовое описание конструкциям @return и @param, достаточно просто указания типа и названия параметра для @param
описание возвращаемного типа @return требуется только в том случае, если функция возвращает какое-то значение. Правило не действует для конструкторов, для них указывать @return необязательно. Также необязательно указывать тег @return для функций, в которых конструкуия return используется без возвращаемого значения для выхода из функции
для описания возвращаемого значения из функции используется тег @return, а не @returns
При итерировании по объектам через for..in при работе со свойствами используется конструкция hasOwnProperty
В объектах напрямую не переопределяется свойство __iterator__
В объектах напрямую не переопределяется свойство __proto__. Разрешено переопределять __proto__ через Object.create или запись в прототип, объектов, созданных другими конструкторами, но напрямую редактировать __proto__ нельзя
+
var obj = {
+ __proto__: Parent
+};
+var Obj = function() {};
+Obj.prototype = new Parent();
+var obj = new obj;
+
+var obj = Object.create(Parent.prototype);
+В коде не используются лейблы. Лейблы используются с конструкциями break и continue для направленного выхода из икла и могут привести к слишком сложному для понимания коду
Блоки, использующиеся в коде должны описывать тело функции, условия, оператора switch и прочие конструкции относящиеся к группировке множественных операций. Блоки не должны использваться сами по себе, любой блок должен быть частью другого выражения
В коде не используется оператор «запятая» для описания последовательностей действий. Для создания переменных используются отдельные ключевые слова let, const, var, в операторы группировки, условные операторы и прочие конструкции. Исключение составляет начальное условие оператора for
+
const result = (1, 2); // 2
+const result = 2;
+switch (val = getVal(), val) {}
+val = getVal();
+switch(val) {}
+
+for (var i = 0, l = 100; i < l; i++);
+В регулярных выражениях не используются «управляющие выражения»
+ +В регулярных выражениях не используются пустые классы символов [] (блоки, ограниченные квадратными скобками)
В коде регулярные выражения не создаются через конструктор RegExp из строки, которая не может быть разобрана как правильное регулярное выражение
В регулярных выражениях не используются нескольких последовательных пробелов. Вместо этого предлагается использовать модификаторы количества + +
/ /.exec(myString);
+/\s\s\s/.exec(myString);
+/\s{3}/.exec(myString);
+В Node.js файлах не используется конструкция process.exit