From 151f32c8e0e668e0fd11fdfc1d09bb2d5aa37457 Mon Sep 17 00:00:00 2001 From: Alexey Simonenko Date: Fri, 2 Oct 2015 01:00:51 +0300 Subject: [PATCH 01/56] =?UTF-8?q?=F0=9F=8E=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 1 + files/.editorconfig | 17 ++ files/csscomb.json | 380 ++++++++++++++++++++++++++++ img/copyright.svg | 1 + img/icon-facebook.svg | 1 + img/icon-instagram.svg | 1 + img/icon-twitter.svg | 1 + img/icon-vkontakte.svg | 1 + img/logo-full.svg | 1 + img/logo.svg | 1 + index.html | 548 +++++++++++++++++++++++++++++++++++++++++ js/app.js | 1 + 12 files changed, 954 insertions(+) create mode 100644 css/style.css create mode 100644 files/.editorconfig create mode 100644 files/csscomb.json create mode 100644 img/copyright.svg create mode 100644 img/icon-facebook.svg create mode 100644 img/icon-instagram.svg create mode 100644 img/icon-twitter.svg create mode 100644 img/icon-vkontakte.svg create mode 100644 img/logo-full.svg create mode 100644 img/logo.svg create mode 100644 index.html create mode 100644 js/app.js diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..73641b6 --- /dev/null +++ b/css/style.css @@ -0,0 +1 @@ +img,legend{border:0}legend,td,th{padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,pre,section,summary{display:block}pre,textarea{overflow:auto}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none} input[type=reset],button,html input[type=button],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{}table{border-collapse:collapse;border-spacing:0}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;white-space:pre-wrap}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html{font-size:16px}body{margin:0;font:17px/1.6 Helvetica,Arial,sans-serif;color:#5a5a5a;background-color:#fff}a:link,a:visited{color:#5a5a5a;text-decoration:underline}a:hover{text-decoration:none}h1,h2,h4{margin:0;font-weight:400;color:#424242;letter-spacing:-.025em}h2,h4{line-height:1.2}h1{font-size:3rem;line-height:1.3}h2{font-size:2.5rem}h4{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:.2rem}pre{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:.25rem}pre[class*=language-]{overflow:auto;margin:0;padding:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:initial}header{padding:3rem 1rem 6rem;text-align:center;background-color:#2e3191}.chapter h2,.chapter-part-col{padding:2rem 1rem}header h1{margin:1rem 0 .25rem;color:#fff}.logo{width:100px;height:127px}.chapter h2{background-color:#e5e5e5}.chapter-part{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-bottom:1px solid #e5e5e5}.chapter-part-col+.chapter-part-col{background-color:#fafafa;border-top:1px solid #e5e5e5}.chapter-part-col figure{margin:0 1rem 0 0}.chapter-part-col p{max-width:32rem}footer{padding:2rem;background-color:#2d2d44}.contacts{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.logo-full{display:inline-block;width:161px}.social-icons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:.5rem 0 1rem}.github,.social-icons{font-size:0}.icon{min-width:2rem;min-height:2rem;background-repeat:no-repeat;background-position:center;background-size:calc(100% - 5px);opacity:.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/copyright.svg)}@media (min-width:38em){header{padding-top:4rem;padding-bottom:8rem}.chapter h2{padding:2rem 2rem 2.5rem}.chapter-part-col{padding:2rem}}@media (min-width:48em){html{font-size:20px}.chapter h2{padding:2rem 3rem 2.5rem}.chapter-part{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.chapter-part-col{width:50%;padding:3rem}.chapter-part-col+.chapter-part-col{border-top:0}}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}} diff --git a/files/.editorconfig b/files/.editorconfig new file mode 100644 index 0000000..0bfd9ad --- /dev/null +++ b/files/.editorconfig @@ -0,0 +1,17 @@ +; http://editorconfig.org + +root = true + +[*] +charset = utf-8 +indent_style = space +indent_size = 2 +end_of_line = lf +trim_trailing_whitespace = true +insert_final_newline = true + +[*.{go,py,rb,php}] +indent_size = 4 + +[*.md] +trim_trailing_whitespace = false diff --git a/files/csscomb.json b/files/csscomb.json new file mode 100644 index 0000000..74429f2 --- /dev/null +++ b/files/csscomb.json @@ -0,0 +1,380 @@ +{ + "exclude": [ + ".git/**", + "node_modules/**" + ], + + "always-semicolon": true, + "block-indent": " ", + "color-case": "lower", + "color-shorthand": false, + "element-case": "lower", + "eof-newline": true, + "leading-zero": true, + "quotes": "double", + "remove-empty-rulesets": true, + "sort-order-fallback": "abc", + "space-before-colon": "", + "space-after-colon": " ", + "space-before-combinator": " ", + "space-after-combinator": " ", + "space-between-declarations": "\n", + "space-before-opening-brace": " ", + "space-after-opening-brace": "\n", + "space-before-selector-delimiter": "", + "space-after-selector-delimiter": "\n", + "space-before-closing-brace": "\n", + "strip-spaces": true, + "tab-size": 2, + "unitless-zero": true, + "vendor-prefix-align": true, + "sort-order": [ + [ + "content", + "position", + "top", + "right", + "bottom", + "left", + "z-index" + ], + [ + "display", + "-webkit-flex", + "-ms-flex", + "flex", + "-webkit-flex-grow", + "flex-grow", + "-webkit-flex-shrink", + "flex-shrink", + "-webkit-flex-basis", + "flex-basis", + "-webkit-flex-flow", + "flex-flow", + "-webkit-flex-direction", + "-ms-flex-direction", + "flex-direction", + "-webkit-flex-wrap", + "flex-wrap", + "-webkit-justify-content", + "justify-content", + "-webkit-align-content", + "align-content", + "-webkit-align-items", + "align-items", + "-webkit-order", + "-ms-flex-order", + "order", + "-webkit-align-self", + "align-self", + "float", + "clear", + "-webkit-box-sizing", + "-moz-box-sizing", + "box-sizing", + "width", + "min-width", + "max-width", + "height", + "min-height", + "max-height", + "margin", + "margin-top", + "margin-right", + "margin-bottom", + "margin-left", + "padding", + "padding-top", + "padding-right", + "padding-bottom", + "padding-left", + "overflow", + "-ms-overflow-x", + "overflow-x", + "-ms-overflow-y", + "overflow-y", + "-webkit-overflow-scrolling" + ], + [ + "list-style", + "list-style-position", + "list-style-type", + "list-style-image", + "border-collapse", + "border-spacing", + "table-layout", + "empty-cells", + "caption-side", + "font", + "font-weight", + "font-size", + "line-height", + "font-family", + "vertical-align", + "text-align", + "direction", + "color", + "text-transform", + "text-decoration", + "font-style", + "font-variant", + "font-size-adjust", + "font-stretch", + "font-effect", + "font-emphasize", + "font-emphasize-position", + "font-emphasize-style", + "font-smooth", + "-webkit-text-align-last", + "-moz-text-align-last", + "-ms-text-align-last", + "text-align-last", + "letter-spacing", + "word-spacing", + "white-space", + "text-emphasis", + "text-emphasis-color", + "text-emphasis-style", + "text-emphasis-position", + "text-indent", + "-ms-text-justify", + "text-justify", + "-ms-writing-mode", + "text-outline", + "text-wrap", + "-ms-text-overflow", + "text-overflow", + "text-overflow-ellipsis", + "text-overflow-mode", + "text-orientation", + "-ms-word-wrap", + "word-wrap", + "-ms-word-break", + "word-break", + "-moz-tab-size", + "-o-tab-size", + "tab-size", + "-webkit-hyphens", + "-moz-hyphens", + "hyphens", + "unicode-bidi", + "columns", + "column-count", + "column-fill", + "column-gap", + "column-rule", + "column-rule-color", + "column-rule-style", + "column-rule-width", + "column-span", + "column-width", + "text-shadow", + "page-break-after", + "page-break-before", + "page-break-inside" + ], + [ + "background", + "background-color", + "background-image", + "background-repeat", + "background-position", + "-ms-background-position-x", + "background-position-x", + "-ms-background-position-y", + "background-position-y", + "-webkit-background-size", + "-moz-background-size", + "-o-background-size", + "background-size", + "-webkit-background-clip", + "-moz-background-clip", + "background-clip", + "background-origin", + "background-attachment", + "box-decoration-break", + "background-blend-mode", + "border", + "border-width", + "border-style", + "border-color", + "border-top", + "border-top-width", + "border-top-style", + "border-top-color", + "border-right", + "border-right-width", + "border-right-style", + "border-right-color", + "border-bottom", + "border-bottom-width", + "border-bottom-style", + "border-bottom-color", + "border-left", + "border-left-width", + "border-left-style", + "border-left-color", + "-webkit-border-radius", + "-moz-border-radius", + "border-radius", + "-webkit-border-top-left-radius", + "-moz-border-radius-topleft", + "border-top-left-radius", + "-webkit-border-top-right-radius", + "-moz-border-radius-topright", + "border-top-right-radius", + "-webkit-border-bottom-right-radius", + "-moz-border-radius-bottomright", + "border-bottom-right-radius", + "-webkit-border-bottom-left-radius", + "-moz-border-radius-bottomleft", + "border-bottom-left-radius", + "-webkit-border-image", + "-moz-border-image", + "-o-border-image", + "border-image", + "-webkit-border-image-source", + "-moz-border-image-source", + "-o-border-image-source", + "border-image-source", + "-webkit-border-image-slice", + "-moz-border-image-slice", + "-o-border-image-slice", + "border-image-slice", + "-webkit-border-image-width", + "-moz-border-image-width", + "-o-border-image-width", + "border-image-width", + "-webkit-border-image-outset", + "-moz-border-image-outset", + "-o-border-image-outset", + "border-image-outset", + "-webkit-border-image-repeat", + "-moz-border-image-repeat", + "-o-border-image-repeat", + "border-image-repeat", + "outline", + "outline-width", + "outline-style", + "outline-color", + "outline-offset", + "-webkit-box-shadow", + "-moz-box-shadow", + "box-shadow", + "-webkit-transform", + "-moz-transform", + "-ms-transform", + "-o-transform", + "transform", + "-webkit-transform-origin", + "-moz-transform-origin", + "-ms-transform-origin", + "-o-transform-origin", + "transform-origin", + "-webkit-backface-visibility", + "-moz-backface-visibility", + "backface-visibility", + "-webkit-perspective", + "-moz-perspective", + "perspective", + "-webkit-perspective-origin", + "-moz-perspective-origin", + "perspective-origin", + "-webkit-transform-style", + "-moz-transform-style", + "transform-style", + "visibility", + "cursor", + "opacity", + "-webkit-filter", + "filter" + ], + [ + "-webkit-transition", + "-moz-transition", + "-ms-transition", + "-o-transition", + "transition", + "-webkit-transition-delay", + "-moz-transition-delay", + "-ms-transition-delay", + "-o-transition-delay", + "transition-delay", + "-webkit-transition-timing-function", + "-moz-transition-timing-function", + "-ms-transition-timing-function", + "-o-transition-timing-function", + "transition-timing-function", + "-webkit-transition-duration", + "-moz-transition-duration", + "-ms-transition-duration", + "-o-transition-duration", + "transition-duration", + "-webkit-transition-property", + "-moz-transition-property", + "-ms-transition-property", + "-o-transition-property", + "transition-property", + "-webkit-animation", + "-moz-animation", + "-ms-animation", + "-o-animation", + "animation", + "-webkit-animation-name", + "-moz-animation-name", + "-ms-animation-name", + "-o-animation-name", + "animation-name", + "-webkit-animation-duration", + "-moz-animation-duration", + "-ms-animation-duration", + "-o-animation-duration", + "animation-duration", + "-webkit-animation-play-state", + "-moz-animation-play-state", + "-ms-animation-play-state", + "-o-animation-play-state", + "animation-play-state", + "-webkit-animation-timing-function", + "-moz-animation-timing-function", + "-ms-animation-timing-function", + "-o-animation-timing-function", + "animation-timing-function", + "-webkit-animation-delay", + "-moz-animation-delay", + "-ms-animation-delay", + "-o-animation-delay", + "animation-delay", + "-webkit-animation-iteration-count", + "-moz-animation-iteration-count", + "-ms-animation-iteration-count", + "-o-animation-iteration-count", + "animation-iteration-count", + "-webkit-animation-direction", + "-moz-animation-direction", + "-ms-animation-direction", + "-o-animation-direction", + "animation-direction" + ], + [ + "quotes", + "counter-reset", + "counter-increment", + "resize", + "-webkit-user-select", + "-moz-user-select", + "-ms-user-select", + "user-select", + "nav-index", + "nav-up", + "nav-right", + "nav-down", + "nav-left", + "pointer-events", + "will-change", + "clip", + "clip-path", + "zoom" + ] + ] +} diff --git a/img/copyright.svg b/img/copyright.svg new file mode 100644 index 0000000..e1cffa9 --- /dev/null +++ b/img/copyright.svg @@ -0,0 +1 @@ + diff --git a/img/icon-facebook.svg b/img/icon-facebook.svg new file mode 100644 index 0000000..77beec6 --- /dev/null +++ b/img/icon-facebook.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icon-instagram.svg b/img/icon-instagram.svg new file mode 100644 index 0000000..74ac48c --- /dev/null +++ b/img/icon-instagram.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icon-twitter.svg b/img/icon-twitter.svg new file mode 100644 index 0000000..d5eae0c --- /dev/null +++ b/img/icon-twitter.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/icon-vkontakte.svg b/img/icon-vkontakte.svg new file mode 100644 index 0000000..f2c7d01 --- /dev/null +++ b/img/icon-vkontakte.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo-full.svg b/img/logo-full.svg new file mode 100644 index 0000000..7319e8a --- /dev/null +++ b/img/logo-full.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/img/logo.svg b/img/logo.svg new file mode 100644 index 0000000..241b8b6 --- /dev/null +++ b/img/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..3ce2730 --- /dev/null +++ b/index.html @@ -0,0 +1,548 @@ + + + + + Стиль кодирования Академии HTML + + + + +
+ + + +

Стиль кодирования Академии HTML

+
+
+

HTML

+

Синтаксис

+
    +
  • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • +
  • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
    • +
  • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
    • +
  • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
    • +
+
+
+
+ 
<!DOCTYPE html>
+<html lang="ru">
+  <head>
+    <title>Страница о коте</title>
+    <meta charset="utf-8">
+  </head>
+  <body>
+    <article class="post">
+      <h1>Красивый кот</h1>
+      <figure class="post-item">
+        <img src="cat.jpg" alt="Изображение кота">
+        <figcaption>Кот красив!</figcaption>
+      </figure>
+    </article>
+  </body>
+</html>
+
+
+
+
+ +
+

Валидность

+

+ Документ должен проходить проверку на валидность. Для проверки используется современный валидатор. +

+
+
+
+

HTML doctype

+

+ В начале страницы обязательно должен быть указан актуальный 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>
+
+
+
+
+
+ +
+

CSS

+

Синтаксис

+
    +
  • После значения свойства обязательно ставится точка с запятой.
    • +
  • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • +
  • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
    • +
  • Названия тегов и свойств в правилах пишутся строчными буквами.
    • +
  • Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
    • +
  • Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
    • +
  • После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен.
    • +
  • После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
    • +
  • До и после комбинатора между селекторами (например, p > a) ставится один пробел.
    • +
  • Каждое объявление в правиле пишется на новой строке.
    • +
  • Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки: +
    .selector {
+  color: #f5f5f5;
+}
+
    • +
  • Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
    • +
  • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
    • +
  • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
    • +
+
+
+
+ 
/* Хорошо */
+.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}
+
+
+
+
+ +
+

