1. Стажировка-2014
Code conventions
and best practices

2. Стажировка-2014
Красивая картинка о том, каким
должен быть ваш код
http://rhr.me/pres/mcss/

3. Стажировка-2014
Имена CSS селекторов

4. Стажировка-2014
Имена CSS селекторов
<div class=‘user_login’>
<div class=‘userLogin’>
<div class=‘UserLogin’>
Правильно: <div class=‘user-login’>

5. Стажировка-2014
Имена CSS селекторов
Ещё примеры неудачных селекторов:
form#tb3
div#divmenu
.row1
.row2
#Menu2

6. Стажировка-2014
Имена CSS селекторов
Хорошей практикой является
использование соглашений, принятые
в языке программирования/разметки.

7. Стажировка-2014
Имена CSS селекторов
… или соглашений, принятых в
команде

8. Стажировка-2014
Пример CSS классов по
Яндекс БЭМ
class=“sub-menu__search search_state_current”

9. Стажировка-2014
Методологии, стайлайды
Yandex БЭМ (Яндекс)
MCSS (Одноклассники)
SMACSS
Google, Github, Mozilla
style guides
WC3 Recommendations
Idiomatic CSS, JSLint, etc…

10. Стажировка-2014
Руководство по
форматированию CSS
http://habrahabr.ru/post/149986/
http://codeguide.co/

11. Стажировка-2014
Префиксы JS
<form class=‘feedback’>
css:
.feedback { margin: 5px; }
.js:
$(‘.feedback’).click(function(){
// code
})

12. Стажировка-2014
Префиксы JS
<form class=“feedback js-popup”>
css:
.feedback { margin: 5px; }
.js:
$(‘.js-popup’).click(function({
// code
})

13. Стажировка-2014
inline-css и js
<!-- bad -->
<div style=“float: left;”>
<p style=“color: black;”>
</div>

14. Стажировка-2014
inline-css и js
•HTML код трудночитаем
•Дублирование стилей для разных
элементов, дублирование стилей для
разных html-файлов.
•Сложно переопределить свойство:
стили, указанные в атрибуте style
имеют наивысший приоритет.

15. Стажировка-2014
Приоритет применения стилей к
элементам
.html:
<div class=“cool” style=“color: red;”>
.css:
.cool {
color: black;
}

16. Стажировка-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;
}

17. Стажировка-2014
Производительность CSS
селекторов
Браузер выполняет поиск элементов
справа налево:
section ⟵ .news ⟵ a

18. Стажировка-2014
Производительность CSS
селекторов
Поэтому, нужно стараться избегать
селекторов, где целевой объект – тэг
без класса или id
.news a.social
лучше, чем
.news a и .news *

19. Стажировка-2014
Особенности italic шрифтов
Важно: Если рукописное начертание
шрифта отсутствует, браузер отрендерит
italic начертание путём наклона Normal-
версии шрифта.

20. Стажировка-2014
Особенности italic шрифтов
Важно: Если рукописное начертание
шрифта отсутствует, браузер отрендерит
italic начертание путём наклона Normal-
версии шрифта.