Курс по уеб програмиране (2014), занятие №4 - JavaScript (част 2/2)
Стажировка-2014, занятие 9. Code conventions and best practices
Transcript of Стажировка-2014, занятие 9. Code conventions and best practices
![Page 1: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/1.jpg)
Стажировка-2014
Code conventionsand best practices
![Page 2: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/2.jpg)
Стажировка-2014
Красивая картинка о том, каким должен быть ваш код
http://rhr.me/pres/mcss/
![Page 3: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/3.jpg)
Стажировка-2014
Имена CSS селекторов
![Page 4: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/4.jpg)
Стажировка-2014
Имена CSS селекторов
<div class=‘user_login’><div class=‘userLogin’><div class=‘UserLogin’>
Правильно: <div class=‘user-login’>
![Page 5: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/5.jpg)
Стажировка-2014
Имена CSS селекторов
Ещё примеры неудачных селекторов:
form#tb3div#divmenu
.row1
.row2#Menu2
![Page 6: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/6.jpg)
Стажировка-2014
Имена CSS селекторов
Хорошей практикой является использование соглашений, принятые в языке программирования/разметки.
![Page 7: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/7.jpg)
Стажировка-2014
Имена CSS селекторов
… или соглашений, принятых в команде
![Page 8: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/8.jpg)
Стажировка-2014
Пример CSS классов поЯндекс БЭМ
class=“sub-menu__search search_state_current”
![Page 9: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/9.jpg)
Стажировка-2014
Методологии, стайлайды
Yandex БЭМ (Яндекс)MCSS (Одноклассники)
SMACSS
Google, Github, Mozilla style guides
WC3 RecommendationsIdiomatic CSS, JSLint, etc…
![Page 10: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/10.jpg)
Стажировка-2014
Руководство по
форматированию CSS
http://habrahabr.ru/post/149986/
http://codeguide.co/
![Page 11: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/11.jpg)
Стажировка-2014
Префиксы JS
<form class=‘feedback’>
css:.feedback { margin: 5px; }
.js:$(‘.feedback’).click(function(){
// code})
![Page 12: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/12.jpg)
Стажировка-2014
Префиксы JS
<form class=“feedback js-popup”>
css:.feedback { margin: 5px; }
.js:$(‘.js-popup’).click(function({// code
})
![Page 13: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/13.jpg)
Стажировка-2014
inline-css и js
<!-- bad --> <div style=“float: left;”><p style=“color: black;”>
</div>
![Page 14: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/14.jpg)
Стажировка-2014
inline-css и js
•HTML код трудночитаем•Дублирование стилей для разных элементов, дублирование стилей для разных html-файлов.•Сложно переопределить свойство: стили, указанные в атрибуте style имеют наивысший приоритет.
![Page 15: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/15.jpg)
Стажировка-2014
Приоритет применения стилей к элементам
.html:<div class=“cool” style=“color: red;”>
.css:
.cool {color: black;
}
![Page 16: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/16.jpg)
Стажировка-2014
Производительность CSS селекторов
section .news a {color: red;
}
<section><div class=“news”>
<a class=“social” href=“#”>…</a></div>
</section><a href=“#”>…</a>
a.social {color: red;
}
![Page 17: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/17.jpg)
Стажировка-2014
Производительность CSS селекторов
Браузер выполняет поиск элементовсправа налево:
section ⟵ .news ⟵ a
![Page 18: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/18.jpg)
Стажировка-2014
Производительность CSS селекторов
Поэтому, нужно стараться избегать селекторов, где целевой объект – тэг
без класса или id
.news a.socialлучше, чем
.news a и .news *
![Page 19: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/19.jpg)
Стажировка-2014
Особенности italic шрифтов
Важно: Если рукописное начертание шрифта отсутствует, браузер отрендерит italic начертание путём наклона Normal-версии шрифта.
![Page 20: Стажировка-2014, занятие 9. Code conventions and best practices](https://reader033.fdocuments.us/reader033/viewer/2022052910/559cb9e11a28abcf558b4754/html5/thumbnails/20.jpg)
Стажировка-2014
Особенности italic шрифтов
Важно: Если рукописное начертание шрифта отсутствует, браузер отрендерит italic начертание путём наклона Normal-версии шрифта.