From c8746fe85fa240c9f72e76574f44db5e1b6a6184 Mon Sep 17 00:00:00 2001 From: gitanon Date: Mon, 25 Jul 2016 18:25:28 +0900 Subject: [PATCH 01/13] Change config --- _config.yml | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/_config.yml b/_config.yml index 7b45087e..32e22461 100644 --- a/_config.yml +++ b/_config.yml @@ -1,5 +1,5 @@ -name: Руководство по написанию кода от @mdo -description: Стандарты для разработки гибкого, надежного и поддерживаемого кода на HTML и CSS. +name: Руководство по написанию кода frontendanon от @mdo +description: Стандарты для разработки гибкого, надежного и поддерживаемого кода на Pug(Jade) и Stylus. url: http://mdo.github.com/code-guide markdown: rdiscount From fd1c2a69ab2fcc5199dbe88f7afb3c17eda0a6c0 Mon Sep 17 00:00:00 2001 From: gitanon Date: Mon, 25 Jul 2016 18:32:13 +0900 Subject: [PATCH 02/13] Update README.md --- README.md | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/README.md b/README.md index 6f8acac7..094d1c2b 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,10 @@ -# Code Guide +# frontendanon code guide + +Fork "Русская версия руководства по написанию кода от @mdo http://sadcitizen.me/code-guide/" Code Guide is a project for documenting standards for developing flexible, durable, and sustainable HTML and CSS. It comes from years of experience writing code on projects of all sizes. It's not the end-all be-all, but it's a start. -**[Start reading ☞](http://mdo.github.io/code-guide)** +**[Start reading ☞](https://gitanon.github.io/code-guide/)** --- From b6efbc6ba894b515af61c0e2720340bc82bf4443 Mon Sep 17 00:00:00 2001 From: gitanon Date: Mon, 25 Jul 2016 18:38:45 +0900 Subject: [PATCH 03/13] Common change --- index.html | 30 ++++++++++++++---------------- 1 file changed, 14 insertions(+), 16 deletions(-) diff --git a/index.html b/index.html index 50cb48a4..56bd6c41 100644 --- a/index.html +++ b/index.html @@ -46,7 +46,7 @@

CSS

Золотое правило

-

Строго соблюдайте предложенные здесь или свои собственные соглашения. Если вы нашли ошибку, будь она большая или маленькая, сразу сообщите об этом. Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, пожалуйста, создайте issue на GitHub.

+

Строго соблюдайте предложенные здесь или свои собственные соглашения. Если вы нашли ошибку, будь она большая или маленькая, сразу сообщите об этом. Если у вас есть что дополнить или вы хотите принять участие в разработке этих соглашений, пожалуйста, создайте issue на GitHub.

@@ -55,7 +55,19 @@

Золотое правило

- +
+
+

Настройки редактора кода

+

Установите в вашем редакторе следующие настройки, которые помогут избежать распространенных несогласованностей в коде и грязи:

+
    +
  • Использовать мягкие отступы размером в два пробела.
    • +
  • Обрезать конечные пробелы при сохранении.
    • +
  • Кодировка файлов UTF-8.
    • +
  • Добавлять новую строку в конец файлов.
    • +
+

Подумайте над документированием и применением этих настроек в файле .editorconfig вашего проекта. Для примера, ознакомьтесь с файлом настроек для Bootstrap. Узнайте больше об EditorConfig.

+
+

HTML

@@ -393,17 +405,3 @@

Организация кода

{% highlight css %}{% include css/organization-comments.css %}{% endhighlight %}
- -
-
-

Настройки редактора кода

-

Установите в вашем редакторе следующие настройки, которые помогут избежать распространенных несогласованностей в коде и грязи:

-
    -
  • Использовать мягкие отступы размером в два пробела.
    • -
  • Обрезать конечные пробелы при сохранении.
    • -
  • Кодировка файлов UTF-8.
    • -
  • Добавлять новую строку в конец файлов.
    • -
-

Подумайте над документированием и применением этих настроек в файле .editorconfig вашего проекта. Для примера, ознакомьтесь с файлом настроек для Bootstrap. Узнайте больше об EditorConfig.