Порядок свойств

+

+ Объявления логически связанных свойств группируются в следующем порядке: +

+
    +
  1. Позиционирование
    2. +
  2. Блочная модель
    3. +
  3. Типографика
    4. +
  4. Оформление
    5. +
  5. Анимация
    6. +
  6. Разное
    7. +
+

+ Позиционирование следует первым потому, что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков. +

+

+ Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь. +

+

+ Сгруппированные объявления в правиле отделяются друг от друга пустой строкой. +

+

+ Порядок объявления подробных правил, таких как 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;
+}
+
+
+
+
+ +
+

Имена классов

+
    +
  • Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .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. +

+

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

+

+ Порядок шрифтов следующий: +

+
    +
  1. нестандартный шрифт;
    2. +
  2. веб-безопасный;
    3. +
  3. тип шрифта.
    4. +
+

+ Список веб-безопасных шрифтов можно посмотреть здесь — 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;
+}
+
+
+
+
+ +
+

Указание vertical-align

+

+ Значение vertical-align должно быть явно указано для блоков с display: inline-block. +

+

+ Значение по умолчанию, baseline, может приводить к странному отображению блочно-строчных элементов. Например, когда в ряд стоят несколько элементов с разным количеством строк. +

+

+ Если вы хотите, чтобы элементы выравнивались по умолчанию, то явно укажите для vertical-align значение baseline. Это позволит другим понять, что вы знаете об особенностях отображения элементов с таким выравниванием и задали его намеренно. +

