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, спрашивай здесь, потом добавим в "Вопрос-ответ".

Библиотека обновилась до версии 0.2 Список изменений: .b-grid Переделан демо-пример Добавлен вертикальный ритм Добавлено описание .b-divider Переделан демо-пример Добавлено описание Переделаны примеры использования .b-article Добавлен вертикальный ритм .b-pic Добавлено описание Исправлен баг с expression в IE, когда в некоторых ситуация картинка пропадала если был прописан background bemclub.in

Вопрос задан правильно. Учите матчасть, сударь Хм, интересно, уже два человека меня уверяют, что .b-grid .b-grid__cell как-то нестадартно(не так как обычные боксы) влияет на высоту строк, то есть на вертикальный ритм. Хорошо попробуем разобраться как .b-grid .b-grid__cell вообще может повлиять на вертикальный ритм. Строковый котекст форматирования. Теория. от eric meyer. ссылка Во-первых, немного равенств, а затем объяснения терминов. em-box = font-size = content-area content-area + (half-)leading = inline box inline box(min/max) = line-box ...где: em-box = em-box определяется заданным шрифтом. font-size = свойтво которое определяет размер шрифта. content-area для строковых элементов это аналог content-box блоковых элементов. Для незамещаемых элементов, высота бокса content-area описывается свойством font-size для каждого символа в элементе; для замещаемых элементов, это действительная высота элемента плюс margin, padding или border. (half-)leading = разница между font-size и line-height, применяется в равной степени сверху и снизу content-area для каждого элемента. inline box = сложение (half-)leading с content-area для каждого элемента; для незамещаемых элементов, высота inline box для каждого элемента точно равна line-height, если line-height меньше font-size высота inline box будет равна content-area; для замещаемых элементов высота inline box для каждого элемента точно равна действительной высоте элемента плюс margin, padding или border. line-box(строка) = высота строки(line-box) определяется по самой высокой и самой низкой границе inline box'ов в строке. (если проще высота строки определяется от самого большого inline box’а в ней) Следствия: background для строковых элементов применяется к content-area плюс padding. любая рамка (border) на строковом элементе будет окружать content-area плюс padding. margin,padding,border на незамещаемых элементах не имеют влияния на поток по вертикали, но имеют по горизонтали. margin,padding,border на замещаяемых элементах влияют на высоту inline box’а для этого элемента. Продолжение у мейера Все что сейчас нам нужно знать, это то что высота строки, если в ней нет замещаемых элементов, зависит только от двух свойств font-size и line-height И с этим знанием мы можем ответить на наш вопрос: Каким образом .b-grid .b-grid__cell может повлиять на вертикальный ритм? Никаким, т.к в них не заданы font-size или line-height. CSS: .b-grid { letter-spacing: -0.31em; word-spacing: -0.43em; } ГреатРаш, если ты испугался вот этих деклараций, не бойся, они просто убирают пробелы между строками. .b-grid__cell { display: inline-block; word-wrap: break-word; letter-spacing: normal; word-spacing: normal; vertical-align: top; } Этого тоже не надо пугаться, нет оно не кусается И никаким образом не влияет на твой красивый вертикальный ритм. P.S. s0rr0w, я кое-что для тебя сделал

Задай вопрос правильно.