-
-
From b50794f2390b42f6a9db5b3fb061910acf417f60 Mon Sep 17 00:00:00 2001 From: gitanon Date: Mon, 25 Jul 2016 18:54:11 +0900 Subject: [PATCH 04/13] HTML to Pug --- _includes/html/attribute-order.html | 8 +++----- _includes/html/boolean-attributes.html | 9 ++++----- _includes/html/doctype.html | 6 ++---- _includes/html/encoding.html | 5 ++--- _includes/html/ie-compatibility-mode.html | 2 +- _includes/html/lang.html | 4 +--- _includes/html/reducing-markup.html | 7 +++---- _includes/html/style-script.html | 7 +++---- _includes/html/syntax.html | 21 ++++++++++++--------- index.html | 2 +- 10 files changed, 32 insertions(+), 39 deletions(-) diff --git a/_includes/html/attribute-order.html b/_includes/html/attribute-order.html index f4971679..43909702 100644 --- a/_includes/html/attribute-order.html +++ b/_includes/html/attribute-order.html @@ -1,7 +1,5 @@ - - Какая-то ссылка - +a(class="..." id="..." data-modal="toggle" href="#") Какая-то ссылка - +input(class="form-control" type="text") -... +img(src="http://github.com/..." alt="...") diff --git a/_includes/html/boolean-attributes.html b/_includes/html/boolean-attributes.html index c1ba6320..343b9fc8 100644 --- a/_includes/html/boolean-attributes.html +++ b/_includes/html/boolean-attributes.html @@ -1,7 +1,6 @@ - +input(type="text" disabled) - +input(type="checkbox" value="1" checked) - +select + option(value="1" selected) 1 diff --git a/_includes/html/doctype.html b/_includes/html/doctype.html index da20eb1b..cdd6afea 100644 --- a/_includes/html/doctype.html +++ b/_includes/html/doctype.html @@ -1,5 +1,3 @@ - - - - +html + head diff --git a/_includes/html/encoding.html b/_includes/html/encoding.html index 9cb22cb4..920909a6 100644 --- a/_includes/html/encoding.html +++ b/_includes/html/encoding.html @@ -1,3 +1,2 @@ - - - +head + meta(charset="UTF-8") \ No newline at end of file diff --git a/_includes/html/ie-compatibility-mode.html b/_includes/html/ie-compatibility-mode.html index cc2d32ed..2d225ca7 100644 --- a/_includes/html/ie-compatibility-mode.html +++ b/_includes/html/ie-compatibility-mode.html @@ -1 +1 @@ - +meta(http-equiv="X-UA-Compatible" content="IE=Edge") diff --git a/_includes/html/lang.html b/_includes/html/lang.html index d00dbf02..0a3eb869 100644 --- a/_includes/html/lang.html +++ b/_includes/html/lang.html @@ -1,3 +1 @@ - - - \ No newline at end of file +html(lang="en-us") diff --git a/_includes/html/reducing-markup.html b/_includes/html/reducing-markup.html index 5fe7e2dc..ee07e299 100644 --- a/_includes/html/reducing-markup.html +++ b/_includes/html/reducing-markup.html @@ -1,7 +1,6 @@ - - - +span(class="avatar") + img(src="http://github.com/...") - +img(class="avatar" src="http://github.com/...") diff --git a/_includes/html/style-script.html b/_includes/html/style-script.html index d41179cb..1d8ce087 100644 --- a/_includes/html/style-script.html +++ b/_includes/html/style-script.html @@ -1,10 +1,9 @@ - +link(rel="stylesheet", href="http://github.com/css/main.css") - - +script(src="http://github.com/js/main.js") diff --git a/_includes/html/syntax.html b/_includes/html/syntax.html index 4df0fc97..896c4452 100644 --- a/_includes/html/syntax.html +++ b/_includes/html/syntax.html @@ -1,10 +1,13 @@ - - - Заголовок страницы - - - Company -

Привет, мир!

- - +html(lang="en-us") + head + meta(charset="UTF-8") + meta(http-equiv="X-UA-Compatible" content="IE=Edge") + meta(name="viewport" content="width=device-width,initial-scale=1") + title Title page + link(rel="stylesheet", href="http://github.com/css/main.css") + body.page + include blocks/header/header.pug + ... + include blocks/text/text.pug + script(src="http://github.com/js/main.js") diff --git a/index.html b/index.html index 56bd6c41..77a11756 100644 --- a/index.html +++ b/index.html @@ -70,7 +70,7 @@

