Стажировка 2015. Разработка. Занятие 9. BEM
- 1. Б Э М
- 3. Блок ● заголовок ● кнопка ● навигационное меню
- 7. Элемент(часть блока) ● навигационное меню (блок), содержащее пункты меню (элементы); ● таблица (блок), внутри которой строки, ячейки и заголовки (элементы).
- 9. Модификаторы определяют свойства или состояния
- 12. Система именования Элементов .b-text-input__label .b-text-input__text-field .b-block__elem1__elem2
- 13. Система именования Модификаторов .b-text-input_disabled .b-select__option_selected .b-heading_level_alpha <div class="b-heading b-heading_level_alpha">BEM</div>
- 14. Если вам нравится другой способ именования — используйте его, только убедитесь, что у вас есть на то технологическая причина.
- 16. БЭМ и файловая структура /blocks /b-button /b-heading /b-flyout /b-menu /b-text-field … /b-jquery /b-model
- 17. БЭМ и файловая структура /b-menu b-menu.js b-menu.css b-menu.tpl
- 18. БЭМ и файловая структура /b-menu /__item b-menu__item.css b-menu__item.tpl /_horizontal b-menu_horizontal.css /_theme /_dark b-menu_theme_dark.css /_light b-menu_theme_light.css b-menu.css b-menu.js b-menu.tpl
- 19. JavaScritp BEMDOM.decl('b-dropdown', { onSetMod: { disabled: function(modName, modVal) { this.getLabel().setMod('hidden', 'yes'); if (modVal === 'yes') { this.getPopup().hide(); } }, open: { yes: function() { this.populateList(); } } }, /* … */