maksumov / clean-code-s1e1 Goto Github PK
View Code? Open in Web Editor NEWThis project forked from viktoryiayatskova/clean-code-s1e1
This project forked from viktoryiayatskova/clean-code-s1e1
Используйте HTML так, как это было задумано.
Используйте теги по их прямому назначению: заголовки для заголовков, <p>
для абзацев, <a>
для ссылок и т.д.
Помимо <div>
-ов для блоков вам можно и нужно ознакомиться и применять такие элементы <aside>
, <section>
, <article>
.
Почему?
<!-- Not recommended -->
<div onclick="goToRecommendations();">
All recommendations
</div>
<!-- Recommended -->
<a href="recommendations/">
All recommendations
</a>
Советуем изучить:
Всегда ставьте отступы для содержимого блоков.
Всегда ставьте отступы для любого содержимого в блоке (блоки разделены фигурными скобками {}).
Например для правил внутри правил или объявлений, чтобы отобразить иерархию и облегчить понимание кода.
@media screen, projection {
html {
background: #fff;
color: #444;
}
}
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Используйте двойные кавычки вместо одинарных для задания значений атрибутов и CSS свойств.
<!-- Not recommended -->
<a class='main-button main-button-secondary'>Sign in</a>
<!-- Recommended -->
<a class="main-button main-button-secondary">Sign in</a>
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Отделяйте селекторы и свойства переносом строки.
Начинайте каждый селектор или правило с новой строки.
/* Not recommended */
a:focus, a:active {
position: relative; top: 1px;
}
/* Recommended */
h1,
h2,
h3 {
font-weight: normal;
line-height: 3.2;
}
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Используйте шаблонные или осмысленные имена классов и идентификаторы.
Вместо использования шифров, или описания внешнего вида элемента, попробуйте в имени класса или идентификатора выразить смысл его создания, или дайте ему шаблонное имя…
рекомендуется выбирать имена, отражающие сущность класса, потому что их проще понять и, скорее всего, не понадобится менять в будущем.
Шаблонные имена — это просто вариант названия для элементов, у которых нет специального предназначения или которые не отличаются от своих братьев и сестер. Обычно они необходимы в качестве “Помощников”.
Использование функциональных или шаблонных имен уменьшает необходимость ненужных изменений в документа или шаблонах.
/* Не рекомендуется: не имеет смысла */
#yee-1901 {}
/* Не рекомендуется: описание внешнего вида */
.button-green {}
.clear {}
/* Рекомендуется: точно и по делу */
#gallery {}
#login {}
.video {}
/* Рекомендуется: шаблонное имя */
.clearfix {}
.alt {}
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Для идентификаторов и классов используйте настолько длинные имена, насколько нужно, но настолько короткие, насколько возможно.
Попробуйте сформулировать, что именно должен делать данный элемент, при этом будьте кратки насколько возможно.
Такое использование классов и идентификаторов вносит свой вклад в облегчение понимания и увеличение эффективности кода.
/* Не рекомендуется */
#navigation {}
.atr {}
/* Рекомендуется */
#nav {}
.author {}
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Не используйте символы-мнемоники.
Нет смысла использовать мнемоники, такие как —
(—), ”
(”) или ☺
(☺), когда все команды в файлах, редакторах используют одну кодировку (UTF-8)
Единственное исключение из этого правила — служебные символы HTML (например < и &), а так же вспомогательные и “невидимые” символы (например неразрывный пробел).
<!-- Not recommended -->
<div>Валютный знак евро: “&eur;”.</div>
<!-- Recommended -->
<div>Валютный знак евро: “€”. </div>
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Всегда используйте для одного отступа два пробела.
Не используйте табуляцию (tab-символ) для отступов и не смешивайте виды отступов (tab и пробелы одновременно).
Так как над проектами работает команда людей, то зачастую один исходный код проекта отображается в различных редакторах кода. Проблемы начинаются тогда, когда в одном файле используются разные методы идентации. Так как каждый редактор кода по разному отображает tab-отступ, то красивый файл в вашей IDE, может выглядеть совсем несуразно в другой.
<ul>
<li>Fantastic
<li>Great
</ul>
.example {
color: blue;
}
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Выделяйте новую строку для каждого блочного, табличного или списочного элемента, независимо от заданных для них стилей.
И ставьте отступы для каждого вложенного элемента, соблюдая таким образом лестницу вложенности.
Примеры:
<em>
- строчный, потому его можно не переносить. Он используется для выделения подстроки в параграфе.<p>
обязательно нужно перенести на новую строку.<blockquote>
<p><em>Space</em>, the final frontier.</p>
</blockquote>
<ul>
<li>Маша</li>
<li>Глаша</li>
<li>Чебураша</li>
</ul>
<table>
<thead>
<tr>
<th scope="col">Прибыль</th>
<th scope="col">Налоги</th>
<tr>
</thead>
<tbody>
<tr>
<td>$ 5.00</td>
<td>$ 4.50</td>
<tr>
</tbody>
</table>
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Используйте БЭМ нотация для формирования имен классов.
БЭМ (Блок, Элемент, Модификатор) — компонентный подход к веб-разработке. В его основе лежит принцип разделения интерфейса на независимые блоки. Он позволяет легко и быстро разрабатывать интерфейсы любой сложности и повторно использовать существующий код, избегая «Copy-Paste».
БЭМ берет свое начало в компании Яндекс, однако распространился далеко за ее пределы.
В кратце в основе БЭМ лежит идея разделения любой интерфейс на блоки. Неотделимые части блоков — элементы. У тех и других есть модификаторы.
<ul class="menu">
<li class="
menu__item">
</li>
<li class="
menu__item
menu__item_active">
</li>
</ul>
Например, блок меню сайта. Оно может быть в шапке и в боковой части сайта — значит, это блок. В нём есть обязательные части: элементы списка меню, заголовок — это его элементы. Если какой-то элемент меню является активным, то ему даётся модификатор.
Весь код должен быть в нижнем регистре. Это касается всех HTML-имен, включая названия атрибутов, значения атрибутов, CSS-селекторы, CSS-свойства и их значения.
<!-- Not recommended -->
<A HREF="/">Home</A>
<!-- Recommended -->
<img src="google.png" alt="Google">
/* Not recommended */
color: #E5E5E5 ;
/* Recommended */
color: #e5e5e5 ;
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Какой бы стиль написания имен вы не выбрали, соблюдайте его во всем проекте.
Если вы используете БЭМ, придерживайтесь этой нотации без исключения.
Иначе рекомендуется использовать дефис для разделения слов в селекторах и прописание их в нижнем регистре,
при этом все слова в селекторе обязательно должны быть отделены.
/* Не рекомендуется: слова “demo” и “image” не разделены */
.demoimage {}
/* Не рекомендуется: используется подчеркивание вместо дефиса */
.error_status {}
/* Рекомендуется */
#video-id {}
.ads-sample {}
/* Рекомендуется в случае использования БЭМ */
.search-form__button {}
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Ставьте точку с запятой после каждого свойства.
После каждого объявления ставьте точку с запятой для согласованности кода и облегчения добавления новых свойств
/* Not recommended */
.test {
display: block;
height: 100px
}
/* Recommended */
.test {
display: block;
height: 100px;
}
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Используйте пробелы после двоеточий в объявлениях.
Всегда используйте один пробел после двоеточия (но не до) в объявлениях, для порядка в коде.
/* Not recommended */
h3 {
font-weight:bold;
}
/* Recommended */
h3 {
font-weight: bold;
}
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Используйте HTML5.
HTML5 рекомендуется для всех видов HTML-документов и обозначается первым тегом в HTML документе:
<!DOCTYPE html>
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Разбивайте длинные строки на несколько.
Разбиение длинного текста на несколько строк может значительно улучшить читаемость кода.
При разбиении строк рекомендуется перед каждой перенесенной строкой от начальной поставить отступ хотя бы в 4 пробела.
Примеры:
<md-progress-circular md-mode="indeterminate" class="md-accent"
ng-show="ctrl.loading"md-diameter="35">
</md-progress-circular>
<md-progress-circular
md-mode="indeterminate"
class="md-accent"
ng-show="ctrl.loading"
md-diameter="35">
</md-progress-circular>
<md-progress-circular md-mode="indeterminate"
class="md-accent"
ng-show="ctrl.loading"
md-diameter="35">
</md-progress-circular>
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Не используйте атрибут type
при подключении стилей (кроме вариантов когда используется что-то кроме CSS) и скриптов (кроме вариантов когда это не JavaScript).
<!-- Not recommended -->
<link rel="stylesheet" href="//www.google.com/css/main.css"
type="text/css">
<!-- Recommended -->
<link rel="stylesheet" href="//www.google.com/css/main.css">
<!-- Not recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"
type="text/javascript"></script>
<!-- Recommended -->
<script src="//www.google.com/js/gweb/analytics/autotrack.js"></script>
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
Всегда указывайте альтернативное содержимое для мультимедиа.
Постарайтесь указать альтернативное содержимое для мультимедиа:
например для картинок, видео или анимаций, заданных с помощью canvas.
Для картинок - это осмысленный альтернативный текст (alt),
а для видео и аудио - расшифровки текста и подписи, если это возможно.
Note! Если для картинки alt избыточен, или она используется только в декоративных целях в местах,
где нельзя использовать CSS, используйте пустой альтернативный текст alt=""
.
Почему?
<!-- Not recommended -->
<img src="spreadsheet.png">
<!-- Recommended -->
<img src="spreadsheet.png" alt="Spreadsheet screenshot">
Файл субтитров добавляется с помощью <track>
- элемента:
<video preload="auto" width="480" height="360" poster="cute-kitten-video.jpg">
<source type="video/mp4" src="cute-kitten-video.mp4"/>
<source type="video/webm" src="cute-kitten-video.webm"/>
<track kind="captions" src="video-captions.vtt"/>
</video>
Это место создано для удобства нахождения коммитов с правками без правил. Тут собраны все коммиты, которые содержат правки по которым у меня чесались руки и по которым я не нашёл соответствующих правил. Что именно правится можно посмотреть в описании коммита.
Не используйте теговые селекторы (за исключением намеренного сброса дефолтных стилей).
Это повышает производительность при применении стилей браузером.
Подробнее о этом
К тому же, возможно, в будущем вы захотите изменить используемый тег на какой-то другой, в таком случае вам придется отследить все места использования данного тега в стилях и поправить на новый, в то время как использование классов / id помогает абстрагировать ваши стили от деталей вашей html-верстки.
/* Не рекомендуется */
body {}
ul#example {}
div.error {}
/* Рекомендуется */
.page {}
#example {}
.error {}
Source: https://rolling-scopes-school.github.io/stage0/#/stage1/tasks/clean-code/guidelines/html-and-css
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.