Занятие со спецкурса в ОмГУ, 2014 год

1. Спецкурс ОмГУ-2014
Занятие 9
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>
section .news a {
color: red;
}
<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-
версии шрифта.

21. Спецкурс ОмГУ-2014
Задание
• Выполнить верстку по PSD макету
дизайнера.

22. Спецкурс ОмГУ-2014
Вопросы?