Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
Download as PPTX, PDF0 likes321 views
Документ охватывает принципы и лучшие практики написания кода, включая соглашения по именованию CSS селекторов, форматированию кода и управлению приоритетами стилей. Он также упоминает методы и стандарты, такие как Yandex BEM и SMACSS, для упрощения разработки и поддержания читаемости. В конце предлагается задание по верстке в соответствии с PSD макетом дизайнера.
Спецкурс 2014, занятие 9 (2 часть). Code conventions and best practices
- 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 макету дизайнера.