Download to read offline
![Как пользоваться?
thor bem:create -b test -m color -v red
thor bem:create -b test -e icon -m size -v small
= b "test", mods: [{color: "red"}],
content: [{
elem: "icon",
elemMods: [{size: "small"}]
}]](https://image.slidesharecdn.com/random-140204013231-phpapp02/85/slide-13-320.jpg)
Uploaded byracoons
бэм методология
Документ описывает методологию БЭМ (блок-элемент-модификатор) для обеспечения быстрого и устойчивого развития типовых проектов с акцентом на совместную работу команд. Также описаны инструменты, такие как bem-tools, csso и svgo, которые помогают в разработке и оптимизации файлов, написанных с использованием данной методологии. В документе приводятся инструкции по использованию инструментов БЭМ на Rails.
бэм методология
- 1.
- 2.
- 3. Для чего? • Типовыепроекты должны разрабатываться быстро, но жить долго • Над проектом работает много людей • Масштабируемость команд • Повторное использование кода
- 4.
- 5.
- 6.
- 7.
- 8. Предметная абстракция С точкизрения процесса разработки: • Все участники процесса оперируют одними терминами С точки зрения CSS: • CSS блоков и элементов можно описывать на псевдоязыке, который затем компилируется в чистый CSS согласно принятой схеме именования. С точки зрения JavaScript: • Не нужно обращаться к DOM-узлам блоков и элементов по имени класса
- 9.
- 10.
- 11. Инструменты bem-tools это инструментдля работы с файлами, написанными по БЭМ-методу. CSSO (CSS Optimizer) является минимизатором CSS, выполняющим как минимизацию без изменения структуры, так и структурную минимизацию с целью получить как можно меньший текст. SVGO (SVGO Optimizer) — это инструмент для оптимизации векторной графики в формате SVG, написанный на Node.js. Расширяемый сборщик файлов borschik может использоваться для сборки текстовых файлов из кусочков. Например, для сборки статических файлов веб-страниц (CSS, JS, etc).
- 12. А как жерельсы?! BEM on Rails github.com/verybigman/bem-on-rails
- 13. Как пользоваться? thor bem:create-b test -m color -v red thor bem:create -b test -e icon -m size -v small = b "test", mods: [{color: "red"}], content: [{ elem: "icon", elemMods: [{size: "small"}] }]
- 14.