+
+
+
+ 
/* Хорошо */
+.login-button {
+  display: inline-block;
+  vertical-align: baseline;
+}
+
+.grid-item {
+  display: inline-block;
+  vertical-align: top;
+}
+
+/* Плохо */
+.login-button {
+  display: inline-block;
+}
+
+
+
+
+
+
+ + + + diff --git a/js/app.js b/js/app.js new file mode 100644 index 0000000..fa1ea35 --- /dev/null +++ b/js/app.js @@ -0,0 +1 @@ +!function(e){function t(a){if(n[a])return n[a].exports;var r=n[a]={exports:{},id:a,loaded:!1};return e[a].call(r.exports,r,r.exports,t),r.loaded=!0,r.exports}var n={};return t.m=e,t.c=n,t.p="",t(0)}([function(e,t,n){"use strict";n(1)},function(e,t){self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{};var n=function(){var e=/\blang(?:uage)?-(?!\*)(\w+)\b/i,t=self.Prism={util:{encode:function(e){return e instanceof n?new n(e.type,t.util.encode(e.content),e.alias):"Array"===t.util.type(e)?e.map(t.util.encode):e.replace(/&/g,"&").replace(/e.length)break e;if(!(m instanceof r)){c.lastIndex=0;var y=c.exec(m);if(y){p&&(f=y[1].length);var v=y.index-1+f,y=y[0].slice(f),w=y.length,k=v+w,b=m.slice(0,v+1),x=m.slice(k+1),A=[h,1];b&&A.push(b);var N=new r(l,g?t.tokenize(y,g):y,d);A.push(N),x&&A.push(x),Array.prototype.splice.apply(i,A)}}}}}return i},hooks:{all:{},add:function(e,n){var a=t.hooks.all;a[e]=a[e]||[],a[e].push(n)},run:function(e,n){var a=t.hooks.all[e];if(a&&a.length)for(var r,i=0;r=a[i++];)r(n)}}},n=t.Token=function(e,t,n){this.type=e,this.content=t,this.alias=n};if(n.stringify=function(e,a,r){if("string"==typeof e)return e;if("Array"===t.util.type(e))return e.map(function(t){return n.stringify(t,a,e)}).join("");var i={type:e.type,content:n.stringify(e.content,a,r),tag:"span",classes:["token",e.type],attributes:{},language:a,parent:r};if("comment"==i.type&&(i.attributes.spellcheck="true"),e.alias){var s="Array"===t.util.type(e.alias)?e.alias:[e.alias];Array.prototype.push.apply(i.classes,s)}t.hooks.run("wrap",i);var l="";for(var o in i.attributes)l+=o+'="'+(i.attributes[o]||"")+'"';return"<"+i.tag+' class="'+i.classes.join(" ")+'" '+l+">"+i.content+""},!self.document)return self.addEventListener?(self.addEventListener("message",function(e){var n=JSON.parse(e.data),a=n.language,r=n.code;self.postMessage(JSON.stringify(t.util.encode(t.tokenize(r,t.languages[a])))),self.close()},!1),self.Prism):self.Prism;var a=document.getElementsByTagName("script");return a=a[a.length-1],a&&(t.filename=a.src,document.addEventListener&&!a.hasAttribute("data-manual")&&document.addEventListener("DOMContentLoaded",t.highlightAll)),self.Prism}();"undefined"!=typeof e&&e.exports&&(e.exports=n),n.languages.markup={comment://,prolog:/<\?.+?\?>/,doctype://,cdata://i,tag:{pattern:/<\/?[\w:-]+\s*(?:\s+[\w:-]+(?:=(?:("|')(\\?[\w\W])*?\1|[^\s'">=]+))?\s*)*\/?>/i,inside:{tag:{pattern:/^<\/?[\w:-]+/i,inside:{punctuation:/^<\/?/,namespace:/^[\w-]+?:/}},"attr-value":{pattern:/=(?:('|")[\w\W]*?(\1)|[^\s>]+)/i,inside:{punctuation:/=|>|"/}},punctuation:/\/?>/,"attr-name":{pattern:/[\w:-]+/,inside:{namespace:/^[\w-]+?:/}}}},entity:/&#?[\da-z]{1,8};/i},n.hooks.add("wrap",function(e){"entity"===e.type&&(e.attributes.title=e.content.replace(/&/,"&"))}),n.languages.css={comment:/\/\*[\w\W]*?\*\//,atrule:{pattern:/@[\w-]+?.*?(;|(?=\s*\{))/i,inside:{punctuation:/[;:]/}},url:/url\((?:(["'])(\\\n|\\?.)*?\1|.*?)\)/i,selector:/[^\{\}\s][^\{\};]*(?=\s*\{)/,string:/("|')(\\\n|\\?.)*?\1/,property:/(\b|\B)[\w-]+(?=\s*:)/i,important:/\B!important\b/i,punctuation:/[\{\};:]/,"function":/[-a-z0-9]+(?=\()/i},n.languages.markup&&(n.languages.insertBefore("markup","tag",{style:{pattern:/[\w\W]*?<\/style>/i,inside:{tag:{pattern:/|<\/style>/i,inside:n.languages.markup.tag.inside},rest:n.languages.css},alias:"language-css"}}),n.languages.insertBefore("inside","attr-value",{"style-attr":{pattern:/\s*style=("|').*?\1/i,inside:{"attr-name":{pattern:/^\s*style/i,inside:n.languages.markup.tag.inside},punctuation:/^\s*=\s*['"]|['"]\s*$/,"attr-value":{pattern:/.+/i,inside:n.languages.css}},alias:"language-css"}},n.languages.markup.tag)),n.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\w\W]*?\*\//,lookbehind:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0}],string:/("|')(\\\n|\\?.)*?\1/,"class-name":{pattern:/((?:(?:class|interface|extends|implements|trait|instanceof|new)\s+)|(?:catch\s+\())[a-z0-9_\.\\]+/i,lookbehind:!0,inside:{punctuation:/(\.|\\)/}},keyword:/\b(if|else|while|do|for|return|in|instanceof|function|new|try|throw|catch|finally|null|break|continue)\b/,"boolean":/\b(true|false)\b/,"function":{pattern:/[a-z0-9_]+\(/i,inside:{punctuation:/\(/}},number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee]-?\d+)?)\b/,operator:/[-+]{1,2}|!|<=?|>=?|={1,3}|&{1,2}|\|?\||\?|\*|\/|~|\^|%/,ignore:/&(lt|gt|amp);/i,punctuation:/[{}[\];(),.:]/},n.languages.javascript=n.languages.extend("clike",{keyword:/\b(break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|false|finally|for|function|get|if|implements|import|in|instanceof|interface|let|new|null|package|private|protected|public|return|set|static|super|switch|this|throw|true|try|typeof|var|void|while|with|yield)\b/,number:/\b-?(0x[\dA-Fa-f]+|\d*\.?\d+([Ee][+-]?\d+)?|NaN|-?Infinity)\b/,"function":/(?!\d)[a-z0-9_$]+(?=\()/i}),n.languages.insertBefore("javascript","keyword",{regex:{pattern:/(^|[^\/])\/(?!\/)(\[.+?]|\\.|[^\/\r\n])+\/[gim]{0,3}(?=\s*($|[\r\n,.;})]))/,lookbehind:!0}}),n.languages.markup&&n.languages.insertBefore("markup","tag",{script:{pattern:/[\w\W]*?<\/script>/i,inside:{tag:{pattern:/|<\/script>/i,inside:n.languages.markup.tag.inside},rest:n.languages.javascript},alias:"language-javascript"}}),function(){self.Prism&&self.document&&document.querySelector&&(self.Prism.fileHighlight=function(){var e={js:"javascript",html:"markup",svg:"markup",xml:"markup",py:"python",rb:"ruby",ps1:"powershell",psm1:"powershell"};Array.prototype.slice.call(document.querySelectorAll("pre[data-src]")).forEach(function(t){var a=t.getAttribute("data-src"),r=(a.match(/\.(\w+)$/)||[,""])[1],i=e[r]||r,s=document.createElement("code");s.className="language-"+i,t.textContent="",s.textContent="Loading…",t.appendChild(s);var l=new XMLHttpRequest;l.open("GET",a,!0),l.onreadystatechange=function(){4==l.readyState&&(l.status<400&&l.responseText?(s.textContent=l.responseText,n.highlightElement(s)):l.status>=400?s.textContent="✖ Error "+l.status+" while fetching file: "+l.statusText:s.textContent="✖ Error: File does not exist or is empty")},l.send(null)})},self.Prism.fileHighlight())}()}]); From 98df6423f3bf6e33ef6199e2919fb8455043cd9a Mon Sep 17 00:00:00 2001 From: Alexey Simonenko Date: Fri, 2 Oct 2015 01:05:38 +0300 Subject: [PATCH 02/56] =?UTF-8?q?=F0=9F=92=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 2 +- index.html | 14 +++++++------- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/css/style.css b/css/style.css index 73641b6..9284f4c 100644 --- a/css/style.css +++ b/css/style.css @@ -1 +1 @@ -img,legend{border:0}legend,td,th{padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,pre,section,summary{display:block}pre,textarea{overflow:auto}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none} input[type=reset],button,html input[type=button],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{}table{border-collapse:collapse;border-spacing:0}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;white-space:pre-wrap}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html{font-size:16px}body{margin:0;font:17px/1.6 Helvetica,Arial,sans-serif;color:#5a5a5a;background-color:#fff}a:link,a:visited{color:#5a5a5a;text-decoration:underline}a:hover{text-decoration:none}h1,h2,h4{margin:0;font-weight:400;color:#424242;letter-spacing:-.025em}h2,h4{line-height:1.2}h1{font-size:3rem;line-height:1.3}h2{font-size:2.5rem}h4{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:.2rem}pre{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:.25rem}pre[class*=language-]{overflow:auto;margin:0;padding:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:initial}header{padding:3rem 1rem 6rem;text-align:center;background-color:#2e3191}.chapter h2,.chapter-part-col{padding:2rem 1rem}header h1{margin:1rem 0 .25rem;color:#fff}.logo{width:100px;height:127px}.chapter h2{background-color:#e5e5e5}.chapter-part{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-bottom:1px solid #e5e5e5}.chapter-part-col+.chapter-part-col{background-color:#fafafa;border-top:1px solid #e5e5e5}.chapter-part-col figure{margin:0 1rem 0 0}.chapter-part-col p{max-width:32rem}footer{padding:2rem;background-color:#2d2d44}.contacts{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.logo-full{display:inline-block;width:161px}.social-icons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:.5rem 0 1rem}.github,.social-icons{font-size:0}.icon{min-width:2rem;min-height:2rem;background-repeat:no-repeat;background-position:center;background-size:calc(100% - 5px);opacity:.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/copyright.svg)}@media (min-width:38em){header{padding-top:4rem;padding-bottom:8rem}.chapter h2{padding:2rem 2rem 2.5rem}.chapter-part-col{padding:2rem}}@media (min-width:48em){html{font-size:20px}.chapter h2{padding:2rem 3rem 2.5rem}.chapter-part{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.chapter-part-col{width:50%;padding:3rem}.chapter-part-col+.chapter-part-col{border-top:0}}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}} +img,legend{border:0}legend,td,th{padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,pre,section,summary{display:block}pre,textarea{overflow:auto}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none} input[type=reset],button,html input[type=button],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{}table{border-collapse:collapse;border-spacing:0}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;white-space:pre-wrap}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html{font-size:16px}body{margin:0;font:17px/1.6 Helvetica,Arial,sans-serif;color:#5a5a5a;background-color:#fff}a:link,a:visited{color:#5a5a5a;text-decoration:underline}a:hover{text-decoration:none}h1,h2,h4{margin:0;font-weight:400;color:#424242;letter-spacing:-.025em}h2,h4{line-height:1.2}h1{font-size:3rem;line-height:1.3}h2{font-size:2.5rem}h4{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:.2rem}pre{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:.25rem}pre[class*=language-]{overflow:auto;margin:0;padding:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:initial}header{padding:3rem 1rem 6rem;text-align:center;background-color:#2e3191}.chapter h2,.chapter-part-col{padding:2rem 1rem}header h1{margin:1rem 0 .25rem;color:#fff}.logo{width:100px;height:127px}.chapter h2{background-color:#e5e5e5}.chapter-part{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-bottom:1px solid #e5e5e5}.chapter-part-col+.chapter-part-col{background-color:#fafafa;border-top:1px solid #e5e5e5}.chapter-part-col figure{margin:0 1rem 0 0}.chapter-part-col p{max-width:32rem}footer{padding:2rem;background-color:#2d2d44}.contacts{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.logo-full{display:inline-block;width:161px}.social-icons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:.5rem 0 1rem}.github,.social-icons{font-size:0}.icon{min-width:2rem;min-height:2rem;background-repeat:no-repeat;background-position:center;background-size:calc(100% - 5px);opacity:.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/copyright.svg)}@media (min-width:38em){header{padding-top:4rem;padding-bottom:8rem}.chapter h2{padding:2rem 2rem 2.5rem}.chapter-part-col{padding:2rem}}@media (min-width:48em){html{font-size:20px}.chapter h2{padding:2rem 3rem 2.5rem}.chapter-part{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.chapter-part-col{width:50%;padding:3rem}.chapter-part-col+.chapter-part-col{border-top:0}}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}} diff --git a/index.html b/index.html index 3ce2730..e6ae2fa 100644 --- a/index.html +++ b/index.html @@ -3,13 +3,13 @@ Стиль кодирования Академии HTML - +
- +

Стиль кодирования Академии HTML

@@ -17,7 +17,7 @@

Стиль кодирования Академии HTML

HTML

Синтаксис

    -
  • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • +
  • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
  • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
  • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
  • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
    • @@ -272,7 +272,7 @@

    CSS

    Синтаксис

    • После значения свойства обязательно ставится точка с запятой.
      • -
    • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
      • +
    • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
    • Названия тегов и свойств в правилах пишутся строчными буквами.
    • Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
      • @@ -288,7 +288,7 @@

      CSS

    • Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
    • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
      • -
    • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
      • +
    • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
    @@ -518,7 +518,7 @@

    CSS

- + From 48f3e1665e2d23d4c8fe2daed343e5f7929dbfcf Mon Sep 17 00:00:00 2001 From: Alexey Simonenko Date: Fri, 2 Oct 2015 16:26:39 +0300 Subject: [PATCH 03/56] =?UTF-8?q?=E2=AC=86=EF=B8=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 2 +- files/.editorconfig | 17 -- files/csscomb.json | 380 -------------------------------------------- img/bane.svg | 1 + index.html | 48 +----- 5 files changed, 9 insertions(+), 439 deletions(-) delete mode 100644 files/.editorconfig delete mode 100644 files/csscomb.json create mode 100644 img/bane.svg diff --git a/css/style.css b/css/style.css index 9284f4c..a9dfe27 100644 --- a/css/style.css +++ b/css/style.css @@ -1 +1 @@ -img,legend{border:0}legend,td,th{padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,pre,section,summary{display:block}pre,textarea{overflow:auto}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none} input[type=reset],button,html input[type=button],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{}table{border-collapse:collapse;border-spacing:0}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;white-space:pre-wrap}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html{font-size:16px}body{margin:0;font:17px/1.6 Helvetica,Arial,sans-serif;color:#5a5a5a;background-color:#fff}a:link,a:visited{color:#5a5a5a;text-decoration:underline}a:hover{text-decoration:none}h1,h2,h4{margin:0;font-weight:400;color:#424242;letter-spacing:-.025em}h2,h4{line-height:1.2}h1{font-size:3rem;line-height:1.3}h2{font-size:2.5rem}h4{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:.2rem}pre{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:.25rem}pre[class*=language-]{overflow:auto;margin:0;padding:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:initial}header{padding:3rem 1rem 6rem;text-align:center;background-color:#2e3191}.chapter h2,.chapter-part-col{padding:2rem 1rem}header h1{margin:1rem 0 .25rem;color:#fff}.logo{width:100px;height:127px}.chapter h2{background-color:#e5e5e5}.chapter-part{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-bottom:1px solid #e5e5e5}.chapter-part-col+.chapter-part-col{background-color:#fafafa;border-top:1px solid #e5e5e5}.chapter-part-col figure{margin:0 1rem 0 0}.chapter-part-col p{max-width:32rem}footer{padding:2rem;background-color:#2d2d44}.contacts{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.logo-full{display:inline-block;width:161px}.social-icons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:.5rem 0 1rem}.github,.social-icons{font-size:0}.icon{min-width:2rem;min-height:2rem;background-repeat:no-repeat;background-position:center;background-size:calc(100% - 5px);opacity:.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/copyright.svg)}@media (min-width:38em){header{padding-top:4rem;padding-bottom:8rem}.chapter h2{padding:2rem 2rem 2.5rem}.chapter-part-col{padding:2rem}}@media (min-width:48em){html{font-size:20px}.chapter h2{padding:2rem 3rem 2.5rem}.chapter-part{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.chapter-part-col{width:50%;padding:3rem}.chapter-part-col+.chapter-part-col{border-top:0}}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}} +img,legend{border:0}legend,td,th{padding:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,pre,section,summary{display:block}pre,textarea{overflow:auto}html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,optgroup,strong{font-weight:700}dfn{font-style:italic}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{box-sizing:content-box;height:0}code,kbd,pre,samp{font-family:monospace,monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none} input[type=reset],button,html input[type=button],input[type=submit]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type=checkbox],input[type=radio]{box-sizing:border-box;padding:0}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{height:auto}input[type=search]{-webkit-appearance:textfield;box-sizing:content-box}input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid silver;margin:0 2px;padding:.35em .625em .75em}legend{}table{border-collapse:collapse;border-spacing:0}code[class*=language-],pre[class*=language-]{color:#000;text-shadow:0 1px #fff;font-family:Consolas,Monaco,'Andale Mono',monospace;direction:ltr;text-align:left;word-spacing:normal;word-break:normal;line-height:1.5;-moz-tab-size:4;tab-size:4;-webkit-hyphens:none;-moz-hyphens:none;-ms-hyphens:none;hyphens:none;white-space:pre-wrap}code[class*=language-] ::-moz-selection,code[class*=language-]::-moz-selection,pre[class*=language-] ::-moz-selection,pre[class*=language-]::-moz-selection{text-shadow:none;background:#b3d4fc}code[class*=language-] ::selection,code[class*=language-]::selection,pre[class*=language-] ::selection,pre[class*=language-]::selection{text-shadow:none;background:#b3d4fc}:not(pre)>code[class*=language-]{padding:.1em;border-radius:.3em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#708090}.token.punctuation{color:#999}.namespace{opacity:.7}.token.boolean,.token.constant,.token.deleted,.token.number,.token.property,.token.symbol,.token.tag{color:#905}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#690}.language-css .token.string,.style .token.string,.token.entity,.token.operator,.token.url{color:#a67f59;background:hsla(0,0%,100%,.5)}.token.atrule,.token.attr-value,.token.keyword{color:#07a}.token.function{color:#DD4A68}.token.important,.token.regex,.token.variable{color:#e90}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}.token.entity{cursor:help}html{font-size:16px}body{margin:0;font:17px/1.6 Helvetica,Arial,sans-serif;color:#5a5a5a;background-color:#fff}a:link,a:visited{color:#5a5a5a;text-decoration:underline}a:hover{text-decoration:none}h1,h2,h4{margin:0;font-weight:400;color:#424242;letter-spacing:-.025em}h2,h4{line-height:1.2}h1{font-size:3rem;line-height:1.3}h2{font-size:2.5rem}h4{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:.2rem}pre{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:.25rem}pre[class*=language-]{overflow:auto;margin:0;padding:0}:not(pre)>code[class*=language-],pre[class*=language-]{background:initial}header{padding:1rem 1rem 6rem;text-align:center;background-color:#312785;background-image:repeating-linear-gradient(150deg,rgba(255,255,255,.06),rgba(255,255,255,.06) 1px,transparent 0,transparent 41px),repeating-linear-gradient(-150deg,rgba(255,255,255,.06),rgba(255,255,255,.06) 1px,transparent 0,transparent 41px)}.chapter h2,.chapter-part-col{padding:2rem 1rem}header h1{margin:0 0 .25rem;color:#fff}.logo{width:300px}.chapter h2{background-color:#e5e5e5}.chapter-part{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;border-bottom:1px solid #e5e5e5}.chapter-part-col+.chapter-part-col{background-color:#fafafa;border-top:1px solid #e5e5e5}.chapter-part-col figure{margin:0 1rem 0 0}.chapter-part-col p{max-width:32rem}footer{padding:2rem;background-color:#2d2d44}.contacts{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.logo-full{display:inline-block;width:161px}.social-icons{display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;-webkit-align-items:center;-ms-flex-align:center;align-items:center;margin:.5rem 0 1rem}.github,.social-icons{font-size:0}.icon{min-width:2rem;min-height:2rem;background-repeat:no-repeat;background-position:center;background-size:calc(100% - 5px);opacity:.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/copyright.svg)}@media (min-width:38em){header{padding-bottom:4rem}.chapter h2{padding:2rem 2rem 2.5rem}.chapter-part-col{padding:2rem}}@media (min-width:48em){html{font-size:20px}.chapter h2{padding:2rem 3rem 2.5rem}.chapter-part{-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.chapter-part-col{width:50%;padding:3rem}.chapter-part-col+.chapter-part-col{border-top:0}}@media print{code[class*=language-],pre[class*=language-]{text-shadow:none}} diff --git a/files/.editorconfig b/files/.editorconfig deleted file mode 100644 index 0bfd9ad..0000000 --- a/files/.editorconfig +++ /dev/null @@ -1,17 +0,0 @@ -; http://editorconfig.org - -root = true - -[*] -charset = utf-8 -indent_style = space -indent_size = 2 -end_of_line = lf -trim_trailing_whitespace = true -insert_final_newline = true - -[*.{go,py,rb,php}] -indent_size = 4 - -[*.md] -trim_trailing_whitespace = false diff --git a/files/csscomb.json b/files/csscomb.json deleted file mode 100644 index 74429f2..0000000 --- a/files/csscomb.json +++ /dev/null @@ -1,380 +0,0 @@ -{ - "exclude": [ - ".git/**", - "node_modules/**" - ], - - "always-semicolon": true, - "block-indent": " ", - "color-case": "lower", - "color-shorthand": false, - "element-case": "lower", - "eof-newline": true, - "leading-zero": true, - "quotes": "double", - "remove-empty-rulesets": true, - "sort-order-fallback": "abc", - "space-before-colon": "", - "space-after-colon": " ", - "space-before-combinator": " ", - "space-after-combinator": " ", - "space-between-declarations": "\n", - "space-before-opening-brace": " ", - "space-after-opening-brace": "\n", - "space-before-selector-delimiter": "", - "space-after-selector-delimiter": "\n", - "space-before-closing-brace": "\n", - "strip-spaces": true, - "tab-size": 2, - "unitless-zero": true, - "vendor-prefix-align": true, - "sort-order": [ - [ - "content", - "position", - "top", - "right", - "bottom", - "left", - "z-index" - ], - [ - "display", - "-webkit-flex", - "-ms-flex", - "flex", - "-webkit-flex-grow", - "flex-grow", - "-webkit-flex-shrink", - "flex-shrink", - "-webkit-flex-basis", - "flex-basis", - "-webkit-flex-flow", - "flex-flow", - "-webkit-flex-direction", - "-ms-flex-direction", - "flex-direction", - "-webkit-flex-wrap", - "flex-wrap", - "-webkit-justify-content", - "justify-content", - "-webkit-align-content", - "align-content", - "-webkit-align-items", - "align-items", - "-webkit-order", - "-ms-flex-order", - "order", - "-webkit-align-self", - "align-self", - "float", - "clear", - "-webkit-box-sizing", - "-moz-box-sizing", - "box-sizing", - "width", - "min-width", - "max-width", - "height", - "min-height", - "max-height", - "margin", - "margin-top", - "margin-right", - "margin-bottom", - "margin-left", - "padding", - "padding-top", - "padding-right", - "padding-bottom", - "padding-left", - "overflow", - "-ms-overflow-x", - "overflow-x", - "-ms-overflow-y", - "overflow-y", - "-webkit-overflow-scrolling" - ], - [ - "list-style", - "list-style-position", - "list-style-type", - "list-style-image", - "border-collapse", - "border-spacing", - "table-layout", - "empty-cells", - "caption-side", - "font", - "font-weight", - "font-size", - "line-height", - "font-family", - "vertical-align", - "text-align", - "direction", - "color", - "text-transform", - "text-decoration", - "font-style", - "font-variant", - "font-size-adjust", - "font-stretch", - "font-effect", - "font-emphasize", - "font-emphasize-position", - "font-emphasize-style", - "font-smooth", - "-webkit-text-align-last", - "-moz-text-align-last", - "-ms-text-align-last", - "text-align-last", - "letter-spacing", - "word-spacing", - "white-space", - "text-emphasis", - "text-emphasis-color", - "text-emphasis-style", - "text-emphasis-position", - "text-indent", - "-ms-text-justify", - "text-justify", - "-ms-writing-mode", - "text-outline", - "text-wrap", - "-ms-text-overflow", - "text-overflow", - "text-overflow-ellipsis", - "text-overflow-mode", - "text-orientation", - "-ms-word-wrap", - "word-wrap", - "-ms-word-break", - "word-break", - "-moz-tab-size", - "-o-tab-size", - "tab-size", - "-webkit-hyphens", - "-moz-hyphens", - "hyphens", - "unicode-bidi", - "columns", - "column-count", - "column-fill", - "column-gap", - "column-rule", - "column-rule-color", - "column-rule-style", - "column-rule-width", - "column-span", - "column-width", - "text-shadow", - "page-break-after", - "page-break-before", - "page-break-inside" - ], - [ - "background", - "background-color", - "background-image", - "background-repeat", - "background-position", - "-ms-background-position-x", - "background-position-x", - "-ms-background-position-y", - "background-position-y", - "-webkit-background-size", - "-moz-background-size", - "-o-background-size", - "background-size", - "-webkit-background-clip", - "-moz-background-clip", - "background-clip", - "background-origin", - "background-attachment", - "box-decoration-break", - "background-blend-mode", - "border", - "border-width", - "border-style", - "border-color", - "border-top", - "border-top-width", - "border-top-style", - "border-top-color", - "border-right", - "border-right-width", - "border-right-style", - "border-right-color", - "border-bottom", - "border-bottom-width", - "border-bottom-style", - "border-bottom-color", - "border-left", - "border-left-width", - "border-left-style", - "border-left-color", - "-webkit-border-radius", - "-moz-border-radius", - "border-radius", - "-webkit-border-top-left-radius", - "-moz-border-radius-topleft", - "border-top-left-radius", - "-webkit-border-top-right-radius", - "-moz-border-radius-topright", - "border-top-right-radius", - "-webkit-border-bottom-right-radius", - "-moz-border-radius-bottomright", - "border-bottom-right-radius", - "-webkit-border-bottom-left-radius", - "-moz-border-radius-bottomleft", - "border-bottom-left-radius", - "-webkit-border-image", - "-moz-border-image", - "-o-border-image", - "border-image", - "-webkit-border-image-source", - "-moz-border-image-source", - "-o-border-image-source", - "border-image-source", - "-webkit-border-image-slice", - "-moz-border-image-slice", - "-o-border-image-slice", - "border-image-slice", - "-webkit-border-image-width", - "-moz-border-image-width", - "-o-border-image-width", - "border-image-width", - "-webkit-border-image-outset", - "-moz-border-image-outset", - "-o-border-image-outset", - "border-image-outset", - "-webkit-border-image-repeat", - "-moz-border-image-repeat", - "-o-border-image-repeat", - "border-image-repeat", - "outline", - "outline-width", - "outline-style", - "outline-color", - "outline-offset", - "-webkit-box-shadow", - "-moz-box-shadow", - "box-shadow", - "-webkit-transform", - "-moz-transform", - "-ms-transform", - "-o-transform", - "transform", - "-webkit-transform-origin", - "-moz-transform-origin", - "-ms-transform-origin", - "-o-transform-origin", - "transform-origin", - "-webkit-backface-visibility", - "-moz-backface-visibility", - "backface-visibility", - "-webkit-perspective", - "-moz-perspective", - "perspective", - "-webkit-perspective-origin", - "-moz-perspective-origin", - "perspective-origin", - "-webkit-transform-style", - "-moz-transform-style", - "transform-style", - "visibility", - "cursor", - "opacity", - "-webkit-filter", - "filter" - ], - [ - "-webkit-transition", - "-moz-transition", - "-ms-transition", - "-o-transition", - "transition", - "-webkit-transition-delay", - "-moz-transition-delay", - "-ms-transition-delay", - "-o-transition-delay", - "transition-delay", - "-webkit-transition-timing-function", - "-moz-transition-timing-function", - "-ms-transition-timing-function", - "-o-transition-timing-function", - "transition-timing-function", - "-webkit-transition-duration", - "-moz-transition-duration", - "-ms-transition-duration", - "-o-transition-duration", - "transition-duration", - "-webkit-transition-property", - "-moz-transition-property", - "-ms-transition-property", - "-o-transition-property", - "transition-property", - "-webkit-animation", - "-moz-animation", - "-ms-animation", - "-o-animation", - "animation", - "-webkit-animation-name", - "-moz-animation-name", - "-ms-animation-name", - "-o-animation-name", - "animation-name", - "-webkit-animation-duration", - "-moz-animation-duration", - "-ms-animation-duration", - "-o-animation-duration", - "animation-duration", - "-webkit-animation-play-state", - "-moz-animation-play-state", - "-ms-animation-play-state", - "-o-animation-play-state", - "animation-play-state", - "-webkit-animation-timing-function", - "-moz-animation-timing-function", - "-ms-animation-timing-function", - "-o-animation-timing-function", - "animation-timing-function", - "-webkit-animation-delay", - "-moz-animation-delay", - "-ms-animation-delay", - "-o-animation-delay", - "animation-delay", - "-webkit-animation-iteration-count", - "-moz-animation-iteration-count", - "-ms-animation-iteration-count", - "-o-animation-iteration-count", - "animation-iteration-count", - "-webkit-animation-direction", - "-moz-animation-direction", - "-ms-animation-direction", - "-o-animation-direction", - "animation-direction" - ], - [ - "quotes", - "counter-reset", - "counter-increment", - "resize", - "-webkit-user-select", - "-moz-user-select", - "-ms-user-select", - "user-select", - "nav-index", - "nav-up", - "nav-right", - "nav-down", - "nav-left", - "pointer-events", - "will-change", - "clip", - "clip-path", - "zoom" - ] - ] -} diff --git a/img/bane.svg b/img/bane.svg new file mode 100644 index 0000000..2e5cc47 --- /dev/null +++ b/img/bane.svg @@ -0,0 +1 @@ + diff --git a/index.html b/index.html index e6ae2fa..112fae8 100644 --- a/index.html +++ b/index.html @@ -2,22 +2,22 @@ - Стиль кодирования Академии HTML + Стиль кода Академии HTML
- + -

Стиль кодирования Академии HTML

+

Стиль кода Академии HTML

HTML

Синтаксис

    -
  • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • +
  • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
  • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
  • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
  • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
    • @@ -272,7 +272,7 @@

    CSS

    Синтаксис

    • После значения свойства обязательно ставится точка с запятой.
      • -
    • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
      • +
    • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
    • Названия тегов и свойств в правилах пишутся строчными буквами.
    • Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
      • @@ -288,7 +288,7 @@

      CSS

    • Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
    • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
      • -
    • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
      • +
    • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
    @@ -481,44 +481,10 @@

    CSS

    - -
    -

    Указание vertical-align

    -

    - Значение vertical-align должно быть явно указано для блоков с display: inline-block. -

    -

    - Значение по умолчанию, baseline, может приводить к странному отображению блочно-строчных элементов. Например, когда в ряд стоят несколько элементов с разным количеством строк. -

    -

    - Если вы хотите, чтобы элементы выравнивались по умолчанию, то явно укажите для vertical-align значение baseline. Это позволит другим понять, что вы знаете об особенностях отображения элементов с таким выравниванием и задали его намеренно. -

    -
    -
    -
    - 
    /* Хорошо */
-.login-button {
-  display: inline-block;
-  vertical-align: baseline;
-}
-
-.grid-item {
-  display: inline-block;
-  vertical-align: top;
-}
-
-/* Плохо */
-.login-button {
-  display: inline-block;
-}
-
    -
    -
    -
From 3a5df0dde3cb2b8a35c9558887d036e9a7f1eaf4 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Mon, 21 Dec 2020 22:44:49 +0300 Subject: [PATCH 27/56] =?UTF-8?q?=D0=98=D1=81=D0=BF=D1=80=D0=B0=D0=B2?= =?UTF-8?q?=D0=BB=D1=8F=D0=B5=D1=82=20=D1=81=D1=81=D1=8B=D0=BB=D0=BA=D1=83?= =?UTF-8?q?=20=D0=BD=D0=B0=20=D0=B1=D0=BB=D0=BE=D0=BA?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (cherry picked from commit 864d391325a136d24fece46a1ddb86b4edadcd17) --- html-css.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/html-css.html b/html-css.html index cc74abe..d6cbdb4 100644 --- a/html-css.html +++ b/html-css.html @@ -545,7 +545,7 @@

Варианты шрифта

-

Доступное скрытие

+

Доступное скрытие

Для того, чтобы контент был скрыт от глаз, но доступен для скринридеров и поисковиков его нужно скрывать используя утилитарный класс visually-hidden.

From 88beeac1142b797aa57dd38122b711bdbf662d68 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 22 Dec 2020 13:04:06 +0300 Subject: [PATCH 28/56] =?UTF-8?q?=D0=94=D0=B5=D0=BB=D0=B0=D0=B5=D1=82=20?= =?UTF-8?q?=D1=81=D0=BA=D1=80=D0=BE=D0=BB=D0=BB=20=D0=BF=D0=BB=D0=B0=D0=B2?= =?UTF-8?q?=D0=BD=D1=8B=D0=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (cherry picked from commit 875e1f72066ae2fab9dd46029f259c3727f3b12e) --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index 87eeb07..db098b5 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,6 @@ html { font-size: 16px; + scroll-behavior: smooth; } body { From 7e2200c5db38861b227440a189ed286038942720 Mon Sep 17 00:00:00 2001 From: Nikolai Shabalin Date: Tue, 22 Dec 2020 13:08:17 +0300 Subject: [PATCH 29/56] =?UTF-8?q?=D0=A7=D0=B8=D0=BD=D0=B8=D1=82=20=D1=81?= =?UTF-8?q?=D0=BC=D0=B5=D1=89=D0=B5=D0=BD=D0=B8=D0=B5=20=D1=81=D0=BA=D1=80?= =?UTF-8?q?=D0=BE=D0=BB=D0=BB=D0=B0=20=D0=BA=20=D1=8D=D0=BB=D0=B5=D0=BC?= =?UTF-8?q?=D0=B5=D0=BD=D1=82=D1=83?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit (cherry picked from commit afc18c9ee1a8d7c15e222fd09fe9d95ebc31c270) --- css/style.css | 1 + 1 file changed, 1 insertion(+) diff --git a/css/style.css b/css/style.css index db098b5..1765483 100644 --- a/css/style.css +++ b/css/style.css @@ -49,6 +49,7 @@ h2 { h3 { font-size: 1.75rem; + scroll-margin-top: 60px; } code, From 81c15d3013033f3bb7b187c9b3ad32965a982149 Mon Sep 17 00:00:00 2001 From: Nick Petrenko <63558439+extendsnull@users.noreply.github.com> Date: Wed, 13 Jan 2021 23:04:41 +0200 Subject: [PATCH 30/56] =?UTF-8?q?=D0=94=D0=BE=D0=B1=D0=B0=D0=B2=D0=BB?= =?UTF-8?q?=D1=8F=D0=B5=D1=82=20=D1=81=D0=B0=D0=B9=D0=B4=D0=B1=D0=B0=D1=80?= =?UTF-8?q?=20=D1=81=20=D0=BD=D0=B0=D0=B2=D0=B8=D0=B3=D0=B0=D1=86=D0=B8?= =?UTF-8?q?=D0=B5=D0=B9=20(#49)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Добавляет сайдбар с навигацией * Возвращает исходные размеры текста. * Удаляет ненужные стили * Изменяет scroll-margin-top у заголовков * Изменяет адрес ссылки с котиком * Форматирует отступы для листингов кода * Форматирует отступы в листингах кода (cherry picked from commit 6075210f08a33cd0ce7b08504e3bbd201367029f) --- css/style.css | 159 ++++++++++- html-css.html | 699 ++++++++++++++++++++++++------------------------ index.html | 2 +- javascript.html | 662 +++++++++++++++++++++++---------------------- 4 files changed, 840 insertions(+), 682 deletions(-) diff --git a/css/style.css b/css/style.css index 1765483..acb48a7 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,9 @@ +*, +*::before, +*::after { + box-sizing: border-box; +} + html { font-size: 16px; scroll-behavior: smooth; @@ -14,12 +20,14 @@ body { a:link, a:visited { - color: #5a5a5a; - text-decoration: underline; + color: #3f3ccb; + text-decoration: none; } -a:hover { - text-decoration: none; +a:hover, +a:focus { + color: #302683; + text-decoration: underline; } h1, @@ -49,7 +57,7 @@ h2 { h3 { font-size: 1.75rem; - scroll-margin-top: 60px; + scroll-margin-top: 20px; } code, @@ -155,12 +163,62 @@ header a:visited { height: 300px; } -.chapter h2 { +.guide-content { + display: flex; + flex-wrap: wrap; +} + +.sidebar { + display: flex; + flex-direction: column; + + width: 100%; +} + +.sidebar a { + display: block; + color: #5a5a5a; +} + +.sidebar a:hover { + color: #3f3ccb; +} + +.sidebar-col { padding: 2rem 1rem; +} + +.sidebar-col + .sidebar-col { + border-top: 1px solid #e5e5e5; +} + +.sidebar-col > a { + font-size: 1.75rem; + line-height: 1.25; +} +.sidebar-menu { + padding-left: 1rem; +} + +.chapters { + width: 100%; +} + +.chapter h2 { + padding: 2rem 1rem; + word-break: break-word; background-color: #e5e5e5; } +.chapter h3[id]::before { + display: block; + height: 2rem; + margin-top: -2rem; + visibility: hidden; + content: ""; +} + .chapter-part { display: flex; flex-direction: column; @@ -275,6 +333,22 @@ footer { } @media (min-width: 48em) { + .sidebar { + flex-direction: row; + flex-wrap: wrap; + + padding: 2rem 0; + } + + .sidebar-col { + width: 50%; + padding: 1rem 3rem; + } + + .sidebar-col + .sidebar-col { + border-top: 0; + } + .chapter h2 { padding: 2rem 3rem 2.5rem; } @@ -285,7 +359,7 @@ footer { .chapter-part-col { width: 50%; - padding: 3rem; + padding: 3rem 1.5rem; } .chapter-part-col--full-width { @@ -297,6 +371,77 @@ footer { } } +@media (min-width: 75em) { + .chapters { + width: calc(100% - 230px); + } + + .sidebar { + position: sticky; + top: 0; + bottom: 0; + + flex-direction: column; + flex-wrap: nowrap; + align-self: flex-start; + + width: 230px; + height: 100vh; + padding: 0 1rem; + + overflow-y: auto; + line-height: 1.25; + border-right: 1px solid #e5e5e5; + } + + .sidebar-col { + flex-shrink: 0; + + width: 100%; + padding: 0; + } + + .sidebar-col-first { + padding-top: 1.75rem; + } + + .sidebar-col-last { + padding-bottom: 1.75rem; + } + + .sidebar-col + .sidebar-col { + margin-top: 1.75em; + } + + .sidebar-col > a { + display: block; + + font-size: 0.8rem; + font-weight: bold; + } + + .sidebar-menu { + padding: 0; + margin: 0.5em 0 0; + + list-style: none; + + font-size: 0.7rem; + } + + .sidebar-menu li { + margin: 0; + + line-height: 1.45; + } + + .sidebar-menu a { + display: block; + + padding: 0.25em 0; + } +} + /* override default prism theme */ code[class*="language-"], pre[class*="language-"] { diff --git a/html-css.html b/html-css.html index d6cbdb4..0864422 100644 --- a/html-css.html +++ b/html-css.html @@ -25,64 +25,65 @@
- +

Стиль кода Академии HTML

github.com/htmlacademy/codeguide

-
-
-

Оглавление

-
-
-

HTML

- -
-
-

CSS

- -
-
-
- -
-

HTML

- -
-
-

Синтаксис

-
    -
  • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • -
  • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
    • -
  • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
    • -
  • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
    • -
  • Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint.
    • -
-
-
-
- 
<!DOCTYPE html>
+    

+      
+
+      

+        

+          
HTML

+
+          

+            

+              
Синтаксис

+              
    
+                
  • Для отступов у вложенных элементов используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • 
+                
  • Теги и их атрибуты пишутся строчными буквами. Для значений атрибутов всегда используются двойные кавычки.
    • 
+                
  • Необязательный закрывающий слеш у одиночных тегов (<img>, <br> и другие) не ставится.
    • 
+                
  • Необязательные закрывающие теги (например, </li> или </body>) не пропускаются.
    • 
+                
  • Для проверки HTML-кода используйте файл конфигурации .htmlhintrc для настройки валидатора HTMLHint.
    • 
+              

+            

+            

+              

+                
<!DOCTYPE html>
 <html lang="ru">
   <head>
     <meta charset="utf-8">
@@ -98,64 +99,64 @@ 
Синтаксис

     </article>
   </body>
 </html>

-            

-          

-        

-
-        

-          

-            
Валидность

-            

-              Документ должен проходить проверку на валидность. Для проверки используется современный валидатор.
-            

-          

-        

-
-        

-          

-            
HTML-доктайп

-            

-              В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
-            

-          

-          

-            

-              
<!DOCTYPE html>
+              

+            

+          

+
+          

+            

+              
Валидность

+              

+                Документ должен проходить проверку на валидность. Для проверки используется современный валидатор.
+              

+            

+          

+
+          

+            

+              
HTML-доктайп

+              

+                В начале страницы обязательно должен быть указан актуальный doctype, чтобы браузер отображал её в режиме соответствия стандартам. Это гарантирует, что страница будет выглядеть единообразно во всех современных браузерах.
+              

+            

+            

+              

+                
<!DOCTYPE html>
 <html lang="ru">
   <head>…</head>
   <body>…</body>
 </html>

-            

-          

-        

-
-        

-          

-            
Кодировка символов

-            

-              Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
-            

-          

-          

-            

-              
<head>
+              

+            

+          

+
+          

+            

+              
Кодировка символов

+              

+                Кодировка символов на странице всегда должна быть явно указана, чтобы обеспечить корректное отображение текста. Кодировка utf-8 предпочтительна.
+              

+            

+            

+              

+                
<head>
   <meta charset="utf-8">
   <title>Заголовок страницы</title>
 </head>

-            

-          

-        

-
-        

-          

-            
Подключение стилей

-            

-              Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.
-            

-          

-          

-            

-              
<!-- Хорошо: стилевой файл подключён в секции head -->
+              

+            

+          

+
+          

+            

+              
Подключение стилей

+              

+                Стилевые файлы с помощью <link> подключаются внутри <head>. При этом атрибут type для тега <link> не указывается, так как его значение text/css устанавливается по умолчанию.
+              

+            

+            

+              

+                
<!-- Хорошо: стилевой файл подключён в секции head -->
 <!DOCTYPE html>
 <html lang="ru">
   <head>
@@ -172,23 +173,23 @@ 
Подключение стилей

     <link rel="stylesheet" href="style.css">
   </body>
 </html>

-            

-          

-        

-
-        

-          

-            
Подключение скриптов

-            

-              Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.
-            

-            

-              При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию.
-            

-          

-          

-            

-              
<!-- Хорошо: скрипт подключается перед </body> -->
+              

+            

+          

+
+          

+            

+              
Подключение скриптов

+              

+                Скрипты должны подключаться в самом низу страницы, чтобы при её загрузке не блокировать отображение содержимого.
+              

+              

+                При подключении скриптов в теге <script> атрибут type не указывается, так как его значение text/javascript устанавливается по умолчанию.
+              

+            

+            

+              

+                
<!-- Хорошо: скрипт подключается перед </body> -->
 <!DOCTYPE html>
 <html lang="ru">
   <head>…</head>
@@ -206,41 +207,41 @@ 
Подключение скриптов

   </head>
   <body>…</body>
 </html>

-            

-          

-        

-
-        

-          

-            
Порядок атрибутов

-            

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

-            

-              Остальные атрибуты могут быть расставлены в любом порядке, но тоже единообразно для одинаковых элементов.
-            

-          

-          

-            

-              
<a class="element element-big" id="element" href="/" data-name="element">Ссылка</a>
+              

+            

+          

+
+          

+            

+              
Порядок атрибутов

+              

+                Атрибут класса у 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" необязательно -->
+              

+            

+          

+
+          

+            

+              
Логические атрибуты

+              

+                Для логических атрибутов (например, checked, disabled, required) значение не указывается, а сами атрибуты указываются последними и в единообразной последовательности во всём документе.
+              

+            

+            

+              

+                
<!-- checked="checked" необязательно -->
 <input type="checkbox" required checked>
 
 <input type="text" disabled>
@@ -249,19 +250,19 @@ 
Логические атрибуты

   <option value="1" selected>1</option>
 </select>

             

-          

-        

-
-        

-          

-            
Подписи полей ввода

-            

-              Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.
-            

-          

-          

-            

-              
<!-- Хорошо: элемент формы radio связан с подписью через идентификатор -->
+            

+          

+
+          

+            

+              
Подписи полей ввода

+              

+                Для улучшения взаимодействия пользователя с элементами форм, при нажатии на подпись поля, оно должно активироваться. Для этого элемент формы связывается с его описанием с помощью идентификатора и атрибута for тега <label>.
+              

+            

+            

+              

+                
<!-- Хорошо: элемент формы radio связан с подписью через идентификатор -->
 <input type="radio" id="choose">
 <label for="choose">Радио кнопка</label>
 
@@ -272,23 +273,23 @@ 
Подписи полей ввода

 
 <!-- Плохо: подпись не связана с элементом формы -->
 <input type="radio" id="choose"> Радио кнопка

-            

-          

-        

-
-        

-          

-            
Размеры картинок

-            

-              Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях. В случае пикселей размерность не нужна.
-            

-            

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

-          

-          

-            

-              
<!-- Хорошо: размеры картинке заданы -->
+              

+            

+          

+
+          

+            

+              
Размеры картинок

+              

+                Изображениям <img> должны быть явно заданы с помощью атрибута размеры в пикселях. В случае пикселей размерность не нужна.
+              

+              

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

+            

+            

+              

+                
<!-- Хорошо: размеры картинке заданы -->
 <div class="logo-area">
   <img src="logo.png" alt="" width="300" height="150">
 </div>
@@ -302,60 +303,60 @@ 
Размеры картинок

 <div class="logo-area">
   <img src="logo.png" alt="">
 </div>

-            

-          

-        

-
-        

-          

-            
Атрибут языка

-            

-              Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
-            

-          

-          

-            

-              
<!DOCTYPE html>
+              

+            

+          

+
+          

+            

+              
Атрибут языка

+              

+                Для элемента <html> в атрибуте lang должен указываться соответствующий язык документа. Это помогает инструментам синтеза речи определить, какое использовать произношение или системам перевода, какие использовать языковые правила.
+              

+            

+            

+              

+                
<!DOCTYPE html>
 <html lang="ru">
   <head>…</head>
   <body>…</body>
 </html>

-            

-          

-        

-      

-
-      

-        
CSS

-
-        

-          

-            
Синтаксис

-            
    
-              
  • После значения свойства обязательно ставится точка с запятой.
    • 
-              
  • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • 
-              
  • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
    • 
-              
  • Названия тегов и свойств в правилах пишутся строчными буквами.
    • 
-              
  • Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
    • 
-              
  • Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
    • 
-              
  • После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен.
    • 
-              
  • После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
    • 
-              
  • До и после комбинатора между селекторами (например, p > a) ставится один пробел.
    • 
-              
  • Каждое объявление в правиле пишется на новой строке.
    • 
-              
  • Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки:
-            
    .selector {
+
+
+
+
+ +
+

CSS

+ +
+
+

Синтаксис

+
    +
  • После значения свойства обязательно ставится точка с запятой.
    • +
  • Для отступов внутри правил используются два пробела. Для правильного форматирования используйте файл .editorconfig в вашем редакторе.
    • +
  • Шестнадцатеричное значение цвета не сокращается, а пишется полностью из всех шести символов. Для записи используются строчные буквы. Например, #f5f5f5.
    • +
  • Названия тегов и свойств в правилах пишутся строчными буквами.
    • +
  • Начальный ноль для значений не сокращается (например, .5 вместо 0.5).
    • +
  • Во всех случаях в стилях используются двойные кавычки. В необязательных случаях кавычки не опускаются.
    • +
  • После двоеточия в правилах ставится один пробел (top: 10px;). А перед двоеточием пробел не нужен.
    • +
  • После запятых внутри значений rgb(), rgba(), hsl(), hsla() или rect() пробелы ставятся. Это повышает удобочитаемость.
    • +
  • До и после комбинатора между селекторами (например, p > a) ставится один пробел.
    • +
  • Каждое объявление в правиле пишется на новой строке.
    • +
  • Перед открывающейся фигурной скобкой ставится один пробел. После скобки запись идёт с новой строки: + 
    .selector {
   color: #f5f5f5;
-}
-
    • -
  • Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
    • -
  • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
    • -
  • Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint.
    • -
  • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
    • -
-
-
-
- 
/* Хорошо */
+}
+ +
  • Закрывающая фигурная скобка пишется на новой строке и без отступа. Следующее после этого правило отделяется пустой строкой.
    • +
  • Единицы измерения не пишутся, там где в них нет необходимости. Например, border: 0.
    • +
  • Для проверки CSS-кода используйте конфигурацию для настройки валидатора stylelint.
    • +
  • Для автоматического применения этих правил используйте файл конфигурации csscomb.json для настройки CSSComb.
    • + +
    +
    +
    + 
    /* Хорошо */
 .selector,
 .selector-secondary,
 .selector[type="text"] {
@@ -366,45 +367,45 @@ 
    Синтаксис
    
 }
 
 /* Плохо */
-.selector, .selector-secondary, .selector[type=text]{
+.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}
    -
    -
    -
    - -
    -
    -

    Порядок свойств

    -

    - Объявления логически связанных свойств группируются в следующем порядке: -

    -
      -
    1. Позиционирование
      2. -
    2. Блочная модель
      3. -
    3. Типографика
      4. -
    4. Оформление
      5. -
    5. Анимация
      6. -
    6. Разное
      7. -
    -

    - Позиционирование следует первым потому, что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков. -

    -

    - Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь. -

    -

    - Сгруппированные объявления в правиле отделяются друг от друга пустой строкой. -

    -

    - Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия. -

    -
    -
    -
    - 
    .declaration-order {
+
    +
    +
    + +
    +
    +

    Порядок свойств

    +

    + Объявления логически связанных свойств группируются в следующем порядке: +

    +
      +
    1. Позиционирование
      2. +
    2. Блочная модель
      3. +
    3. Типографика
      4. +
    4. Оформление
      5. +
    5. Анимация
      6. +
    6. Разное
      7. +
    +

    + Позиционирование следует первым потому, что оно влияет на положение блоков в потоке документа. Блочная модель идёт следующей, так как она определяет размеры и расположение блоков. +

    +

    + Все остальные объявления, которые изменяют вид внутренних частей блоков и не оказывают влияния на другие блоки, идут в последнюю очередь. +

    +

    + Сгруппированные объявления в правиле отделяются друг от друга пустой строкой. +

    +

    + Порядок объявления подробных правил, таких как font-size, font-family, line-height, должен соответствовать порядку в сокращённой версии правила. В случае совместного использования подробных и сокращённых правил, первой должна идти сокращённая версия. +

    +
    +
    +
    + 
    .declaration-order {
   /* Позиционирование */
   position: absolute;
   top: 0;
@@ -442,22 +443,22 @@ 
    Порядок свойств
    
   /* Разное */
   will-change: auto;
 }
    -
    -
    -
    - -
    -
    -

    Имена классов

    -
      -
    • Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-danger).
      • -
    • Имена классов должны быть такими, чтобы по ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (более трёх слов).
      • -
    • Для написания классов используются английские слова и термины. Транслитом названия классов и атрибутов не пишутся.
      • -
    -
    -
    -
    - 
    /* Хорошо */
+
    +
    +
    + +
    +
    +

    Имена классов

    +
      +
    • Имена классов пишутся строчными буквами, используется дефис (но не знаки нижнего подчёркивания или camelCase). Дефисы служат разделителями во взаимосвязанных классах (например, .button и .button-danger).
      • +
    • Имена классов должны быть такими, чтобы по ним можно было быстро понять какому элементу страницы задан класс: избегайте сокращений (единственное исключение — .btn для кнопок), но не делайте их слишком длинными (более трёх слов).
      • +
    • Для написания классов используются английские слова и термины. Транслитом названия классов и атрибутов не пишутся.
      • +
    +
    +
    +
    + 
    /* Хорошо */
 .alert-danger { … }
 .tweet .user-picture { … }
 .button { … }
@@ -468,54 +469,54 @@ 
    Имена классов
    
 .t { … }
 .big_red_button { … }
 .knopka { … }
    -
    -
    -
    - -
    -
    -

    Правило @import

    -

    - Правило @import работает медленнее, чем тег <link>. В стилях @import не должен использоваться. -

    -
    -
    -
    - 
    <!-- Хорошо: подключение тегом link -->
+
    +
    +
    + +
    +
    +

    Правило @import

    +

    + Правило @import работает медленнее, чем тег <link>. В стилях @import не должен использоваться. +

    +
    +
    +
    + 
    <!-- Хорошо: подключение тегом link -->
 <link rel="stylesheet" href="module.css">
 
 <!-- Плохо -->
 <style>
   @import url("module.css");
 </style>
    -
    -
    -
    - -
    -
    -

    Варианты шрифта

    -

    - Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family. -

    -

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

    -

    - Порядок шрифтов следующий: -

    -
      -
    1. нестандартный шрифт;
      2. -
    2. веб-безопасный;
      3. -
    3. тип шрифта.
      4. -
    -

    - Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com. -

    -
    -
    -
    - 
    /* Хорошо: указан альтернативный веб-безопасный шрифт и его тип семейства */
+
    +
    +
    + +
    +
    +

    Варианты шрифта

    +

    + Альтернативные варианты шрифта и тип семейства указываются в конце перечисления font-family. +

    +

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

    +

    + Порядок шрифтов следующий: +

    +
      +
    1. нестандартный шрифт;
      2. +
    2. веб-безопасный;
      3. +
    3. тип шрифта.
      4. +
    +

    + Список веб-безопасных шрифтов можно посмотреть здесь — cssfontstack.com. +

    +
    +
    +
    + 
    /* Хорошо: указан альтернативный веб-безопасный шрифт и его тип семейства */
 body {
   font-family: "Helvetica", "Arial", sans-serif;
 }
@@ -539,20 +540,20 @@ 
    Варианты шрифта
    
 body {
   font-family: "Helvetica", "Georgia", sans-serif;
 }
    -
    -
    -
    - -
    -
    -

    Доступное скрытие

    -

    - Для того, чтобы контент был скрыт от глаз, но доступен для скринридеров и поисковиков его нужно скрывать используя утилитарный класс visually-hidden. -

    -
    -
    -
    - 
    /* Плохо: скрывать элемент с помощью font-size, display:none */
+
    +
    +
    + +
    +
    +

    Доступное скрытие

    +

    + Для того, чтобы контент был скрыт от глаз, но доступен для скринридеров и поисковиков его нужно скрывать используя утилитарный класс visually-hidden. +

    +
    +
    +
    + 
    /* Плохо: скрывать элемент с помощью font-size, display:none */
 h1 {
   font-size: 0;
 }
@@ -560,10 +561,10 @@ 
    Доступное скрытие
    
 .title {
   display: none;
 }
    -
    -
    - 
    
-/* Хорошо: использован класс visually-hidden */
+
    +
    +
    + 
    /* Хорошо: использован класс visually-hidden */
 .visually-hidden {
   position: absolute;
   width: 1px;
@@ -576,14 +577,14 @@ 
    Доступное скрытие
    
   clip: rect(0 0 0 0);
   overflow: hidden;
 }
    -
    -
    - 
    
-<h2 class="visually-hidden">Заголовок</h2>
    -
    -
    -
    -
    + +
    + 
    <h2 class="visually-hidden">Заголовок</h2>
    +
    +
    +
    + +