Как тебе удобно так и будут, можно свободно задавать отступы и в процентах и в пикселях. Отступы между ячейками .b-grid__cell задаются не самим ячейкам, а элементам внутри них. Например, мы хотим сделать отступ между ячейками в 5% или любой другой. HTML <div class="b-grid"> <div class="b-grid__cell b-grid__cell_1-4"> 1-4 </div> <div class="b-grid__cell b-grid__cell_1-4"> 1-4 </div> <div class="b-grid__cell b-grid__cell_1-4"> 1-4 </div> <div class="b-grid__cell b-grid__cell_1-4"> 1-4 </div> </div> Создаем новый блок .b-example и внутри ячейки .b-grid__cell элемент .b-example__block и задаем этому элементу отступ справа в 5% HTML <div class="b-grid b-example"> <div class="b-grid__cell b-grid__cell_1-4"> <div class="b-example__block">1-4</div> </div> <div class="b-grid__cell b-grid__cell_1-4"> <div class="b-example__block">1-4</div> </div> <div class="b-grid__cell b-grid__cell_1-4"> <div class="b-example__block">1-4</div> </div> <div class="b-grid__cell b-grid__cell_1-4"> <div class="b-example__block">1-4</div> </div> </div> CSS .b-example__block { margin-right: 5%; } Теперь между каждым элементом .b-example__block есть отступ в 5%, но у последнего элемента он нам не нужен. Для того чтобы компенсировать отступ последнего элемента прописываем на блоке .b-example отступ справа margin-right: -5%; HTML <div class="b-grid b-example"> <div class="b-grid__cell b-grid__cell_1-4"> <div class="b-example__block">1-4</div> </div> <div class="b-grid__cell b-grid__cell_1-4"> <div class="b-example__block">1-4</div> </div> <div class="b-grid__cell b-grid__cell_1-4"> <div class="b-example__block">1-4</div> </div> <div class="b-grid__cell b-grid__cell_1-4"> <div class="b-example__block">1-4</div> </div> </div> CSS .b-example { margin-right: -5%; } .b-example__block { margin-right: 5%; } Все готово, отступы между ячейками .b-grid__cell в 5% точно выровнены по левому и правому краю. Что мешает?

Документ обновился до версии 0.5 Добавлена библиотека блоков. В библиотеке собраны наиболее часто используемые на страницах элементы. На данный момент в ней 8 блоков. .b-grid .b-devider .b-article .b-pic .b-input .b-pin .b-elastic .i-expand Со временем библиотека будет пополняться. Добро пожаловать

Обновлено до версии 0.35 Добавлена большая часть теории. http://bemclub.in/ Со следующим обновлением будет добавлена библиотека блоков.

Версия 0.28 psywalker, обновлен раздел вопрос-ответ По просьбам трудящихся добавлена навигация.

Документ обновился до версии 0.25 Обновился раздел практика Добавился раздел вопрос-ответ.

Я просил портал с полутора сотнями шаблонами, а не домашнюю страничку. при чем тут ты? Да, именно так. рад Верстальщики бывают разные... Перед кем-то не стоит, а кто-то делает не так как все. Кого-то используют, а кто-то растет в профессиональном плане. юзабилити-специалисты - они так себя называют. Никто не заставляет именовать именно так: b-блок__элемент_модификатор В принципе можешь именовать как тебе нравится, главное чтобы мог отличить блок от элемента, элемент от модификатора и т.д. Посмотреть как именно формировались соглашения по именованию, можно здесь Создал отдельную тему по БЭМ здесь

Несмотря на то что концепция независимых блоков(БЭМ) существует уже около 3 лет, большинство верстальщиков очень смутно понимают что это такое. Между тем множество крупных порталов используют этот метод в верстке, такие как yandex,rambler,yahoo(oocss - тот же bem, только попроще)... Препятствует понимаю БЭМ и то, что статьи и видео по БЭМ методу разбросаны по сети, и очень сложно и долго самому их искать и выписывать, какая-то информация уже устарела. Было решено сделать общий проект который объединит все знания из bem, oocss в понятной и доступной форме. Добро пожаловать Дополнительные материалы. BEM клуб http://clubs.ya.ru/bem/ BEM видео http://clubs.ya.ru/bem/replies.xml?item_no=1009 http://video.yandex.ru/users/ya-events/view/16/ http://video.yandex.ru/users/ya-events/view/14/ http://video.yandex.ru/users/ya-events/view/15/?cauthor=ya-events&cid=2 http://video.yandex.ru/users/ya-events/view/13/ http://clubs.ya.ru/bem/replies.xml?item_no=864