Стажировка-2014, занятие 9. Code conventions and best practices
Download as PPTX, PDF0 likes349 views
Документ содержит рекомендации по написанию качественного CSS-кода, включая имена селекторов и соглашения о наименовании. Также обсуждаются методологии, такие как БЭМ и другие лучшие практики. Основное внимание уделяется производительности селекторов и вопросам форматирования кода.
Стажировка-2014, занятие 9. Code conventions and best practices
- 1. Стажировка-2014 Code conventions and best practices
- 2. Стажировка-2014 Красивая картинка о том, каким должен быть ваш код http://rhr.me/pres/mcss/
- 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…
- 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- версии шрифта.