exessqd1

Ребят, проектом я больше не занимаюсь, хостинг закончится через пару дней. Кому нужно сохраняйте себе страничку/библиотечку, потом поздно будет Я предупредил.

Документ обновился до версии 0.7 Список изменений: Небольшой косметический ремонт Добавлен материал в раздел "Расшифровываем аббревиатуру БЭМ" Добавлен материал в раздел "Вопрос-ответ" bemclub.in Библиотека обновилась до версии 0.35 Список изменений: .b-grid Исправлен баг IE6 когда ячейки перескакивали при уменьшении размера окна Исправлен баг с изображениями в IE7 .b-divider Исправлен баг со склеиными блоками в IE6 .b-article Поправлен вертикальный ритм bemclub.in/_matrioshka/

Это обсуждалось здесь. Тоже самое можно сделать с помощью БЭМ-инструментов. А вообще главная проблема OOCSS в неуникальности классов, а отсюда вытекают большие проблемы, такие как: Увеличение сложности поддержки проекта - за счет того что классы не упорядочены и со временем смешиваются друг с другом, получается клубок шерсти который распутать просто так не получится, например, удалить из проекта часть кода, не затронув при этом другую часть, будет сложно. Дублирование кода - раз точно понять к какому блоку относятся те или иные стили не получится, в проекте будут находится те части которые впринципе там не нужны, просто для того чтобы ничего не сломалось. Во-первых, любое решение эмулирущее какое-либо поведение через js, будет работать медленее чем нативное решение. Во-вторых, это контекстно-зависимые селекторы и использование их в полной мере, противоречит принципам БЭМ, их можно использовать для декоративных целей в соответствии с принципом graceful degradation, и в этом случае fallback на js будет не нужен.

С LESS/SASS ты можешь разрабатывать свой проект в "ООП стиле" как в БЭМ, но CSS который в конечном итоге будет отправлен в браузер, будет таким как если бы ты ничего вообще не делал. LESS/SASS делают разработку немного легче, но они не решают проблем обычной верстки и никак не влияют на быстродействие. И впринципе никто не запрещает использовать LESS/SASS вместе с БЭМ, например так: .b-block { … ._foo {…} .__element { … ._bar {…} } }

Если их использовать, нужно обязательно убедится что они действительно нужны в этом месте, а раз так то особенно заботится о их специфичности нам не нужно. Обычно глобальные модификаторы добаляют дополнительную функциональность к блоку а не перезаписывают предыдущую. В том случае когда нам нужно перезаписать предыдущие правила конечно придется добавлять !important Использовать глобальные модификаторы нужно очень аккуратно либо вообще их не использовать, потребность в них небольшая. С таким подходом мы дойдем до того что каждое свойство вынесем в CSS и будем прописывать class="float_left clear_both". Уровень абстракции блоков и модификаторов должен быть практичен и удобен. "Блоки должны быть достаточно крупными чтобы с ними было удобно работать. Блоки должны быть достаточно мелкими чтобы не дублировать код." Эффективней будет каждому отдельному блоку написать float:left; и не размениваться по мелочам. Матрешка никак не относится к БЭМ методологии, это частная библиотека блоков созданная в терминах БЭМ.

Ребята! Кому БЭМ помог!? Поднимите руку! Поднял первым

rash, вреден — нет. s0rr0w, избыточен — спорно, избыточным может быть ипользование всех БЭМ-интрументов для создания простого проекта, но использование самой методологии, не более трудозатратно чем верстка обычными приемами. Как сказал кто-то из Яндекса: "Маленький проект может всегда превратиться в большой и тогда мы получим кучу мусорного кода".

Да, используется и не только для свойств но и для селекторов. Например, модификации для блока должны идти ниже основных правил. Но это только в пределах контекста одного блока. Отдельный блок и все что к ниму относится можно перемещать в CSS как угодно.

Добавил в вопрос-ответ

Документ обновился до версии 0.6 Список изменений: Добавлено краткое описание Обновлены советы по БЭМ Обновлены правила хорошего тона в верстке Убрано лишнее bemclub.in Библиотека обновилась до версии 0.3 Список изменений: .b-grid Доработан демо-пример Добавлена сокращенная нотация Добавлено описание .b-divider Доработан демо-пример Добавлена сокращенная нотация .b-pin .b-pin добавлен :focus .b-pic Поправлено описание bemclub.in/_matrioshka/

Плохо/Неправильно <div class="b-thumbs"> <div class="b-elastic"> <span class="b-elastic__holder b-elastic_thumbs-item"> <span class="b-elastic__item"> <img src="" class="b-thumbs__img" alt=""> <a class="b-elastic__link b-elastic_thumbs-link">text</a> </span> </span> </div> </div> <!--.b-elastic_thumbs-link, .b-elastic_thumbs-item - это модификаторы .b-elastic (class="b-elastic b-elastic_thumbs-link b-elastic_thumbs-item")--> Плохо/Правильно <div class="b-elastic b-thumbs"> <span class="b-elastic__holder b-elastic__holder_thumbs-item"> <span class="b-elastic__item"> <img src="" class="b-thumbs__img" alt=""> <a class="b-elastic__link b-elastic__link_thumbs-link">text</a> </span> </span> </div> <!--.b-elastic__holder_thumbs-item - модификатор b-elastic__holder .b-elastic__link_thumbs-link - модификатор b-elastic__link --> Хорошо/Правильно <div class="b-elastic b-elastic_thumbs b-thumbs"> <span class="b-elastic__holder"> <span class="b-elastic__item"> <img src="" class="b-thumbs__img" alt=""> <a class="b-thumbs__link">text</a> </span> </span> </div> Здесь убраны лишние модификаторы элементов т.к. на моей практике не разу не было чтобы .b-elastic вкладывался сам в себя, в этом случае можно смело модифицировать элементы от контекста блока. /*Модификация от контекста*/ .b-elastic_thumbs {} .b-elastic_thumbs .b-elastic__holder {} .b-elastic_thumbs .b-elastic__item {} /*Блок*/ .b-thumbs {} .b-thumbs__img {} .b-thumbs__link {} Чтобы товары отображались вертикально на .b-elastic_thumbs можно уточнить значение модификатора .b-elastic_thumbs_vert, либо ещё лучше просто добавить модификатор .b-elastic_vert, вертикальный .b-elastic нам может ещё пригодиться в другом месте. <div class="b-elastic b-elastic_vert b-elastic_thumbs b-thumbs"> <span class="b-elastic__holder"> <span class="b-elastic__item"> <img src="" class="b-thumbs__img" alt=""> <a class="b-thumbs__link">text</a> </span> </span> </div> В данном примере у нас получилось 2 модификации (b-elastic_vert b-elastic_thumbs) и 1 блок(b-thumbs с двумя элементами b-thumbs__img b-thumbs__link) мы без проблем можем их разделить и повторно использовать в другом месте. Да так есть, но в таком случае если бы нам понадобился бы ещё один резиновый блок на сайте нам бы пришлось добавлять для него лишний html/css. Либо если бы мы использовали вместо него несколько .b-thumbs изменив лишь пару строк в CSS все блоки .b-thumbs на проекте стали бы вертикальными. Переделывать/Добавлять как есть - других вариантов не видно, я бы добавил как есть, плагин все-таки.

Официальная спецификация здесь. Повторное использование кода.

Ветка комментариев закрыта, а ещё так хотел побеседовать Как вывод можно сказать, что сейчас нет ни одной причины не использовать БЭМ на своих проектах.

Ялекс, автор не против. Gaspode, спрашивай здесь, потом добавим в "Вопрос-ответ".