Настройки редактора кода

-

HTML

+

Jade

From 4376293a66da6dbdacf4ffb4af9cfffa8d644087 Mon Sep 17 00:00:00 2001 From: gitanon Date: Mon, 25 Jul 2016 18:57:02 +0900 Subject: [PATCH 05/13] Fix jade --- index.html | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/index.html b/index.html index 77a11756..bc8ff7f3 100644 --- a/index.html +++ b/index.html @@ -70,7 +70,7 @@

Настройки редактора кода

@@ -81,7 +81,6 @@

Синтаксис

  • Вложенные элементы должны иметь отступ (два пробела).
  • В атрибутах всегда используйте двойные ковычки, но не одинарные.
  • Не добавляйте слэш ("/") в конец одиночного тега — Спецификация HTML5 говорит, что это необязательно.
    • -
  • Не пропускайте необязательные закрывающие теги (например, </li> или </body>).
    • From 0d1994895d61f99502a5bd6fe7d1c0af719da5ce Mon Sep 17 00:00:00 2001 From: gitanon Date: Mon, 25 Jul 2016 19:04:53 +0900 Subject: [PATCH 06/13] CSS Change --- code-guide.css | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/code-guide.css b/code-guide.css index e1281bdd..b5f69fc6 100644 --- a/code-guide.css +++ b/code-guide.css @@ -188,12 +188,12 @@ pre code { .masthead { padding: 3rem 1rem; - color: rgba(255,255,255,.5); + color: rgba(0,0,0,.5); text-align: center; - background-color: #2a3440; + background-color: #fff; } .masthead h1 { - color: #fff; + color: #000; margin-bottom: .25rem; } .masthead .icon { @@ -205,12 +205,12 @@ pre code { font-size: 2rem; } .masthead-links a { - color: rgba(255,255,255,.5); + color: rgba(0,0,0,.5); text-decoration: none; transition: all .15s linear; } .masthead-links a:hover { - color: #fff; + color: #000; } @media (min-width: 38rem) { From 0e735771e6ca340d5dfdbb41836397338ca33131 Mon Sep 17 00:00:00 2001 From: gitanon Date: Mon, 25 Jul 2016 19:07:42 +0900 Subject: [PATCH 07/13] Update README.md --- README.md | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/README.md b/README.md index 094d1c2b..975d05b4 100644 --- a/README.md +++ b/README.md @@ -15,18 +15,3 @@ Released under MIT by, and copyright 2014, @mdo. ### Thanks Heavily inspired by [Idiomatic CSS](https://github.com/necolas/idiomatic-css) and the [GitHub Styleguide](http://github.com/styleguide). - -### Translations - -Translations are maintained by their creators and may not always be up to date with the original here. - -- [Portuguese](http://diegoeis.github.io/code-guide/) - Translated by [Diego Eis](http://tableless.com.br/) -- [Spanish](http://adrianayala.mx/code-guide/es/) - Translated by [Adrian Ayala](http://adrianayala.mx/) -- [Indonesian](http://diagramatics.github.io/code-guide-id) - Translated by [Steven Sinatra](http://diagramatics.me) -- [Chinese](http://zoomzhao.github.io/code-guide/) - Translated by [Zoom Zhao](https://github.com/ZoomZhao) -- [Italian](http://alessandro1997.github.io/code-guide/) - Translated by [Alessandro Desantis](https://github.com/alessandro1997) -- [Russian](http://sadcitizen.github.io/code-guide/) - Translated by [Eugene Abrosimov](https://github.com/sadcitizen) - -Have a translation you'd like to link to? Open a pull request to add it. - -<3 From 5ba6c6ebc95644cdb64eb2094918da06ec353b91 Mon Sep 17 00:00:00 2001 From: gitanon Date: Tue, 26 Jul 2016 15:38:26 +0900 Subject: [PATCH 08/13] css and html fix --- _config.yml | 2 +- code-guide.css | 20 ++++++++++---------- 2 files changed, 11 insertions(+), 11 deletions(-) diff --git a/_config.yml b/_config.yml index 32e22461..eb2f7d73 100644 --- a/_config.yml +++ b/_config.yml @@ -1,4 +1,4 @@ -name: Руководство по написанию кода frontendanon от @mdo +name: Руководство по написанию кода frontendanon description: Стандарты для разработки гибкого, надежного и поддерживаемого кода на Pug(Jade) и Stylus. url: http://mdo.github.com/code-guide diff --git a/code-guide.css b/code-guide.css index b5f69fc6..3cc653ee 100644 --- a/code-guide.css +++ b/code-guide.css @@ -52,11 +52,11 @@ html { body { margin: 0; font: 1rem/1.5 "PT Sans", sans-serif; - color: #5a5a5a; + color: #34495e; } a { - color: #08c; + color: #3498db; text-decoration: none; } a:hover { @@ -67,7 +67,7 @@ h1, h2, h3, h4 { margin: 0 0 .5rem; font-weight: normal; line-height: 1; - color: #2a2a2a; + color: #2c3e50; letter-spacing: -.05em; } h1 { font-size: 3rem; } @@ -188,12 +188,12 @@ pre code { .masthead { padding: 3rem 1rem; - color: rgba(0,0,0,.5); + color: rgba(44,62,80,.5); text-align: center; - background-color: #fff; + background-color: #ecf0f1; } .masthead h1 { - color: #000; + color: #2c3e50; margin-bottom: .25rem; } .masthead .icon { @@ -205,12 +205,12 @@ pre code { font-size: 2rem; } .masthead-links a { - color: rgba(0,0,0,.5); + color: rgba(44,62,80,.5); text-decoration: none; transition: all .15s linear; } .masthead-links a:hover { - color: #000; + color: #2c3e50; } @media (min-width: 38rem) { @@ -227,7 +227,7 @@ pre code { .heading { padding: 2rem 1rem 1.5rem; - background-color: #dfe1e8; + background-color: #bdc3c7; } @media (min-width: 38rem) { @@ -237,7 +237,7 @@ pre code { } .section { - border-bottom: 1px solid #dfe1e8; + border-bottom: 1px solid #95a5a6; } From 21db31f15f37bd66eec196652afb9e0b52888031 Mon Sep 17 00:00:00 2001 From: gitanon Date: Tue, 26 Jul 2016 16:11:46 +0900 Subject: [PATCH 09/13] CSS to Stylus --- _includes/css/class-names.css | 20 +++++++---- _includes/css/comments.css | 6 ++-- _includes/css/declaration-order.css | 48 ++++++++++--------------- _includes/css/media-queries.css | 27 +++++++++----- _includes/css/nesting.scss | 16 +++++---- _includes/css/organization-comments.css | 9 +++-- _includes/css/prefixed-properties.css | 6 ++-- _includes/css/selectors.css | 21 +++++++---- _includes/css/shorthand.css | 24 ++++++------- _includes/css/single-declarations.css | 32 ++++++++++------- _includes/css/syntax.css | 15 ++++---- index.html | 41 ++++++++------------- 12 files changed, 137 insertions(+), 128 deletions(-) diff --git a/_includes/css/class-names.css b/_includes/css/class-names.css index c450cbb1..f5595cbc 100644 --- a/_includes/css/class-names.css +++ b/_includes/css/class-names.css @@ -1,9 +1,17 @@ /* Плохой пример */ -.t { ... } -.red { ... } -.header { ... } +.t + ... +.red + ... +.header + ... /* Хороший пример */ -.tweet { ... } -.important { ... } -.tweet-header { ... } +.tweet + ... + +.important + ... + +.tweet-header + ... diff --git a/_includes/css/comments.css b/_includes/css/comments.css index 49ad3b5c..902f404d 100644 --- a/_includes/css/comments.css +++ b/_includes/css/comments.css @@ -1,11 +1,9 @@ /* Плохой пример */ /* Modal header */ -.modal-header { +.modal-header ... -} /* Хороший пример */ /* Обертывающий элемент для .modal-title и .modal-close */ -.modal-header { +.modal-header ... -} diff --git a/_includes/css/declaration-order.css b/_includes/css/declaration-order.css index 0b3eff21..a6f7725a 100644 --- a/_includes/css/declaration-order.css +++ b/_includes/css/declaration-order.css @@ -1,29 +1,19 @@ -.declaration-order { - /* Позиционирование */ - position: absolute; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: 100; - - /* Блочная модель */ - display: block; - float: right; - width: 100px; - height: 100px; - - /* Типографика */ - font: normal 13px "Helvetica Neue", sans-serif; - line-height: 1.5; - color: #333; - text-align: center; - - /* Отображение */ - background-color: #f5f5f5; - border: 1px solid #e5e5e5; - border-radius: 3px; - - /* Прочее */ - opacity: 1; -} +.declaration-order + background-color #f5f5f5 + border 1px solid #e5e5e5 + border-radius 3px + bottom 0 + color #333 + display block + font normal 13px "Helvetica Neue", sans-serif + height 100px + left 0 + float right + line-height 1.5 + opacity 1 + position absolute + right 0 + text-align center + top 0 + width 100px + z-index 100 diff --git a/_includes/css/media-queries.css b/_includes/css/media-queries.css index 7440c7a3..22f03a95 100644 --- a/_includes/css/media-queries.css +++ b/_includes/css/media-queries.css @@ -1,9 +1,18 @@ -.element { ... } -.element-avatar { ... } -.element-selected { ... } - -@media (min-width: 480px) { - .element { ...} - .element-avatar { ... } - .element-selected { ... } -} +.element + ... + +.element-avatar + ... + +.element-selected + ... + +@media (min-width: tablet) + .element + ... + + .element-avatar + ... + + .element-selected + ... diff --git a/_includes/css/nesting.scss b/_includes/css/nesting.scss index 5f4194c2..a83875d2 100644 --- a/_includes/css/nesting.scss +++ b/_includes/css/nesting.scss @@ -1,9 +1,13 @@ // Без вложенности -.table > thead > tr > th { … } -.table > thead > tr > td { … } +.table > thead > tr > th + ... +.table > thead > tr > td + ... // С вложенностью -.table > thead > tr { - > th { … } - > td { … } -} +.table > thead > tr + > th + ... + > td + ... + diff --git a/_includes/css/organization-comments.css b/_includes/css/organization-comments.css index 6320eb1a..2fce4d7d 100644 --- a/_includes/css/organization-comments.css +++ b/_includes/css/organization-comments.css @@ -2,7 +2,8 @@ * Заголовок раздела для компонента */ -.element { ... } +.element + ... /* @@ -11,7 +12,9 @@ * Иногда возникает необходимость включения дополнительного контекста для всего компонента. Сделайте это в этом месте, если это достаточно важно. */ -.element { ... } +.element + ... /* Контекстный под-компонент или модификатор */ -.element-heading { ... } +.element_heading + ... diff --git a/_includes/css/prefixed-properties.css b/_includes/css/prefixed-properties.css index 789d4858..ba91c45e 100644 --- a/_includes/css/prefixed-properties.css +++ b/_includes/css/prefixed-properties.css @@ -1,5 +1,3 @@ /* Свойства с префиксами */ -.selector { - -webkit-box-shadow: 0 1px 2px rgba(0,0,0,.15); - box-shadow: 0 1px 2px rgba(0,0,0,.15); -} +.selector + box-shadow: 0 1px 2px rgba(0,0,0,.15) diff --git a/_includes/css/selectors.css b/_includes/css/selectors.css index 1f8e4477..5342ca91 100644 --- a/_includes/css/selectors.css +++ b/_includes/css/selectors.css @@ -1,9 +1,18 @@ /* Плохой пример */ -span { ... } -.page-container #stream .stream-item .tweet .tweet-header .username { ... } -.avatar { ... } +span + ... +.page-container #stream .stream-item .tweet .tweet-header .username + ... +.avatar + ... /* Хороший пример */ -.avatar { ... } -.tweet-header .username { ... } -.tweet .avatar { ... } +.avatar + ... + +.tweet-header .username + ... + +.tweet .avatar + ... + diff --git a/_includes/css/shorthand.css b/_includes/css/shorthand.css index 34cae1c2..100bc81a 100644 --- a/_includes/css/shorthand.css +++ b/_includes/css/shorthand.css @@ -1,16 +1,14 @@ /* Плохой пример */ -.element { - margin: 0 0 10px; - background: red; - background: url("http://github.com/image.jpg"); - border-radius: 3px 3px 0 0; -} +.element + margin 0 0 10px + background red + background url("http://github.com/image.jpg") + border-radius 3px 3px 0 0 /* Хороший пример */ -.element { - margin-bottom: 10px; - background-color: red; - background-image: url("http://github.com/image.jpg"); - border-top-left-radius: 3px; - border-top-right-radius: 3px; -} +.element + margin-bottom 10px + background-color red + background-image url("http://github.com/image.jpg") + border-top-left-radius 3px + border-top-right-radius 3px diff --git a/_includes/css/single-declarations.css b/_includes/css/single-declarations.css index 7c44275a..2488a46b 100644 --- a/_includes/css/single-declarations.css +++ b/_includes/css/single-declarations.css @@ -1,15 +1,21 @@ -/* Одиночные объявления в одну строчку */ -.span1 { width: 60px; } -.span2 { width: 140px; } -.span3 { width: 220px; } +/* Одиночные объявления */ +.span1 + width 60px +.span2 + width 140px +.span3 + width 220px /* Несколько объявлений, по одному на каждую строчку */ -.sprite { - display: inline-block; - width: 16px; - height: 15px; - background-image: url(http://github.com/img/sprite.png); -} -.icon { background-position: 0 0; } -.icon-home { background-position: 0 -20px; } -.icon-account { background-position: 0 -40px; } +.sprite + display inline-block + width 16px + height 15px + background-image url(http://github.com/img/sprite.png) + +.icon + background-position 0 0 +.icon-home + background-position 0 -20px +.icon-account + background-position 0 -40px diff --git a/_includes/css/syntax.css b/_includes/css/syntax.css index a7023dff..a435b94d 100644 --- a/_includes/css/syntax.css +++ b/_includes/css/syntax.css @@ -1,4 +1,4 @@ -/* Плохой CSS */ +/* Плохой Stylus */ .selector, .selector-secondary, .selector[type=text] { padding:15px; margin:0px 0px 15px; @@ -6,12 +6,11 @@ box-shadow:0 1px 2px #CCC,inset 0 1px 0 #FFFFFF } -/* Хороший CSS */ +/* Хороший Stylus */ .selector, .selector-secondary, -.selector[type="text"] { - padding: 15px; - margin: 0 0 15px; - background-color: rgba(0,0,0,.5); - box-shadow: 0 1px 2px #ccc, inset 0 1px 0 #fff; -} +.selector[type="text"] + padding 15px + margin 0 0 15px + background-color rgba(0,0,0,0.5) + box-shadow 0 1px 2px #ccc, inset 0 1px 0 #fff diff --git a/index.html b/index.html index bc8ff7f3..4b559a00 100644 --- a/index.html +++ b/index.html @@ -33,7 +33,7 @@

    CSS

  • Свойства с префиксами
  • Правила с одиночными объявлениями
  • Сокращенная запись
    • -
  • Вложенность в Less и Sass
    • +
  • Вложенность
  • Комментарии
  • Имена классов
  • Селекторы
    • @@ -215,7 +215,7 @@

    Разметка, генерируемая с помощью JavaScript

    -

    CSS

    +

    Stylus

    @@ -224,14 +224,12 @@

    Синтаксис

    • Используйте мягкие отступы с двумя пробелами — это единственный способ гарантировать, что ваш код будет везде одинаково выглядеть.
    • При группировке селекторов помещайте каждый селектор на отдельную строку.
      • -
    • Для лучшей читаемости оставляйте один пробел перед открывающейся фигурной скобкой блока объявлений.
      • -
    • Помещайте закрывающуюся фигурную скобку блока объявлений на новой строке.
      • -
    • Оставляйте один пробел после : для каждого объявления.
      • +
    • Фигурные скобки не используются.
      • +
    • После объявления : не ставится.
    • Каждое объявление должно находится на отдельной строке для более точного сообщения об ошибках.
      • -
    • Завершайте все объявления точкой с запятой. Для последнего объявления в блоке это не является обязательным, но в противном случае ваш код будет более подвержен ошибкам.
    • Для свойств, значения которых разделены запятыми, следует оставлять по одному пробелу после каждой запятой (например, box-shadow).
    • Не оставляйте пробелов после запятых внтури значений rgb(), rgba(), hsl(), hsla(), или rect(). Это помогает различать различные цветовые значения (запятая без пробела) от нескольких значений одного свойства (запятая с пробелом).
      • -
    • Не добавляйте начальный ноль для значений (например, .5 вместо 0.5).
      • +
    • Начальный ноль для значений (например, 0.5 вместо .5).
    • Все 16-ичные значения записывайте строчными буквами (в нижнем регистре), например, #fff. Строчные буквы гораздо легче различить при просмотре файла, поскольку они, как правило, имеют больше уникальных форм.
    • Используйте короткие 16-ичные значения везде, где это возможно, например, #fff вместо #ffffff.
    • Всегда берите в кавычки значения атрибутов внутри селектора, например, input[type="text"]. В некоторых случаях это делать необязательно, но это является хорошей практикой для поддержки согласованности.
      • @@ -247,23 +245,14 @@

      Синтаксис

      Порядок объявления

      -

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

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

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

      -

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

      -

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

      +

      Объявления свойств должны быть по алфавиту

      {% highlight css %}{% include css/declaration-order.css %}{% endhighlight %}
      -
      +
      @@ -292,8 +281,7 @@

      Место для media query

      Свойства с префиксами

      -

      Когда вы используете свойства с префиксами вендоров, оставляйте отступы для каждого свойства так, чтобы значения объявлений выстраивались в вертикальную линию. Это упрощает многострочное редактирование.

      -

      В Textmate используйте Text → Edit Each Line in Selection (⌃⌘A). В Sublime Text 2, используйте Selection → Add Previous Line (⌃⇧↑) и Selection → Add Next Line (⌃⇧↓).

      +

      Используется autoprefixer, необходимости в прописывании префиксов нет.

      {% highlight css %}{% include css/prefixed-properties.css %}{% endhighlight %} @@ -303,8 +291,7 @@

      Свойства с префиксами

      Правила с одиночными объявлениями

      -

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

      -

      Ключевым фактором здесь является обнаружение ошибок — например, валидатор CSS сообщает вам, что в строке 183 есть синтаксическая ошибка. С одиночным объявлением не возникнет сложности с исправлением. В случае с несколькими объявлениями, разделенными на строки, так же проблем не возникнет. Но если несколько объявлений будут записаны в одну строку, то вам будет сложнее понять какое именно объявление вызвало синтаксическую ошибку.

      +

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

      {% highlight css %}{% include css/single-declarations.css %}{% endhighlight %} @@ -333,8 +320,8 @@

      Сокращенная запись

      -

      Вложенность в Less и Sass

      -

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

      +

      Вложенность

      +

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

      {% highlight scss %}{% include css/nesting.scss %}{% endhighlight %} @@ -363,7 +350,6 @@

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

    • Классы с префиксами должны основываться на ближайшем классе-родителе или на каком то базовом классе.
    • Используйте имена классов с префиксом .js-* для обозначения поведения (в отличие от стиля), но не используйте эти классы в вашем CSS.
    -

    Также будет полезно использовать многие из приведенных рекомендаций для имен переменных в препроцессорах Sass и Less.

    {% highlight css %}{% include css/class-names.css %}{% endhighlight %} @@ -374,7 +360,7 @@

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

    Селекторы

      -
    • Используйте имена классов место имен тегов для оптимальной производительности отображения.
      • +
    • Используйте имена классов вместо имен тегов для оптимальной производительности отображения.
    • Избегайте использования нескольких селекторов по атрибуту (например, [class^="..."]) для часто встречающихся компонентов. Это негативно повлияет на производительность браузера.
    • Используйте короткие селекторы и старайтесь ограничить количество элементов в каждом селекторе до трех.
    • Вкладывайте классы в ближайший родительский класс только в случае необходимости (например, когда не используете классы с префиксами).
      • @@ -394,6 +380,7 @@

      Селекторы

      Организация кода

        +
      • Посмотрите организацию файловой системы в README.md
      • Организуйте разделы кода согласно вашим компонентам.
      • Разработайте последовательную иерархию для комментариев.
      • Отделяйте разделы кода несколькими пустыми строками. Это упростит просмотр кода в крупных файлах.
        • From a3287be629e446dcb9148b6b05f0771d19d88700 Mon Sep 17 00:00:00 2001 From: gitanon Date: Tue, 26 Jul 2016 17:43:57 +0900 Subject: [PATCH 10/13] Update stylus --- index.html | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/index.html b/index.html index 4b559a00..58c7776d 100644 --- a/index.html +++ b/index.html @@ -343,12 +343,11 @@

        Комментарии

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

          -
        • Записывайте имена классов строчными буквами и используйте знаки тире (а не знаки нижнего подчеркивания или camelCase). Знаки тире служат разделителями во взаимосвязанных классах (например, .btn и .btn-danger).
          • -
        • Избегайте чрезмерные и произвольные сокращения. .btn подойдет для button, но .s не означает ничего.
          • +
        • Используется "классическое именование" БЭМ
        • Придерживайтесь коротких и емких имен классов настолько, насколько это возможно.
        • Используйте осмысленные имена; используйте структурные или целенаправленные имена вместо презентационных.
        • Классы с префиксами должны основываться на ближайшем классе-родителе или на каком то базовом классе.
          • -
        • Используйте имена классов с префиксом .js-* для обозначения поведения (в отличие от стиля), но не используйте эти классы в вашем CSS.
          • +
        From 5fbe918f791f5dfcfcf1e9f5473f0c0437304c34 Mon Sep 17 00:00:00 2001 From: gitanon Date: Thu, 28 Jul 2016 11:44:24 +0900 Subject: [PATCH 11/13] Add stylus --- _includes/css/set.css | 38 ++++++++++++++++++++++++++++++++++++++ index.html | 14 ++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 _includes/css/set.css diff --git a/_includes/css/set.css b/_includes/css/set.css new file mode 100644 index 00000000..01cd556f --- /dev/null +++ b/_includes/css/set.css @@ -0,0 +1,38 @@ +.element + ... + +.element-avatar + ... + +.element-selected + ... + +@media (min-width: tablet) + .element + ... + + .element-avatar + ... + + .element-selected + ... + +@media (min-width: screen) + .element + ... + + .element-avatar + ... + + .element-selected + ... + +@media (min-width: screen_large) + .element + ... + + .element-avatar + ... + + .element-selected + ... diff --git a/index.html b/index.html index 58c7776d..277cb9ef 100644 --- a/index.html +++ b/index.html @@ -218,6 +218,20 @@

        Разметка, генерируемая с помощью JavaScript

        Stylus

        +
        +
        +

        Подход к разработке стилей

        +
          Mobile first использующий следующие разрешения: +
        • mobile (экраны шириной от 0 до 640px), стили пишутся без использования медия выражений
          • +
        • tablet = 40em (экраны шириной от 640px и больше), стили пишутся в медиа выражении @media (min-width: tablet)
          • +
        • screen = 64em (экраны шириной от 1024px и больше), стили пишутся в медиа выражении @media (min-width: screen)
          • +
        • screen_large = 90em (экраны шириной от 1440px и больше), стили пишутся в медиа выражении @media (min-width: screen_large)
          • +
        +
        + {% highlight css %}{% include css/set.css %}{% endhighlight %} +
        +
        +

        Синтаксис

        From 4bc3882d750f6e179ead5750af663d37ed72a7dc Mon Sep 17 00:00:00 2001 From: gitanon Date: Thu, 28 Jul 2016 11:47:12 +0900 Subject: [PATCH 12/13] Fix --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index 277cb9ef..9f181480 100644 --- a/index.html +++ b/index.html @@ -26,6 +26,7 @@

        HTML

        CSS

        +
        {% highlight css %}{% include css/set.css %}{% endhighlight %}
        From cd8485e758d6fbe6c8c758fe71c432202eb5fb67 Mon Sep 17 00:00:00 2001 From: gitanon Date: Sat, 30 Jul 2016 15:38:14 +0800 Subject: [PATCH 13/13] pygments to rouge --- _config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/_config.yml b/_config.yml index eb2f7d73..1fe3ae7d 100644 --- a/_config.yml +++ b/_config.yml @@ -4,4 +4,4 @@ url: http://mdo.github.com/code-guide markdown: rdiscount permalink: pretty -pygments: true +rouge: true